@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>
139 lines • 12.7 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 {?} */
var ESCAPE_KEY = 27;
/** @type {?} */
var POPOVER_ANIMATION_TIMINGS = '200ms cubic-bezier(0.64, 0, 0.35, 1)';
var PopoverContainer = /** @class */ (function () {
function PopoverContainer(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 {?}
*/
PopoverContainer.prototype.ngOnInit = /**
* @return {?}
*/
function () {
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 {?}
*/
PopoverContainer.prototype.closePopover = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.popoverRef.close($event);
};
/**
* @param {?} event
* @return {?}
*/
PopoverContainer.prototype.handleKeydown = /**
* @param {?} event
* @return {?}
*/
function (event) {
// tslint:disable-next-line: deprecation
if (event.keyCode === ESCAPE_KEY) {
this.popoverRef.close();
}
};
/**
* @param {?} event
* @return {?}
*/
PopoverContainer.prototype.onAnimationStart = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @param {?} event
* @return {?}
*/
PopoverContainer.prototype.onAnimationDone = /**
* @param {?} event
* @return {?}
*/
function (event) {
this.animationStateChanged.emit(event);
};
/**
* @return {?}
*/
PopoverContainer.prototype.startExitAnimation = /**
* @return {?}
*/
function () {
this.animationState = 'leave';
};
PopoverContainer.decorators = [
{ type: Component, args: [{
selector: 'suka-popover',
template: "\n <div\n [@popover]=\"animationState\"\n (@popover.start)=\"onAnimationStart($event)\"\n (@popover.done)=\"onAnimationDone($event)\"\n cdkTrapFocus\n class=\"popover popover-{{position}}\"\n role=\"dialog\"\n >\n <suka-popover-section\n *ngIf=\"(sectioned !== false)\n else elseTpl\"\n >\n <ng-container *ngTemplateOutlet=\"elseTpl\"></ng-container>\n </suka-popover-section>\n </div>\n\n <ng-template #elseTpl>\n <ng-container [ngSwitch]=\"renderMethod\">\n <div *ngSwitchCase=\"'text'\" [innerHTML]=\"content.body\"></div>\n <ng-container *ngSwitchCase=\"'template'\">\n <ng-container *ngTemplateOutlet=\"content.body; context: {closePopover: closePopover.bind(this)}\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'component'\">\n <ng-container *ngComponentOutlet=\"content.body\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-template>\n ",
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 = function () { return [
{ 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'],] }]
};
return PopoverContainer;
}());
export { PopoverContainer };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3BvcG92ZXIvcG9wb3Zlci1jb250YWluZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQVUsTUFBTSxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUcsT0FBTyxFQUFrQixPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFakcsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDeEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7SUFFckMsVUFBVSxHQUFHLEVBQUU7O0lBQ2YseUJBQXlCLEdBQUcsc0NBQXNDO0FBRXhFO0lBaURFLDBCQUNTLFVBQXNCLEVBQ1EsT0FBdUI7UUFEckQsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUNRLFlBQU8sR0FBUCxPQUFPLENBQWdCO1FBVnZELG1CQUFjLEdBQStCLE9BQU8sQ0FBQztRQUNyRCwwQkFBcUIsR0FBRyxJQUFJLFlBQVksRUFBa0IsQ0FBQztRQUUzRCxpQkFBWSxHQUFzQyxXQUFXLENBQUM7UUFFNUQsYUFBUSxHQUF3QyxRQUFRLENBQUM7UUFDekQsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUt4QixDQUFDOzs7O0lBRUosbUNBQVE7OztJQUFSO1FBQ0UsSUFBSSxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxLQUFLLFFBQVEsRUFBRTtZQUN6QyxJQUFJLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQztTQUM1QjtRQUVELElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLFlBQVksV0FBVyxFQUFFO1lBQzVDLElBQUksQ0FBQyxZQUFZLEdBQUcsVUFBVSxDQUFDO1NBQ2hDO1FBRUQsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztTQUN2QjtJQUNILENBQUM7Ozs7O0lBRUQsdUNBQVk7Ozs7SUFBWixVQUFhLE1BQVc7UUFDdEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDaEMsQ0FBQzs7Ozs7SUFFb0Qsd0NBQWE7Ozs7SUFBbEUsVUFBbUUsS0FBb0I7UUFDckYsd0NBQXdDO1FBQ3hDLElBQUksS0FBSyxDQUFDLE9BQU8sS0FBSyxVQUFVLEVBQUU7WUFDaEMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUN6QjtJQUNILENBQUM7Ozs7O0lBRUQsMkNBQWdCOzs7O0lBQWhCLFVBQWlCLEtBQXFCO1FBQ3BDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQzs7Ozs7SUFFRCwwQ0FBZTs7OztJQUFmLFVBQWdCLEtBQXFCO1FBQ25DLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQzs7OztJQUVELDZDQUFrQjs7O0lBQWxCO1FBQ0UsSUFBSSxDQUFDLGNBQWMsR0FBRyxPQUFPLENBQUM7SUFDaEMsQ0FBQzs7Z0JBekZGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsY0FBYztvQkFDeEIsUUFBUSxFQUFFLGtnQ0E0QlA7b0JBQ0gsVUFBVSxFQUFFO3dCQUNWLE9BQU8sQ0FBQyxTQUFTLEVBQUU7NEJBQ2pCLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzs0QkFDNUQsS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDOzRCQUN4RCxLQUFLLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7NEJBQzdELFVBQVUsQ0FBQyxRQUFRLEVBQUUsT0FBTyxDQUFDLHlCQUF5QixDQUFDLENBQUM7eUJBQ3pELENBQUM7cUJBQ0g7aUJBQ0Y7Ozs7Z0JBNUNRLFVBQVU7Z0RBd0RkLE1BQU0sU0FBQyxvQkFBb0I7OzsyQkFMN0IsS0FBSzs0QkFDTCxLQUFLO2dDQXlCTCxZQUFZLFNBQUMsa0JBQWtCLEVBQUUsQ0FBQyxRQUFRLENBQUM7O0lBa0I5Qyx1QkFBQztDQUFBLEFBMUZELElBMEZDO1NBbERZLGdCQUFnQjs7O0lBQzNCLDBDQUE0RDs7SUFDNUQsaURBQWtFOztJQUVsRSx3Q0FBcUU7O0lBRXJFLG9DQUFrRTs7SUFDbEUscUNBQTJCOztJQUd6QixzQ0FBNkI7O0lBQzdCLG1DQUE0RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFRlbXBsYXRlUmVmLCBPbkluaXQsIEluamVjdCwgSG9zdExpc3RlbmVyLCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFuaW1hdGlvbkV2ZW50LCBhbmltYXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciwgc3RhdGUgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IFBvcG92ZXJDb250ZW50IH0gZnJvbSAnLi9wb3BvdmVyLWNvbnRlbnQnO1xuaW1wb3J0IHsgUE9QT1ZFUl9DT05URU5UX0RBVEEgfSBmcm9tICcuL3BvcG92ZXIudG9rZW5zJztcbmltcG9ydCB7IFBvcG92ZXJSZWYgfSBmcm9tICcuL3BvcG92ZXItcmVmJztcblxuY29uc3QgRVNDQVBFX0tFWSA9IDI3O1xuY29uc3QgUE9QT1ZFUl9BTklNQVRJT05fVElNSU5HUyA9ICcyMDBtcyBjdWJpYy1iZXppZXIoMC42NCwgMCwgMC4zNSwgMSknO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLXBvcG92ZXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIFtAcG9wb3Zlcl09XCJhbmltYXRpb25TdGF0ZVwiXG4gICAgICAoQHBvcG92ZXIuc3RhcnQpPVwib25BbmltYXRpb25TdGFydCgkZXZlbnQpXCJcbiAgICAgIChAcG9wb3Zlci5kb25lKT1cIm9uQW5pbWF0aW9uRG9uZSgkZXZlbnQpXCJcbiAgICAgIGNka1RyYXBGb2N1c1xuICAgICAgY2xhc3M9XCJwb3BvdmVyIHBvcG92ZXIte3twb3NpdGlvbn19XCJcbiAgICAgIHJvbGU9XCJkaWFsb2dcIlxuICAgID5cbiAgICAgIDxzdWthLXBvcG92ZXItc2VjdGlvblxuICAgICAgICAqbmdJZj1cIihzZWN0aW9uZWQgIT09IGZhbHNlKVxuICAgICAgICBlbHNlIGVsc2VUcGxcIlxuICAgICAgPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiZWxzZVRwbFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPC9zdWthLXBvcG92ZXItc2VjdGlvbj5cbiAgICA8L2Rpdj5cblxuICAgIDxuZy10ZW1wbGF0ZSAjZWxzZVRwbD5cbiAgICAgIDxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cInJlbmRlck1ldGhvZFwiPlxuICAgICAgICA8ZGl2ICpuZ1N3aXRjaENhc2U9XCIndGV4dCdcIiBbaW5uZXJIVE1MXT1cImNvbnRlbnQuYm9keVwiPjwvZGl2PlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCIndGVtcGxhdGUnXCI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnQuYm9keTsgY29udGV4dDoge2Nsb3NlUG9wb3ZlcjogY2xvc2VQb3BvdmVyLmJpbmQodGhpcyl9XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInY29tcG9uZW50J1wiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nQ29tcG9uZW50T3V0bGV0PVwiY29udGVudC5ib2R5XCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgICBgLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcigncG9wb3ZlcicsIFtcbiAgICAgIHN0YXRlKCd2b2lkJywgc3R5bGUoeyB0cmFuc2Zvcm06ICdzY2FsZSguOSknLCBvcGFjaXR5OiAwIH0pKSxcbiAgICAgIHN0YXRlKCdlbnRlcicsIHN0eWxlKHsgdHJhbnNmb3JtOiAnbm9uZScsIG9wYWNpdHk6IDEgfSkpLFxuICAgICAgc3RhdGUoJ2xlYXZlJywgc3R5bGUoeyB0cmFuc2Zvcm06ICdzY2FsZSguOCknLCBvcGFjaXR5OiAwIH0pKSxcbiAgICAgIHRyYW5zaXRpb24oJyogPT4gKicsIGFuaW1hdGUoUE9QT1ZFUl9BTklNQVRJT05fVElNSU5HUykpLFxuICAgIF0pLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBQb3BvdmVyQ29udGFpbmVyIGltcGxlbWVudHMgT25Jbml0IHtcbiAgcHVibGljIGFuaW1hdGlvblN0YXRlOiAndm9pZCcgfCAnZW50ZXInIHwgJ2xlYXZlJyA9ICdlbnRlcic7XG4gIHB1YmxpYyBhbmltYXRpb25TdGF0ZUNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPEFuaW1hdGlvbkV2ZW50PigpO1xuXG4gIHB1YmxpYyByZW5kZXJNZXRob2Q6ICd0ZW1wbGF0ZScgfCAnY29tcG9uZW50JyB8ICd0ZXh0JyA9ICdjb21wb25lbnQnO1xuXG4gIEBJbnB1dCgpIHBvc2l0aW9uOiAndG9wJyB8ICdib3R0b20nIHwgJ3JpZ2h0JyB8ICdsZWZ0JyA9ICdib3R0b20nO1xuICBASW5wdXQoKSBzZWN0aW9uZWQgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwdWJsaWMgcG9wb3ZlclJlZjogUG9wb3ZlclJlZixcbiAgICBASW5qZWN0KFBPUE9WRVJfQ09OVEVOVF9EQVRBKSBwdWJsaWMgY29udGVudDogUG9wb3ZlckNvbnRlbnRcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICh0eXBlb2YgdGhpcy5jb250ZW50LmJvZHkgPT09ICdzdHJpbmcnKSB7XG4gICAgICB0aGlzLnJlbmRlck1ldGhvZCA9ICd0ZXh0JztcbiAgICB9XG5cbiAgICBpZiAodGhpcy5jb250ZW50LmJvZHkgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZikge1xuICAgICAgdGhpcy5yZW5kZXJNZXRob2QgPSAndGVtcGxhdGUnO1xuICAgIH1cblxuICAgIGlmICh0aGlzLmNvbnRlbnQuc2VjdGlvbmVkKSB7XG4gICAgICB0aGlzLnNlY3Rpb25lZCA9IHRydWU7XG4gICAgfVxuICB9XG5cbiAgY2xvc2VQb3BvdmVyKCRldmVudDogYW55KSB7XG4gICAgdGhpcy5wb3BvdmVyUmVmLmNsb3NlKCRldmVudCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDprZXlkb3duJywgWyckZXZlbnQnXSkgcHVibGljIGhhbmRsZUtleWRvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6IGRlcHJlY2F0aW9uXG4gICAgaWYgKGV2ZW50LmtleUNvZGUgPT09IEVTQ0FQRV9LRVkpIHtcbiAgICAgIHRoaXMucG9wb3ZlclJlZi5jbG9zZSgpO1xuICAgIH1cbiAgfVxuXG4gIG9uQW5pbWF0aW9uU3RhcnQoZXZlbnQ6IEFuaW1hdGlvbkV2ZW50KSB7XG4gICAgdGhpcy5hbmltYXRpb25TdGF0ZUNoYW5nZWQuZW1pdChldmVudCk7XG4gIH1cblxuICBvbkFuaW1hdGlvbkRvbmUoZXZlbnQ6IEFuaW1hdGlvbkV2ZW50KSB7XG4gICAgdGhpcy5hbmltYXRpb25TdGF0ZUNoYW5nZWQuZW1pdChldmVudCk7XG4gIH1cblxuICBzdGFydEV4aXRBbmltYXRpb24oKSB7XG4gICAgdGhpcy5hbmltYXRpb25TdGF0ZSA9ICdsZWF2ZSc7XG4gIH1cbn1cbiJdfQ==