@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
146 lines (145 loc) • 11.8 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, TemplateRef, Inject, HostListener, EventEmitter } from '@angular/core';
import { animate, style, transition, trigger, state } from '@angular/animations';
import { POPOVER_CONTENT_DATA } from './popover.tokens';
import { PopoverRef } from './popover-ref';
/** @type {?} */
const ESCAPE_KEY = 27;
/** @type {?} */
const POPOVER_ANIMATION_TIMINGS = '200ms cubic-bezier(0.64, 0, 0.35, 1)';
export class PopoverContainer {
/**
* @param {?} popoverRef
* @param {?} content
*/
constructor(popoverRef, content) {
this.popoverRef = popoverRef;
this.content = content;
this.animationState = 'enter';
this.animationStateChanged = new EventEmitter();
this.renderMethod = 'component';
this.position = 'bottom';
this.sectioned = false;
}
/**
* @return {?}
*/
ngOnInit() {
if (typeof this.content.body === 'string') {
this.renderMethod = 'text';
}
if (this.content.body instanceof TemplateRef) {
this.renderMethod = 'template';
}
if (this.content.sectioned) {
this.sectioned = true;
}
}
/**
* @param {?} $event
* @return {?}
*/
closePopover($event) {
this.popoverRef.close($event);
}
/**
* @param {?} event
* @return {?}
*/
handleKeydown(event) {
// tslint:disable-next-line: deprecation
if (event.keyCode === ESCAPE_KEY) {
this.popoverRef.close();
}
}
/**
* @param {?} event
* @return {?}
*/
onAnimationStart(event) {
this.animationStateChanged.emit(event);
}
/**
* @param {?} event
* @return {?}
*/
onAnimationDone(event) {
this.animationStateChanged.emit(event);
}
/**
* @return {?}
*/
startExitAnimation() {
this.animationState = 'leave';
}
}
PopoverContainer.decorators = [
{ type: Component, args: [{
selector: 'suka-popover',
template: `
<div
[@popover]="animationState"
(@popover.start)="onAnimationStart($event)"
(@popover.done)="onAnimationDone($event)"
cdkTrapFocus
class="popover popover-{{position}}"
>
<suka-popover-section
*ngIf="(sectioned !== false)
else elseTpl"
>
<ng-container *ngTemplateOutlet="elseTpl"></ng-container>
</suka-popover-section>
</div>
<ng-template #elseTpl>
<ng-container [ngSwitch]="renderMethod">
<div *ngSwitchCase="'text'" [innerHTML]="content.body"></div>
<ng-container *ngSwitchCase="'template'">
<ng-container *ngTemplateOutlet="content.body; context: {closePopover: closePopover.bind(this)}"></ng-container>
</ng-container>
<ng-container *ngSwitchCase="'component'">
<ng-container *ngComponentOutlet="content.body"></ng-container>
</ng-container>
</ng-container>
</ng-template>
`,
animations: [
trigger('popover', [
state('void', style({ transform: 'scale(.9)', opacity: 0 })),
state('enter', style({ transform: 'none', opacity: 1 })),
state('leave', style({ transform: 'scale(.8)', opacity: 0 })),
transition('* => *', animate(POPOVER_ANIMATION_TIMINGS)),
]),
]
}] }
];
/** @nocollapse */
PopoverContainer.ctorParameters = () => [
{ type: PopoverRef },
{ type: undefined, decorators: [{ type: Inject, args: [POPOVER_CONTENT_DATA,] }] }
];
PopoverContainer.propDecorators = {
position: [{ type: Input }],
sectioned: [{ type: Input }],
handleKeydown: [{ type: HostListener, args: ['document:keydown', ['$event'],] }]
};
if (false) {
/** @type {?} */
PopoverContainer.prototype.animationState;
/** @type {?} */
PopoverContainer.prototype.animationStateChanged;
/** @type {?} */
PopoverContainer.prototype.renderMethod;
/** @type {?} */
PopoverContainer.prototype.position;
/** @type {?} */
PopoverContainer.prototype.sectioned;
/** @type {?} */
PopoverContainer.prototype.popoverRef;
/** @type {?} */
PopoverContainer.prototype.content;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3BvcG92ZXIvcG9wb3Zlci1jb250YWluZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQVUsTUFBTSxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUcsT0FBTyxFQUFrQixPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFakcsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDeEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7TUFFckMsVUFBVSxHQUFHLEVBQUU7O01BQ2YseUJBQXlCLEdBQUcsc0NBQXNDO0FBeUN4RSxNQUFNLE9BQU8sZ0JBQWdCOzs7OztJQVMzQixZQUNTLFVBQXNCLEVBQ1EsT0FBdUI7UUFEckQsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUNRLFlBQU8sR0FBUCxPQUFPLENBQWdCO1FBVnZELG1CQUFjLEdBQStCLE9BQU8sQ0FBQztRQUNyRCwwQkFBcUIsR0FBRyxJQUFJLFlBQVksRUFBa0IsQ0FBQztRQUUzRCxpQkFBWSxHQUFzQyxXQUFXLENBQUM7UUFFNUQsYUFBUSxHQUF3QyxRQUFRLENBQUM7UUFDekQsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUt4QixDQUFDOzs7O0lBRUosUUFBUTtRQUNOLElBQUksT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksS0FBSyxRQUFRLEVBQUU7WUFDekMsSUFBSSxDQUFDLFlBQVksR0FBRyxNQUFNLENBQUM7U0FDNUI7UUFFRCxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxZQUFZLFdBQVcsRUFBRTtZQUM1QyxJQUFJLENBQUMsWUFBWSxHQUFHLFVBQVUsQ0FBQztTQUNoQztRQUVELElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7U0FDdkI7SUFDSCxDQUFDOzs7OztJQUVELFlBQVksQ0FBQyxNQUFXO1FBQ3RCLElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQ2hDLENBQUM7Ozs7O0lBRW9ELGFBQWEsQ0FBQyxLQUFvQjtRQUNyRix3Q0FBd0M7UUFDeEMsSUFBSSxLQUFLLENBQUMsT0FBTyxLQUFLLFVBQVUsRUFBRTtZQUNoQyxJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ3pCO0lBQ0gsQ0FBQzs7Ozs7SUFFRCxnQkFBZ0IsQ0FBQyxLQUFxQjtRQUNwQyxJQUFJLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pDLENBQUM7Ozs7O0lBRUQsZUFBZSxDQUFDLEtBQXFCO1FBQ25DLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQzs7OztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsY0FBYyxHQUFHLE9BQU8sQ0FBQztJQUNoQyxDQUFDOzs7WUF4RkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUN4QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQTJCUDtnQkFDSCxVQUFVLEVBQUU7b0JBQ1YsT0FBTyxDQUFDLFNBQVMsRUFBRTt3QkFDakIsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO3dCQUM1RCxLQUFLLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7d0JBQ3hELEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzt3QkFDN0QsVUFBVSxDQUFDLFFBQVEsRUFBRSxPQUFPLENBQUMseUJBQXlCLENBQUMsQ0FBQztxQkFDekQsQ0FBQztpQkFDSDthQUNGOzs7O1lBM0NRLFVBQVU7NENBdURkLE1BQU0sU0FBQyxvQkFBb0I7Ozt1QkFMN0IsS0FBSzt3QkFDTCxLQUFLOzRCQXlCTCxZQUFZLFNBQUMsa0JBQWtCLEVBQUUsQ0FBQyxRQUFRLENBQUM7Ozs7SUEvQjVDLDBDQUE0RDs7SUFDNUQsaURBQWtFOztJQUVsRSx3Q0FBcUU7O0lBRXJFLG9DQUFrRTs7SUFDbEUscUNBQTJCOztJQUd6QixzQ0FBNkI7O0lBQzdCLG1DQUE0RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFRlbXBsYXRlUmVmLCBPbkluaXQsIEluamVjdCwgSG9zdExpc3RlbmVyLCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFuaW1hdGlvbkV2ZW50LCBhbmltYXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciwgc3RhdGUgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IFBvcG92ZXJDb250ZW50IH0gZnJvbSAnLi9wb3BvdmVyLWNvbnRlbnQnO1xuaW1wb3J0IHsgUE9QT1ZFUl9DT05URU5UX0RBVEEgfSBmcm9tICcuL3BvcG92ZXIudG9rZW5zJztcbmltcG9ydCB7IFBvcG92ZXJSZWYgfSBmcm9tICcuL3BvcG92ZXItcmVmJztcblxuY29uc3QgRVNDQVBFX0tFWSA9IDI3O1xuY29uc3QgUE9QT1ZFUl9BTklNQVRJT05fVElNSU5HUyA9ICcyMDBtcyBjdWJpYy1iZXppZXIoMC42NCwgMCwgMC4zNSwgMSknO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLXBvcG92ZXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIFtAcG9wb3Zlcl09XCJhbmltYXRpb25TdGF0ZVwiXG4gICAgICAoQHBvcG92ZXIuc3RhcnQpPVwib25BbmltYXRpb25TdGFydCgkZXZlbnQpXCJcbiAgICAgIChAcG9wb3Zlci5kb25lKT1cIm9uQW5pbWF0aW9uRG9uZSgkZXZlbnQpXCJcbiAgICAgIGNka1RyYXBGb2N1c1xuICAgICAgY2xhc3M9XCJwb3BvdmVyIHBvcG92ZXIte3twb3NpdGlvbn19XCJcbiAgICA+XG4gICAgICA8c3VrYS1wb3BvdmVyLXNlY3Rpb25cbiAgICAgICAgKm5nSWY9XCIoc2VjdGlvbmVkICE9PSBmYWxzZSlcbiAgICAgICAgZWxzZSBlbHNlVHBsXCJcbiAgICAgID5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImVsc2VUcGxcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvc3VrYS1wb3BvdmVyLXNlY3Rpb24+XG4gICAgPC9kaXY+XG5cbiAgICA8bmctdGVtcGxhdGUgI2Vsc2VUcGw+XG4gICAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJyZW5kZXJNZXRob2RcIj5cbiAgICAgICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiJ3RleHQnXCIgW2lubmVySFRNTF09XCJjb250ZW50LmJvZHlcIj48L2Rpdj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ3RlbXBsYXRlJ1wiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50LmJvZHk7IGNvbnRleHQ6IHtjbG9zZVBvcG92ZXI6IGNsb3NlUG9wb3Zlci5iaW5kKHRoaXMpfVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ2NvbXBvbmVudCdcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0NvbXBvbmVudE91dGxldD1cImNvbnRlbnQuYm9keVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgYCxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ3BvcG92ZXInLCBbXG4gICAgICBzdGF0ZSgndm9pZCcsIHN0eWxlKHsgdHJhbnNmb3JtOiAnc2NhbGUoLjkpJywgb3BhY2l0eTogMCB9KSksXG4gICAgICBzdGF0ZSgnZW50ZXInLCBzdHlsZSh7IHRyYW5zZm9ybTogJ25vbmUnLCBvcGFjaXR5OiAxIH0pKSxcbiAgICAgIHN0YXRlKCdsZWF2ZScsIHN0eWxlKHsgdHJhbnNmb3JtOiAnc2NhbGUoLjgpJywgb3BhY2l0eTogMCB9KSksXG4gICAgICB0cmFuc2l0aW9uKCcqID0+IConLCBhbmltYXRlKFBPUE9WRVJfQU5JTUFUSU9OX1RJTUlOR1MpKSxcbiAgICBdKSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgUG9wb3ZlckNvbnRhaW5lciBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHB1YmxpYyBhbmltYXRpb25TdGF0ZTogJ3ZvaWQnIHwgJ2VudGVyJyB8ICdsZWF2ZScgPSAnZW50ZXInO1xuICBwdWJsaWMgYW5pbWF0aW9uU3RhdGVDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxBbmltYXRpb25FdmVudD4oKTtcblxuICBwdWJsaWMgcmVuZGVyTWV0aG9kOiAndGVtcGxhdGUnIHwgJ2NvbXBvbmVudCcgfCAndGV4dCcgPSAnY29tcG9uZW50JztcblxuICBASW5wdXQoKSBwb3NpdGlvbjogJ3RvcCcgfCAnYm90dG9tJyB8ICdyaWdodCcgfCAnbGVmdCcgPSAnYm90dG9tJztcbiAgQElucHV0KCkgc2VjdGlvbmVkID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIHBvcG92ZXJSZWY6IFBvcG92ZXJSZWYsXG4gICAgQEluamVjdChQT1BPVkVSX0NPTlRFTlRfREFUQSkgcHVibGljIGNvbnRlbnQ6IFBvcG92ZXJDb250ZW50XG4gICkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodHlwZW9mIHRoaXMuY29udGVudC5ib2R5ID09PSAnc3RyaW5nJykge1xuICAgICAgdGhpcy5yZW5kZXJNZXRob2QgPSAndGV4dCc7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuY29udGVudC5ib2R5IGluc3RhbmNlb2YgVGVtcGxhdGVSZWYpIHtcbiAgICAgIHRoaXMucmVuZGVyTWV0aG9kID0gJ3RlbXBsYXRlJztcbiAgICB9XG5cbiAgICBpZiAodGhpcy5jb250ZW50LnNlY3Rpb25lZCkge1xuICAgICAgdGhpcy5zZWN0aW9uZWQgPSB0cnVlO1xuICAgIH1cbiAgfVxuXG4gIGNsb3NlUG9wb3ZlcigkZXZlbnQ6IGFueSkge1xuICAgIHRoaXMucG9wb3ZlclJlZi5jbG9zZSgkZXZlbnQpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bicsIFsnJGV2ZW50J10pIHB1YmxpYyBoYW5kbGVLZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBkZXByZWNhdGlvblxuICAgIGlmIChldmVudC5rZXlDb2RlID09PSBFU0NBUEVfS0VZKSB7XG4gICAgICB0aGlzLnBvcG92ZXJSZWYuY2xvc2UoKTtcbiAgICB9XG4gIH1cblxuICBvbkFuaW1hdGlvblN0YXJ0KGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGVDaGFuZ2VkLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgb25BbmltYXRpb25Eb25lKGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGVDaGFuZ2VkLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgc3RhcnRFeGl0QW5pbWF0aW9uKCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGUgPSAnbGVhdmUnO1xuICB9XG59XG4iXX0=