dev@423: /**
dev@423:  * Created by lucast on 06/06/2017.
dev@423:  */
dev@423: import {Component, Input} from '@angular/core';
dev@423: import {
dev@423:   animate, keyframes, state, style, transition,
dev@423:   trigger
dev@423: } from '@angular/animations';
dev@423: 
dev@423: @Component({
dev@423:   selector: 'ugly-action-tray',
dev@423:   template: `<div
dev@423:     class="tray"
dev@423:     [@visibility]="visibility"
dev@423:   ><ng-content></ng-content></div>`,
dev@423:   styles: [
dev@423:     `.tray {
dev@423:       background: white;
dev@428:       height: calc(100vh - 64px);
dev@423:       width: 100%;
dev@423:       position: absolute;
dev@423:       z-index: 100;
dev@425:       overflow: hidden;
dev@429:       -webkit-overflow-scrolling: touch;
dev@423:     }`
dev@423:   ],
dev@423:   animations: [
dev@423:     trigger('visibility', [
dev@423:       state('show', style({
dev@428:         height: 'calc(100vh - 64px)',
dev@425:         overflow: 'scroll'
dev@423:       })),
dev@423:       state('hide', style({
dev@423:         height: 0,
dev@425:         overflow: 'hidden',
dev@423:       })),
dev@423:       transition('hide => show', [
dev@423:         animate(300, keyframes([
dev@423:           style({height: 0, offset: 0}),
dev@428:           style({height: 'calc(100vh - 64px)',  offset: 1.0}),
dev@423:         ]))
dev@423:       ]),
dev@423:       transition('show => hide', [
dev@423:         animate(300, keyframes([
dev@428:           style({height: 'calc(100vh - 64px)', offset: 0.0}),
dev@423:           style({height: 0, offset: 1.0}),
dev@423:         ]))
dev@423:       ]),
dev@423:     ])
dev@423:   ]
dev@423: })
dev@423: export class ActionTrayComponent {
dev@423:   @Input() visibility: 'show' | 'hide' = 'hide';
dev@423: 
dev@423:   toggle() {
dev@423:     this.visibility = this.visibility === 'show' ? 'hide' : 'show';
dev@423:   }
dev@435: 
dev@435:   close() {
dev@435:     this.visibility = 'hide';
dev@435:   }
dev@423: }