@fivethree/core
Version:
Fivethree Core Components
127 lines • 11.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/expandable/expandable.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Output, EventEmitter, Input, ChangeDetectorRef } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
export class FivExpandable {
/**
* @param {?} change
*/
constructor(change) {
this.change = change;
this.isOpen = false;
this.fivWillOpen = new EventEmitter();
this.fivDidOpen = new EventEmitter();
this.fivWillClose = new EventEmitter();
this.fivDidClose = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() { }
/**
* @return {?}
*/
open() {
this.fivWillOpen.emit(this);
this.isOpen = true;
this.change.detectChanges();
}
/**
* @return {?}
*/
toggle() {
if (this.isOpen === false) {
this.open();
}
else {
this.close();
}
}
/**
* @param {?=} param
* @return {?}
*/
close(param) {
this.param = param;
this.fivWillClose.emit(this);
this.isOpen = false;
this.change.detectChanges();
}
/**
* @param {?} event
* @return {?}
*/
onAnimationEnd(event) {
if (event.fromState === 'closed') {
this.fivDidOpen.emit(this);
}
else if (event.fromState === 'open') {
this.fivDidClose.emit({ expandable: this, param: this.param });
this.param = null;
}
}
}
FivExpandable.decorators = [
{ type: Component, args: [{
selector: 'fiv-expandable',
template: "<div>\n <ng-content select=\"[header]\"></ng-content>\n <div [@listAnim]=\"{value: isOpen ? 'open' : 'closed', params: timingFunction ? {time: timingFunction} : {}}\" (@listAnim.done)=\"onAnimationEnd($event)\"\n style=\"overflow: hidden\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</div>",
animations: [
trigger('listAnim', [
state('open', style({ height: '*', opacity: 1 })),
state('closed', style({ height: '0', opacity: 0 })),
transition('closed => open', [
animate('{{time}}', keyframes([
style({ height: '0', opacity: 0, offset: 0 }),
style({ height: '*', opacity: 0.1, offset: 0.8 }),
style({ height: '*', opacity: 1, offset: 1 })
]))
], { params: { time: '270ms ease-out' } }),
transition('open => closed', [
animate('{{time}}', keyframes([
style({ height: '*', opacity: 1, offset: 0 }),
style({ height: '*', opacity: 0.1, offset: 0.2 }),
style({ height: '0', opacity: 0, offset: 1 })
]))
], { params: { time: '220ms ease-out' } })
])
],
styles: [""]
}] }
];
/** @nocollapse */
FivExpandable.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
FivExpandable.propDecorators = {
isOpen: [{ type: Input }],
timingFunction: [{ type: Input }],
fivWillOpen: [{ type: Output }],
fivDidOpen: [{ type: Output }],
fivWillClose: [{ type: Output }],
fivDidClose: [{ type: Output }]
};
if (false) {
/** @type {?} */
FivExpandable.prototype.isOpen;
/** @type {?} */
FivExpandable.prototype.timingFunction;
/** @type {?} */
FivExpandable.prototype.fivWillOpen;
/** @type {?} */
FivExpandable.prototype.fivDidOpen;
/** @type {?} */
FivExpandable.prototype.fivWillClose;
/** @type {?} */
FivExpandable.prototype.fivDidClose;
/** @type {?} */
FivExpandable.prototype.param;
/**
* @type {?}
* @private
*/
FivExpandable.prototype.change;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5kYWJsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AZml2ZXRocmVlL2NvcmUvIiwic291cmNlcyI6WyJsaWIvZXhwYW5kYWJsZS9leHBhbmRhYmxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBRVQsTUFBTSxFQUNOLFlBQVksRUFDWixLQUFLLEVBQ0wsaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDTCxPQUFPLEVBQ1AsS0FBSyxFQUNMLEtBQUssRUFDTCxVQUFVLEVBQ1YsT0FBTyxFQUNQLFNBQVMsRUFDVixNQUFNLHFCQUFxQixDQUFDO0FBeUM3QixNQUFNLE9BQU8sYUFBYTs7OztJQWF4QixZQUFvQixNQUF5QjtRQUF6QixXQUFNLEdBQU4sTUFBTSxDQUFtQjtRQVpwQyxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBRWQsZ0JBQVcsR0FBZ0MsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUM5RCxlQUFVLEdBQWdDLElBQUksWUFBWSxFQUFFLENBQUM7UUFDN0QsaUJBQVksR0FBZ0MsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMvRCxnQkFBVyxHQUdoQixJQUFJLFlBQVksRUFBRSxDQUFDO0lBSXdCLENBQUM7Ozs7SUFFakQsUUFBUSxLQUFJLENBQUM7Ozs7SUFFYixJQUFJO1FBQ0YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDNUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFDbkIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUM5QixDQUFDOzs7O0lBRUQsTUFBTTtRQUNKLElBQUksSUFBSSxDQUFDLE1BQU0sS0FBSyxLQUFLLEVBQUU7WUFDekIsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ2I7YUFBTTtZQUNMLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUNk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SUFDekUsb0NBR3dCOztJQUV4Qiw4QkFBVzs7Ozs7SUFFQywrQkFBaUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIE9uSW5pdCxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBDaGFuZ2VEZXRlY3RvclJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIHRyaWdnZXIsXG4gIHN0YXRlLFxuICBzdHlsZSxcbiAgdHJhbnNpdGlvbixcbiAgYW5pbWF0ZSxcbiAga2V5ZnJhbWVzXG59IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmaXYtZXhwYW5kYWJsZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9leHBhbmRhYmxlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZXhwYW5kYWJsZS5jb21wb25lbnQuc2NzcyddLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignbGlzdEFuaW0nLCBbXG4gICAgICBzdGF0ZSgnb3BlbicsIHN0eWxlKHsgaGVpZ2h0OiAnKicsIG9wYWNpdHk6IDEgfSkpLFxuICAgICAgc3RhdGUoJ2Nsb3NlZCcsIHN0eWxlKHsgaGVpZ2h0OiAnMCcsIG9wYWNpdHk6IDAgfSkpLFxuICAgICAgdHJhbnNpdGlvbihcbiAgICAgICAgJ2Nsb3NlZCA9PiBvcGVuJyxcbiAgICAgICAgW1xuICAgICAgICAgIGFuaW1hdGUoXG4gICAgICAgICAgICAne3t0aW1lfX0nLFxuICAgICAgICAgICAga2V5ZnJhbWVzKFtcbiAgICAgICAgICAgICAgc3R5bGUoeyBoZWlnaHQ6ICcwJywgb3BhY2l0eTogMCwgb2Zmc2V0OiAwIH0pLFxuICAgICAgICAgICAgICBzdHlsZSh7IGhlaWdodDogJyonLCBvcGFjaXR5OiAwLjEsIG9mZnNldDogMC44IH0pLFxuICAgICAgICAgICAgICBzdHlsZSh7IGhlaWdodDogJyonLCBvcGFjaXR5OiAxLCBvZmZzZXQ6IDEgfSlcbiAgICAgICAgICAgIF0pXG4gICAgICAgICAgKVxuICAgICAgICBdLFxuICAgICAgICB7IHBhcmFtczogeyB0aW1lOiAnMjcwbXMgZWFzZS1vdXQnIH0gfVxuICAgICAgKSxcbiAgICAgIHRyYW5zaXRpb24oXG4gICAgICAgICdvcGVuID0+IGNsb3NlZCcsXG4gICAgICAgIFtcbiAgICAgICAgICBhbmltYXRlKFxuICAgICAgICAgICAgJ3t7dGltZX19JyxcbiAgICAgICAgICAgIGtleWZyYW1lcyhbXG4gICAgICAgICAgICAgIHN0eWxlKHsgaGVpZ2h0OiAnKicsIG9wYWNpdHk6IDEsIG9mZnNldDogMCB9KSxcbiAgICAgICAgICAgICAgc3R5bGUoeyBoZWlnaHQ6ICcqJywgb3BhY2l0eTogMC4xLCBvZmZzZXQ6IDAuMiB9KSxcbiAgICAgICAgICAgICAgc3R5bGUoeyBoZWlnaHQ6ICcwJywgb3BhY2l0eTogMCwgb2Zmc2V0OiAxIH0pXG4gICAgICAgICAgICBdKVxuICAgICAgICAgIClcbiAgICAgICAgXSxcbiAgICAgICAgeyBwYXJhbXM6IHsgdGltZTogJzIyMG1zIGVhc2Utb3V0JyB9IH1cbiAgICAgIClcbiAgICBdKVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIEZpdkV4cGFuZGFibGUgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBpc09wZW4gPSBmYWxzZTtcbiAgQElucHV0KCkgdGltaW5nRnVuY3Rpb246IHN0cmluZztcbiAgQE91dHB1dCgpIGZpdldpbGxPcGVuOiBFdmVudEVtaXR0ZXI8Rml2RXhwYW5kYWJsZT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBmaXZEaWRPcGVuOiBFdmVudEVtaXR0ZXI8Rml2RXhwYW5kYWJsZT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBmaXZXaWxsQ2xvc2U6IEV2ZW50RW1pdHRlcjxGaXZFeHBhbmRhYmxlPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIGZpdkRpZENsb3NlOiBFdmVudEVtaXR0ZXI8e1xuICAgIGV4cGFuZGFibGU6IEZpdkV4cGFuZGFibGU7XG4gICAgcGFyYW06IGFueTtcbiAgfT4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgcGFyYW06IGFueTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGNoYW5nZTogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgbmdPbkluaXQoKSB7fVxuXG4gIG9wZW4oKSB7XG4gICAgdGhpcy5maXZXaWxsT3Blbi5lbWl0KHRoaXMpO1xuICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcbiAgICB0aGlzLmNoYW5nZS5kZXRlY3RDaGFuZ2VzKCk7XG4gIH1cblxuICB0b2dnbGUoKSB7XG4gICAgaWYgKHRoaXMuaXNPcGVuID09PSBmYWxzZSkge1xuICAgICAgdGhpcy5vcGVuKCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuY2xvc2UoKTtcbiAgICB9XG4gIH1cblxuICBjbG9zZShwYXJhbT86IGFueSkge1xuICAgIHRoaXMucGFyYW0gPSBwYXJhbTtcbiAgICB0aGlzLmZpdldpbGxDbG9zZS5lbWl0KHRoaXMpO1xuXG4gICAgdGhpcy5pc09wZW4gPSBmYWxzZTtcbiAgICB0aGlzLmNoYW5nZS5kZXRlY3RDaGFuZ2VzKCk7XG4gIH1cblxuICBvbkFuaW1hdGlvbkVuZChldmVudCkge1xuICAgIGlmIChldmVudC5mcm9tU3RhdGUgPT09ICdjbG9zZWQnKSB7XG4gICAgICB0aGlzLmZpdkRpZE9wZW4uZW1pdCh0aGlzKTtcbiAgICB9IGVsc2UgaWYgKGV2ZW50LmZyb21TdGF0ZSA9PT0gJ29wZW4nKSB7XG4gICAgICB0aGlzLmZpdkRpZENsb3NlLmVtaXQoeyBleHBhbmRhYmxlOiB0aGlzLCBwYXJhbTogdGhpcy5wYXJhbSB9KTtcbiAgICAgIHRoaXMucGFyYW0gPSBudWxsO1xuICAgIH1cbiAgfVxufVxuIl19