@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.6 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 >\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9wb3Zlci1jb250YWluZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3BvcG92ZXIvcG9wb3Zlci1jb250YWluZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQVUsTUFBTSxFQUFFLFlBQVksRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUcsT0FBTyxFQUFrQixPQUFPLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFakcsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDeEQsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7SUFFckMsVUFBVSxHQUFHLEVBQUU7O0lBQ2YseUJBQXlCLEdBQUcsc0NBQXNDO0FBRXhFO0lBZ0RFLDBCQUNTLFVBQXNCLEVBQ1EsT0FBdUI7UUFEckQsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUNRLFlBQU8sR0FBUCxPQUFPLENBQWdCO1FBVnZELG1CQUFjLEdBQStCLE9BQU8sQ0FBQztRQUNyRCwwQkFBcUIsR0FBRyxJQUFJLFlBQVksRUFBa0IsQ0FBQztRQUUzRCxpQkFBWSxHQUFzQyxXQUFXLENBQUM7UUFFNUQsYUFBUSxHQUF3QyxRQUFRLENBQUM7UUFDekQsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUt4QixDQUFDOzs7O0lBRUosbUNBQVE7OztJQUFSO1FBQ0UsSUFBSSxPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxLQUFLLFFBQVEsRUFBRTtZQUN6QyxJQUFJLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQztTQUM1QjtRQUVELElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLFlBQVksV0FBVyxFQUFFO1lBQzVDLElBQUksQ0FBQyxZQUFZLEdBQUcsVUFBVSxDQUFDO1NBQ2hDO1FBRUQsSUFBSSxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztTQUN2QjtJQUNILENBQUM7Ozs7O0lBRUQsdUNBQVk7Ozs7SUFBWixVQUFhLE1BQVc7UUFDdEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDaEMsQ0FBQzs7Ozs7SUFFb0Qsd0NBQWE7Ozs7SUFBbEUsVUFBbUUsS0FBb0I7UUFDckYsd0NBQXdDO1FBQ3hDLElBQUksS0FBSyxDQUFDLE9BQU8sS0FBSyxVQUFVLEVBQUU7WUFDaEMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUN6QjtJQUNILENBQUM7Ozs7O0lBRUQsMkNBQWdCOzs7O0lBQWhCLFVBQWlCLEtBQXFCO1FBQ3BDLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQzs7Ozs7SUFFRCwwQ0FBZTs7OztJQUFmLFVBQWdCLEtBQXFCO1FBQ25DLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQzs7OztJQUVELDZDQUFrQjs7O0lBQWxCO1FBQ0UsSUFBSSxDQUFDLGNBQWMsR0FBRyxPQUFPLENBQUM7SUFDaEMsQ0FBQzs7Z0JBeEZGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsY0FBYztvQkFDeEIsUUFBUSxFQUFFLDIrQkEyQlA7b0JBQ0gsVUFBVSxFQUFFO3dCQUNWLE9BQU8sQ0FBQyxTQUFTLEVBQUU7NEJBQ2pCLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzs0QkFDNUQsS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDOzRCQUN4RCxLQUFLLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7NEJBQzdELFVBQVUsQ0FBQyxRQUFRLEVBQUUsT0FBTyxDQUFDLHlCQUF5QixDQUFDLENBQUM7eUJBQ3pELENBQUM7cUJBQ0g7aUJBQ0Y7Ozs7Z0JBM0NRLFVBQVU7Z0RBdURkLE1BQU0sU0FBQyxvQkFBb0I7OzsyQkFMN0IsS0FBSzs0QkFDTCxLQUFLO2dDQXlCTCxZQUFZLFNBQUMsa0JBQWtCLEVBQUUsQ0FBQyxRQUFRLENBQUM7O0lBa0I5Qyx1QkFBQztDQUFBLEFBekZELElBeUZDO1NBbERZLGdCQUFnQjs7O0lBQzNCLDBDQUE0RDs7SUFDNUQsaURBQWtFOztJQUVsRSx3Q0FBcUU7O0lBRXJFLG9DQUFrRTs7SUFDbEUscUNBQTJCOztJQUd6QixzQ0FBNkI7O0lBQzdCLG1DQUE0RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFRlbXBsYXRlUmVmLCBPbkluaXQsIEluamVjdCwgSG9zdExpc3RlbmVyLCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFuaW1hdGlvbkV2ZW50LCBhbmltYXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciwgc3RhdGUgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IFBvcG92ZXJDb250ZW50IH0gZnJvbSAnLi9wb3BvdmVyLWNvbnRlbnQnO1xuaW1wb3J0IHsgUE9QT1ZFUl9DT05URU5UX0RBVEEgfSBmcm9tICcuL3BvcG92ZXIudG9rZW5zJztcbmltcG9ydCB7IFBvcG92ZXJSZWYgfSBmcm9tICcuL3BvcG92ZXItcmVmJztcblxuY29uc3QgRVNDQVBFX0tFWSA9IDI3O1xuY29uc3QgUE9QT1ZFUl9BTklNQVRJT05fVElNSU5HUyA9ICcyMDBtcyBjdWJpYy1iZXppZXIoMC42NCwgMCwgMC4zNSwgMSknO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLXBvcG92ZXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIFtAcG9wb3Zlcl09XCJhbmltYXRpb25TdGF0ZVwiXG4gICAgICAoQHBvcG92ZXIuc3RhcnQpPVwib25BbmltYXRpb25TdGFydCgkZXZlbnQpXCJcbiAgICAgIChAcG9wb3Zlci5kb25lKT1cIm9uQW5pbWF0aW9uRG9uZSgkZXZlbnQpXCJcbiAgICAgIGNka1RyYXBGb2N1c1xuICAgICAgY2xhc3M9XCJwb3BvdmVyIHBvcG92ZXIte3twb3NpdGlvbn19XCJcbiAgICA+XG4gICAgICA8c3VrYS1wb3BvdmVyLXNlY3Rpb25cbiAgICAgICAgKm5nSWY9XCIoc2VjdGlvbmVkICE9PSBmYWxzZSlcbiAgICAgICAgZWxzZSBlbHNlVHBsXCJcbiAgICAgID5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImVsc2VUcGxcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvc3VrYS1wb3BvdmVyLXNlY3Rpb24+XG4gICAgPC9kaXY+XG5cbiAgICA8bmctdGVtcGxhdGUgI2Vsc2VUcGw+XG4gICAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJyZW5kZXJNZXRob2RcIj5cbiAgICAgICAgPGRpdiAqbmdTd2l0Y2hDYXNlPVwiJ3RleHQnXCIgW2lubmVySFRNTF09XCJjb250ZW50LmJvZHlcIj48L2Rpdj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ3RlbXBsYXRlJ1wiPlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJjb250ZW50LmJvZHk7IGNvbnRleHQ6IHtjbG9zZVBvcG92ZXI6IGNsb3NlUG9wb3Zlci5iaW5kKHRoaXMpfVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ2NvbXBvbmVudCdcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0NvbXBvbmVudE91dGxldD1cImNvbnRlbnQuYm9keVwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgYCxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ3BvcG92ZXInLCBbXG4gICAgICBzdGF0ZSgndm9pZCcsIHN0eWxlKHsgdHJhbnNmb3JtOiAnc2NhbGUoLjkpJywgb3BhY2l0eTogMCB9KSksXG4gICAgICBzdGF0ZSgnZW50ZXInLCBzdHlsZSh7IHRyYW5zZm9ybTogJ25vbmUnLCBvcGFjaXR5OiAxIH0pKSxcbiAgICAgIHN0YXRlKCdsZWF2ZScsIHN0eWxlKHsgdHJhbnNmb3JtOiAnc2NhbGUoLjgpJywgb3BhY2l0eTogMCB9KSksXG4gICAgICB0cmFuc2l0aW9uKCcqID0+IConLCBhbmltYXRlKFBPUE9WRVJfQU5JTUFUSU9OX1RJTUlOR1MpKSxcbiAgICBdKSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgUG9wb3ZlckNvbnRhaW5lciBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHB1YmxpYyBhbmltYXRpb25TdGF0ZTogJ3ZvaWQnIHwgJ2VudGVyJyB8ICdsZWF2ZScgPSAnZW50ZXInO1xuICBwdWJsaWMgYW5pbWF0aW9uU3RhdGVDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxBbmltYXRpb25FdmVudD4oKTtcblxuICBwdWJsaWMgcmVuZGVyTWV0aG9kOiAndGVtcGxhdGUnIHwgJ2NvbXBvbmVudCcgfCAndGV4dCcgPSAnY29tcG9uZW50JztcblxuICBASW5wdXQoKSBwb3NpdGlvbjogJ3RvcCcgfCAnYm90dG9tJyB8ICdyaWdodCcgfCAnbGVmdCcgPSAnYm90dG9tJztcbiAgQElucHV0KCkgc2VjdGlvbmVkID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIHBvcG92ZXJSZWY6IFBvcG92ZXJSZWYsXG4gICAgQEluamVjdChQT1BPVkVSX0NPTlRFTlRfREFUQSkgcHVibGljIGNvbnRlbnQ6IFBvcG92ZXJDb250ZW50XG4gICkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodHlwZW9mIHRoaXMuY29udGVudC5ib2R5ID09PSAnc3RyaW5nJykge1xuICAgICAgdGhpcy5yZW5kZXJNZXRob2QgPSAndGV4dCc7XG4gICAgfVxuXG4gICAgaWYgKHRoaXMuY29udGVudC5ib2R5IGluc3RhbmNlb2YgVGVtcGxhdGVSZWYpIHtcbiAgICAgIHRoaXMucmVuZGVyTWV0aG9kID0gJ3RlbXBsYXRlJztcbiAgICB9XG5cbiAgICBpZiAodGhpcy5jb250ZW50LnNlY3Rpb25lZCkge1xuICAgICAgdGhpcy5zZWN0aW9uZWQgPSB0cnVlO1xuICAgIH1cbiAgfVxuXG4gIGNsb3NlUG9wb3ZlcigkZXZlbnQ6IGFueSkge1xuICAgIHRoaXMucG9wb3ZlclJlZi5jbG9zZSgkZXZlbnQpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bicsIFsnJGV2ZW50J10pIHB1YmxpYyBoYW5kbGVLZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOiBkZXByZWNhdGlvblxuICAgIGlmIChldmVudC5rZXlDb2RlID09PSBFU0NBUEVfS0VZKSB7XG4gICAgICB0aGlzLnBvcG92ZXJSZWYuY2xvc2UoKTtcbiAgICB9XG4gIH1cblxuICBvbkFuaW1hdGlvblN0YXJ0KGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGVDaGFuZ2VkLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgb25BbmltYXRpb25Eb25lKGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGVDaGFuZ2VkLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgc3RhcnRFeGl0QW5pbWF0aW9uKCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGUgPSAnbGVhdmUnO1xuICB9XG59XG4iXX0=