@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>
155 lines • 10.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Inject, TemplateRef, EventEmitter, HostBinding } from '@angular/core';
import { ToastRef } from './toast-ref';
import { TOAST_CONFIG_DATA } from './toast.tokens';
import { toastAnimations } from './toast-animations';
export class ToastContainer {
/**
* @param {?} toastRef
* @param {?} toastConfig
*/
constructor(toastRef, toastConfig) {
this.toastRef = toastRef;
this.toastConfig = toastConfig;
this.animationState = 'default';
this.animationStateChanged = new EventEmitter();
this.showFooter = false;
this.baseClass = true;
}
/**
* @param {?} value
* @return {?}
*/
isTemplate(value) {
return value instanceof TemplateRef;
}
/**
* @return {?}
*/
ngOnInit() {
this.content = this.toastConfig.content;
this.intervalId = window.setTimeout((/**
* @return {?}
*/
() => this.startExitAnimation()), 5000);
}
/**
* @return {?}
*/
ngOnDestroy() {
clearTimeout(this.intervalId);
}
/**
* @return {?}
*/
close() {
this.toastRef.close();
}
/**
* @param {?} event
* @return {?}
*/
onAnimationStart(event) {
this.animationStateChanged.emit(event);
}
/**
* @param {?} event
* @return {?}
*/
onAnimationDone(event) {
this.animationStateChanged.emit(event);
}
/**
* @param {?} $event
* @return {?}
*/
closeToast($event) {
this.toastRef.close();
}
/**
* @param {?} event
* @return {?}
*/
onFadeFinished(event) {
const { toState } = event;
/** @type {?} */
const isFadeOut = ((/** @type {?} */ (toState))) === 'closing';
/** @type {?} */
const itFinished = this.animationState === 'closing';
if (isFadeOut && itFinished) {
this.close();
}
}
/**
* @return {?}
*/
startExitAnimation() {
this.animationState = 'closing';
}
}
ToastContainer.decorators = [
{ type: Component, args: [{
selector: 'suka-toast',
template: `
<div class="toast"
[@fadeAnimation]="{
value: animationState,
params: {
fadeIn: toastConfig.animation.fadeIn,
fadeOut: toastConfig.animation.fadeOut
}
}"
(@fadeAnimation.done)="onFadeFinished($event)"
[ngClass]="{
'toast--success': content.type === 'success',
'toast--alert': content.type === 'alert',
'toast--attention': content.type === 'attention'
}"
>
<suka-icon icon="check" *ngIf="content.type === 'success'" class="toast__icon--success"></suka-icon>
<suka-icon icon="alert-circle" *ngIf="content.type === 'alert'" class="toast__icon--alert"></suka-icon>
<suka-icon icon="alert-triangle" *ngIf="content.type === 'attention'" class="toast__icon--attention"></suka-icon>
<div>{{ content.body }}</div>
<suka-icon icon="x" (click)="close()" class="toast__close">close</suka-icon>
</div>
`,
animations: [toastAnimations.fadeToast]
}] }
];
/** @nocollapse */
ToastContainer.ctorParameters = () => [
{ type: ToastRef },
{ type: undefined, decorators: [{ type: Inject, args: [TOAST_CONFIG_DATA,] }] }
];
ToastContainer.propDecorators = {
baseClass: [{ type: HostBinding, args: ['class.toast--default',] }]
};
if (false) {
/**
* @type {?}
* @private
*/
ToastContainer.prototype.intervalId;
/** @type {?} */
ToastContainer.prototype.animationState;
/** @type {?} */
ToastContainer.prototype.animationStateChanged;
/** @type {?} */
ToastContainer.prototype.showFooter;
/** @type {?} */
ToastContainer.prototype.primaryActions;
/** @type {?} */
ToastContainer.prototype.secondaryActions;
/** @type {?} */
ToastContainer.prototype.content;
/** @type {?} */
ToastContainer.prototype.baseClass;
/** @type {?} */
ToastContainer.prototype.toastRef;
/** @type {?} */
ToastContainer.prototype.toastConfig;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QtY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi90b2FzdC90b2FzdC1jb250YWluZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxXQUFXLEVBQWdCLFlBQVksRUFBVSxXQUFXLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFFM0gsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUN2QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRCxPQUFPLEVBQUUsZUFBZSxFQUF1QixNQUFNLG9CQUFvQixDQUFDO0FBOEIxRSxNQUFNLE9BQU8sY0FBYzs7Ozs7SUFZekIsWUFDUyxRQUFrQixFQUNTLFdBQWdCO1FBRDNDLGFBQVEsR0FBUixRQUFRLENBQVU7UUFDUyxnQkFBVyxHQUFYLFdBQVcsQ0FBSztRQVg3QyxtQkFBYyxHQUF3QixTQUFTLENBQUM7UUFDaEQsMEJBQXFCLEdBQUcsSUFBSSxZQUFZLEVBQWtCLENBQUM7UUFDbEUsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUtrQixjQUFTLEdBQUcsSUFBSSxDQUFDO0lBS2xELENBQUM7Ozs7O0lBRUUsVUFBVSxDQUFDLEtBQUs7UUFDckIsT0FBTyxLQUFLLFlBQVksV0FBVyxDQUFDO0lBQ3RDLENBQUM7Ozs7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQztRQUN4QyxJQUFJLENBQUMsVUFBVSxHQUFHLE1BQU0sQ0FBQyxVQUFVOzs7UUFBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsR0FBRSxJQUFJLENBQUMsQ0FBQztJQUM3RSxDQUFDOzs7O0lBRUQsV0FBVztRQUNULFlBQVksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDaEMsQ0FBQzs7OztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3hCLENBQUM7Ozs7O0lBRUQsZ0JBQWdCLENBQUMsS0FBcUI7UUFDcEMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN6QyxDQUFDOzs7OztJQUVELGVBQWUsQ0FBQyxLQUFxQjtRQUNuQyxJQUFJLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pDLENBQUM7Ozs7O0lBRUQsVUFBVSxDQUFDLE1BQVc7UUFDcEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN4QixDQUFDOzs7OztJQUVELGNBQWMsQ0FBQyxLQUFxQjtjQUM1QixFQUFFLE9BQU8sRUFBRSxHQUFHLEtBQUs7O2NBQ25CLFNBQVMsR0FBRyxDQUFDLG1CQUFBLE9BQU8sRUFBdUIsQ0FBQyxLQUFLLFNBQVM7O2NBQzFELFVBQVUsR0FBRyxJQUFJLENBQUMsY0FBYyxLQUFLLFNBQVM7UUFFcEQsSUFBSSxTQUFTLElBQUksVUFBVSxFQUFFO1lBQzNCLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUNkO0lBQ0gsQ0FBQzs7OztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsY0FBYyxHQUFHLFNBQVMsQ0FBQztJQUNsQyxDQUFDOzs7WUFyRkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxZQUFZO2dCQUN0QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQlQ7Z0JBQ0QsVUFBVSxFQUFFLENBQUMsZUFBZSxDQUFDLFNBQVMsQ0FBQzthQUN4Qzs7OztZQWhDUSxRQUFROzRDQStDWixNQUFNLFNBQUMsaUJBQWlCOzs7d0JBSjFCLFdBQVcsU0FBQyxzQkFBc0I7Ozs7Ozs7SUFUbkMsb0NBQTJCOztJQUUzQix3Q0FBdUQ7O0lBQ3ZELCtDQUFrRTs7SUFDbEUsb0NBQW1COztJQUNuQix3Q0FBbUI7O0lBQ25CLDBDQUFxQjs7SUFDckIsaUNBQXNCOztJQUV0QixtQ0FBc0Q7O0lBR3BELGtDQUF5Qjs7SUFDekIscUNBQWtEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbmplY3QsIFRlbXBsYXRlUmVmLCBIb3N0TGlzdGVuZXIsIEV2ZW50RW1pdHRlciwgT25Jbml0LCBIb3N0QmluZGluZywgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFRvYXN0UmVmIH0gZnJvbSAnLi90b2FzdC1yZWYnO1xuaW1wb3J0IHsgVE9BU1RfQ09ORklHX0RBVEEgfSBmcm9tICcuL3RvYXN0LnRva2Vucyc7XG5pbXBvcnQgeyBBbmltYXRpb25FdmVudCB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHsgdG9hc3RBbmltYXRpb25zLCBUb2FzdEFuaW1hdGlvblN0YXRlIH0gZnJvbSAnLi90b2FzdC1hbmltYXRpb25zJztcbmltcG9ydCB7IFRvYXN0Q29udGVudCwgVG9hc3RDb25maWcgfSBmcm9tICcuL3RvYXN0LnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLXRvYXN0JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwidG9hc3RcIlxuICAgICAgW0BmYWRlQW5pbWF0aW9uXT1cIntcbiAgICAgICAgdmFsdWU6IGFuaW1hdGlvblN0YXRlLFxuICAgICAgICBwYXJhbXM6IHtcbiAgICAgICAgICBmYWRlSW46IHRvYXN0Q29uZmlnLmFuaW1hdGlvbi5mYWRlSW4sXG4gICAgICAgICAgZmFkZU91dDogdG9hc3RDb25maWcuYW5pbWF0aW9uLmZhZGVPdXRcbiAgICAgICAgfVxuICAgICAgfVwiXG4gICAgICAoQGZhZGVBbmltYXRpb24uZG9uZSk9XCJvbkZhZGVGaW5pc2hlZCgkZXZlbnQpXCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ3RvYXN0LS1zdWNjZXNzJzogY29udGVudC50eXBlID09PSAnc3VjY2VzcycsXG4gICAgICAgICd0b2FzdC0tYWxlcnQnOiBjb250ZW50LnR5cGUgPT09ICdhbGVydCcsXG4gICAgICAgICd0b2FzdC0tYXR0ZW50aW9uJzogY29udGVudC50eXBlID09PSAnYXR0ZW50aW9uJ1xuICAgICAgfVwiXG4gICAgPlxuICAgICAgPHN1a2EtaWNvbiBpY29uPVwiY2hlY2tcIiAqbmdJZj1cImNvbnRlbnQudHlwZSA9PT0gJ3N1Y2Nlc3MnXCIgY2xhc3M9XCJ0b2FzdF9faWNvbi0tc3VjY2Vzc1wiPjwvc3VrYS1pY29uPlxuICAgICAgPHN1a2EtaWNvbiBpY29uPVwiYWxlcnQtY2lyY2xlXCIgKm5nSWY9XCJjb250ZW50LnR5cGUgPT09ICdhbGVydCdcIiBjbGFzcz1cInRvYXN0X19pY29uLS1hbGVydFwiPjwvc3VrYS1pY29uPlxuICAgICAgPHN1a2EtaWNvbiBpY29uPVwiYWxlcnQtdHJpYW5nbGVcIiAqbmdJZj1cImNvbnRlbnQudHlwZSA9PT0gJ2F0dGVudGlvbidcIiBjbGFzcz1cInRvYXN0X19pY29uLS1hdHRlbnRpb25cIj48L3N1a2EtaWNvbj5cbiAgICAgIDxkaXY+e3sgY29udGVudC5ib2R5IH19PC9kaXY+XG4gICAgICA8c3VrYS1pY29uIGljb249XCJ4XCIgKGNsaWNrKT1cImNsb3NlKClcIiBjbGFzcz1cInRvYXN0X19jbG9zZVwiPmNsb3NlPC9zdWthLWljb24+XG4gICAgPC9kaXY+XG4gIGAsXG4gIGFuaW1hdGlvbnM6IFt0b2FzdEFuaW1hdGlvbnMuZmFkZVRvYXN0XSxcbn0pXG5leHBvcnQgY2xhc3MgVG9hc3RDb250YWluZXIgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIHByaXZhdGUgaW50ZXJ2YWxJZDogbnVtYmVyO1xuXG4gIHB1YmxpYyBhbmltYXRpb25TdGF0ZTogVG9hc3RBbmltYXRpb25TdGF0ZSA9ICdkZWZhdWx0JztcbiAgcHVibGljIGFuaW1hdGlvblN0YXRlQ2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8QW5pbWF0aW9uRXZlbnQ+KCk7XG4gIHNob3dGb290ZXIgPSBmYWxzZTtcbiAgcHJpbWFyeUFjdGlvbnM6IFtdO1xuICBzZWNvbmRhcnlBY3Rpb25zOiBbXTtcbiAgY29udGVudDogVG9hc3RDb250ZW50O1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MudG9hc3QtLWRlZmF1bHQnKSBiYXNlQ2xhc3MgPSB0cnVlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyB0b2FzdFJlZjogVG9hc3RSZWYsXG4gICAgQEluamVjdChUT0FTVF9DT05GSUdfREFUQSkgcHVibGljIHRvYXN0Q29uZmlnOiBhbnlcbiAgKSB7IH1cblxuICBwdWJsaWMgaXNUZW1wbGF0ZSh2YWx1ZSkge1xuICAgIHJldHVybiB2YWx1ZSBpbnN0YW5jZW9mIFRlbXBsYXRlUmVmO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5jb250ZW50ID0gdGhpcy50b2FzdENvbmZpZy5jb250ZW50O1xuICAgIHRoaXMuaW50ZXJ2YWxJZCA9IHdpbmRvdy5zZXRUaW1lb3V0KCgpID0+IHRoaXMuc3RhcnRFeGl0QW5pbWF0aW9uKCksIDUwMDApO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgY2xlYXJUaW1lb3V0KHRoaXMuaW50ZXJ2YWxJZCk7XG4gIH1cblxuICBjbG9zZSgpIHtcbiAgICB0aGlzLnRvYXN0UmVmLmNsb3NlKCk7XG4gIH1cblxuICBvbkFuaW1hdGlvblN0YXJ0KGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGVDaGFuZ2VkLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgb25BbmltYXRpb25Eb25lKGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGVDaGFuZ2VkLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgY2xvc2VUb2FzdCgkZXZlbnQ6IGFueSkge1xuICAgIHRoaXMudG9hc3RSZWYuY2xvc2UoKTtcbiAgfVxuXG4gIG9uRmFkZUZpbmlzaGVkKGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIGNvbnN0IHsgdG9TdGF0ZSB9ID0gZXZlbnQ7XG4gICAgY29uc3QgaXNGYWRlT3V0ID0gKHRvU3RhdGUgYXMgVG9hc3RBbmltYXRpb25TdGF0ZSkgPT09ICdjbG9zaW5nJztcbiAgICBjb25zdCBpdEZpbmlzaGVkID0gdGhpcy5hbmltYXRpb25TdGF0ZSA9PT0gJ2Nsb3NpbmcnO1xuXG4gICAgaWYgKGlzRmFkZU91dCAmJiBpdEZpbmlzaGVkKSB7XG4gICAgICB0aGlzLmNsb3NlKCk7XG4gICAgfVxuICB9XG5cbiAgc3RhcnRFeGl0QW5pbWF0aW9uKCkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGUgPSAnY2xvc2luZyc7XG4gIH1cbn1cbiJdfQ==