@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>
119 lines • 10.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Input, Component, Output, EventEmitter } from '@angular/core';
import { trigger, style, state, transition, animate } from '@angular/animations';
var Banner = /** @class */ (function () {
function Banner() {
this.hide = false;
this.animationState = 'default';
this.status = 'default';
this.dismissable = true;
this.actionLabel = '';
this.action = new EventEmitter();
this.dismiss = new EventEmitter();
}
/**
* @return {?}
*/
Banner.prototype.ngOnInit = /**
* @return {?}
*/
function () {
switch (this.status) {
case 'info':
this.statusIcon = 'info';
break;
case 'success':
this.statusIcon = 'check';
break;
case 'attention':
this.statusIcon = 'alert-triangle';
break;
case 'alert':
this.statusIcon = 'alert-circle';
break;
}
};
/**
* @return {?}
*/
Banner.prototype.onAction = /**
* @return {?}
*/
function () {
this.action.emit();
};
/**
* @param {?=} event
* @return {?}
*/
Banner.prototype.onClose = /**
* @param {?=} event
* @return {?}
*/
function (event) {
this.animationState = 'closing';
this.dismiss.emit();
};
/**
* @param {?} event
* @return {?}
*/
Banner.prototype.onFadeFinished = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var itFinished = this.animationState === 'closing';
if (itFinished) {
this.hide = true;
}
};
Banner.decorators = [
{ type: Component, args: [{
selector: 'suka-banner',
template: "\n <div\n [@fadeAnimation]=\"{\n value: animationState,\n params: {\n fadeIn: 200,\n fadeOut: 200\n }\n }\"\n (@fadeAnimation.done)=\"onFadeFinished($event)\"\n class=\"banner banner--{{status}}\"\n [ngClass]=\"{\n 'banner--hidden': hide\n }\"\n >\n <button\n *ngIf=\"dismissable\"\n sukaButton=\"plain\"\n (click)=\"onClose($event)\"\n class=\"banner__close-button\"\n >\n <suka-icon icon=\"x\"></suka-icon>\n </button>\n\n <div class=\"banner__status-icon\" *ngIf=\"status !== 'default'\">\n <div class=\"banner__status-icon__wrapper\">\n <suka-icon [icon]=\"statusIcon\"></suka-icon>\n </div>\n </div>\n\n <div class=\"banner__content\">\n <h5>{{title}}</h5>\n <div class=\"banner__description\">\n <ng-content></ng-content>\n </div>\n <button *ngIf=\"actionLabel\" sukaButton outline=\"true\" (click)=\"onAction()\">{{actionLabel}}</button>\n </div>\n </div>\n ",
animations: [
trigger('fadeAnimation', [
state('default', style({ opacity: 1, transform: '*' })),
transition('void => *', [style({ opacity: 0, transform: 'scale(.9)' }), animate('150ms cubic-bezier(.17,.67,.78,1.21)')]),
transition('default => closing', animate('150ms', style({ opacity: 0, transform: 'scale(.9)' }))),
]),
]
}] }
];
Banner.propDecorators = {
title: [{ type: Input }],
status: [{ type: Input }],
dismissable: [{ type: Input }],
actionLabel: [{ type: Input }],
action: [{ type: Output }],
dismiss: [{ type: Output }]
};
return Banner;
}());
export { Banner };
if (false) {
/** @type {?} */
Banner.prototype.statusIcon;
/** @type {?} */
Banner.prototype.hide;
/** @type {?} */
Banner.prototype.animationState;
/** @type {?} */
Banner.prototype.title;
/** @type {?} */
Banner.prototype.status;
/** @type {?} */
Banner.prototype.dismissable;
/** @type {?} */
Banner.prototype.actionLabel;
/** @type {?} */
Banner.prototype.action;
/** @type {?} */
Banner.prototype.dismiss;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9iYW5uZXIvYmFubmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQWUsTUFBTSxFQUFFLFlBQVksRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUU1RixPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBRWpGO0lBQUE7UUFzREUsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUVOLG1CQUFjLEdBQTBCLFNBQVMsQ0FBQztRQUdoRCxXQUFNLEdBQTJELFNBQVMsQ0FBQztRQUMzRSxnQkFBVyxHQUFHLElBQUksQ0FBQztRQUNuQixnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQUVoQixXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUM1QixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQW1DekMsQ0FBQzs7OztJQWpDQyx5QkFBUTs7O0lBQVI7UUFDRSxRQUFRLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDbkIsS0FBSyxNQUFNO2dCQUNULElBQUksQ0FBQyxVQUFVLEdBQUcsTUFBTSxDQUFDO2dCQUN6QixNQUFNO1lBQ1IsS0FBSyxTQUFTO2dCQUNaLElBQUksQ0FBQyxVQUFVLEdBQUcsT0FBTyxDQUFDO2dCQUMxQixNQUFNO1lBQ1IsS0FBSyxXQUFXO2dCQUNkLElBQUksQ0FBQyxVQUFVLEdBQUcsZ0JBQWdCLENBQUM7Z0JBQ25DLE1BQU07WUFDUixLQUFLLE9BQU87Z0JBQ1YsSUFBSSxDQUFDLFVBQVUsR0FBRyxjQUFjLENBQUM7Z0JBQ2pDLE1BQU07U0FDVDtJQUNILENBQUM7Ozs7SUFFRCx5QkFBUTs7O0lBQVI7UUFDRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3JCLENBQUM7Ozs7O0lBRUQsd0JBQU87Ozs7SUFBUCxVQUFRLEtBQVc7UUFDakIsSUFBSSxDQUFDLGNBQWMsR0FBRyxTQUFTLENBQUM7UUFDaEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN0QixDQUFDOzs7OztJQUVELCtCQUFjOzs7O0lBQWQsVUFBZSxLQUFxQjs7WUFDNUIsVUFBVSxHQUFHLElBQUksQ0FBQyxjQUFjLEtBQUssU0FBUztRQUVwRCxJQUFJLFVBQVUsRUFBRTtZQUNkLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1NBQ2xCO0lBQ0gsQ0FBQzs7Z0JBbEdGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsUUFBUSxFQUFFLDJqQ0FzQ1Q7b0JBQ0QsVUFBVSxFQUFFO3dCQUNWLE9BQU8sQ0FBQyxlQUFlLEVBQUU7NEJBQ3ZCLEtBQUssQ0FBQyxTQUFTLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQzs0QkFDdkQsVUFBVSxDQUFDLFdBQVcsRUFBRSxDQUFDLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxDQUFDLEVBQUUsT0FBTyxDQUFDLHNDQUFzQyxDQUFDLENBQUMsQ0FBQzs0QkFDekgsVUFBVSxDQUNSLG9CQUFvQixFQUNwQixPQUFPLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxDQUFDLENBQUMsQ0FDaEU7eUJBQ0YsQ0FBQztxQkFDSDtpQkFDRjs7O3dCQU9FLEtBQUs7eUJBQ0wsS0FBSzs4QkFDTCxLQUFLOzhCQUNMLEtBQUs7eUJBRUwsTUFBTTswQkFDTixNQUFNOztJQW1DVCxhQUFDO0NBQUEsQUFuR0QsSUFtR0M7U0EvQ1ksTUFBTTs7O0lBQ2pCLDRCQUFxQjs7SUFDckIsc0JBQWE7O0lBRWIsZ0NBQXlEOztJQUV6RCx1QkFBZTs7SUFDZix3QkFBb0Y7O0lBQ3BGLDZCQUE0Qjs7SUFDNUIsNkJBQTBCOztJQUUxQix3QkFBc0M7O0lBQ3RDLHlCQUF1QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IElucHV0LCBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uVHlwZSB9IGZyb20gJy4uL2ljb24vaWNvbi10eXBlcyc7XG5pbXBvcnQgeyB0cmlnZ2VyLCBzdHlsZSwgc3RhdGUsIHRyYW5zaXRpb24sIGFuaW1hdGUgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1iYW5uZXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIFtAZmFkZUFuaW1hdGlvbl09XCJ7XG4gICAgICAgIHZhbHVlOiBhbmltYXRpb25TdGF0ZSxcbiAgICAgICAgcGFyYW1zOiB7XG4gICAgICAgICAgZmFkZUluOiAyMDAsXG4gICAgICAgICAgZmFkZU91dDogMjAwXG4gICAgICAgIH1cbiAgICAgIH1cIlxuICAgICAgKEBmYWRlQW5pbWF0aW9uLmRvbmUpPVwib25GYWRlRmluaXNoZWQoJGV2ZW50KVwiXG4gICAgICBjbGFzcz1cImJhbm5lciBiYW5uZXItLXt7c3RhdHVzfX1cIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnYmFubmVyLS1oaWRkZW4nOiBoaWRlXG4gICAgICB9XCJcbiAgICA+XG4gICAgICA8YnV0dG9uXG4gICAgICAgICpuZ0lmPVwiZGlzbWlzc2FibGVcIlxuICAgICAgICBzdWthQnV0dG9uPVwicGxhaW5cIlxuICAgICAgICAoY2xpY2spPVwib25DbG9zZSgkZXZlbnQpXCJcbiAgICAgICAgY2xhc3M9XCJiYW5uZXJfX2Nsb3NlLWJ1dHRvblwiXG4gICAgICA+XG4gICAgICAgIDxzdWthLWljb24gaWNvbj1cInhcIj48L3N1a2EtaWNvbj5cbiAgICAgIDwvYnV0dG9uPlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiYmFubmVyX19zdGF0dXMtaWNvblwiICpuZ0lmPVwic3RhdHVzICE9PSAnZGVmYXVsdCdcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJhbm5lcl9fc3RhdHVzLWljb25fX3dyYXBwZXJcIj5cbiAgICAgICAgICA8c3VrYS1pY29uIFtpY29uXT1cInN0YXR1c0ljb25cIj48L3N1a2EtaWNvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cImJhbm5lcl9fY29udGVudFwiPlxuICAgICAgICA8aDU+e3t0aXRsZX19PC9oNT5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJhbm5lcl9fZGVzY3JpcHRpb25cIj5cbiAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8YnV0dG9uICpuZ0lmPVwiYWN0aW9uTGFiZWxcIiBzdWthQnV0dG9uIG91dGxpbmU9XCJ0cnVlXCIgKGNsaWNrKT1cIm9uQWN0aW9uKClcIj57e2FjdGlvbkxhYmVsfX08L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICBgLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignZmFkZUFuaW1hdGlvbicsIFtcbiAgICAgIHN0YXRlKCdkZWZhdWx0Jywgc3R5bGUoeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICcqJyB9KSksXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IConLCBbc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICdzY2FsZSguOSknIH0pLCBhbmltYXRlKCcxNTBtcyBjdWJpYy1iZXppZXIoLjE3LC42NywuNzgsMS4yMSknKV0pLFxuICAgICAgdHJhbnNpdGlvbihcbiAgICAgICAgJ2RlZmF1bHQgPT4gY2xvc2luZycsXG4gICAgICAgIGFuaW1hdGUoJzE1MG1zJywgc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICdzY2FsZSguOSknIH0pKSxcbiAgICAgICksXG4gICAgXSksXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQmFubmVyIGltcGxlbWVudHMgT25Jbml0IHtcbiAgc3RhdHVzSWNvbjogSWNvblR5cGU7XG4gIGhpZGUgPSBmYWxzZTtcblxuICBwdWJsaWMgYW5pbWF0aW9uU3RhdGU6ICdkZWZhdWx0JyB8ICdjbG9zaW5nJyA9ICdkZWZhdWx0JztcblxuICBASW5wdXQoKSB0aXRsZTtcbiAgQElucHV0KCkgc3RhdHVzOiAnZGVmYXVsdCcgfCAnaW5mbycgfCAnc3VjY2VzcycgfCAnYXR0ZW50aW9uJyB8ICdhbGVydCcgPSAnZGVmYXVsdCc7XG4gIEBJbnB1dCgpIGRpc21pc3NhYmxlID0gdHJ1ZTtcbiAgQElucHV0KCkgYWN0aW9uTGFiZWwgPSAnJztcblxuICBAT3V0cHV0KCkgYWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgZGlzbWlzcyA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICBzd2l0Y2ggKHRoaXMuc3RhdHVzKSB7XG4gICAgICBjYXNlICdpbmZvJzpcbiAgICAgICAgdGhpcy5zdGF0dXNJY29uID0gJ2luZm8nO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ3N1Y2Nlc3MnOlxuICAgICAgICB0aGlzLnN0YXR1c0ljb24gPSAnY2hlY2snO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2F0dGVudGlvbic6XG4gICAgICAgIHRoaXMuc3RhdHVzSWNvbiA9ICdhbGVydC10cmlhbmdsZSc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnYWxlcnQnOlxuICAgICAgICB0aGlzLnN0YXR1c0ljb24gPSAnYWxlcnQtY2lyY2xlJztcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICB9XG5cbiAgb25BY3Rpb24oKSB7XG4gICAgdGhpcy5hY3Rpb24uZW1pdCgpO1xuICB9XG5cbiAgb25DbG9zZShldmVudD86IGFueSkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGUgPSAnY2xvc2luZyc7XG4gICAgdGhpcy5kaXNtaXNzLmVtaXQoKTtcbiAgfVxuXG4gIG9uRmFkZUZpbmlzaGVkKGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIGNvbnN0IGl0RmluaXNoZWQgPSB0aGlzLmFuaW1hdGlvblN0YXRlID09PSAnY2xvc2luZyc7XG5cbiAgICBpZiAoaXRGaW5pc2hlZCkge1xuICAgICAgdGhpcy5oaWRlID0gdHJ1ZTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==