@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>
170 lines • 13.1 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';
/**
* Informa a los usuarios sobre cambios importantes o condiciones persistentes.
*
* Usa este componente si necesitas comunicar a los usuarios de una manera prominente. Los Banner son ubicados en la parte superior de una página o sección al que aplican, abajo del header de los mismos.
*/
var Banner = /** @class */ (function () {
function Banner() {
this.hide = false;
this.animationState = 'default';
/**
* Sets the status for the banner
*/
this.status = 'default';
/**
* Displays a close button
*/
this.dismissable = true;
/**
* Action label content
*/
this.actionLabel = '';
/**
* Callback when the action
*/
this.action = new EventEmitter();
/**
* Callback when the banner is dismissed.
*/
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;
}
};
/**
* Emits the action callback.
*/
/**
* Emits the action callback.
* @return {?}
*/
Banner.prototype.onAction = /**
* Emits the action callback.
* @return {?}
*/
function () {
this.action.emit();
};
/**
* Closes the banner.
* Emits the dismiss callback.
*/
/**
* Closes the banner.
* Emits the dismiss callback.
* @param {?=} event
* @return {?}
*/
Banner.prototype.onClose = /**
* Closes the banner.
* Emits the dismiss callback.
* @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;
/**
* Title content for the banner
* @type {?}
*/
Banner.prototype.title;
/**
* Sets the status for the banner
* @type {?}
*/
Banner.prototype.status;
/**
* Displays a close button
* @type {?}
*/
Banner.prototype.dismissable;
/**
* Action label content
* @type {?}
*/
Banner.prototype.actionLabel;
/**
* Callback when the action
* @type {?}
*/
Banner.prototype.action;
/**
* Callback when the banner is dismissed.
* @type {?}
*/
Banner.prototype.dismiss;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9iYW5uZXIvYmFubmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQWUsTUFBTSxFQUFFLFlBQVksRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUU1RixPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7QUFPakY7SUFBQTtRQXNERSxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBRU4sbUJBQWMsR0FBMEIsU0FBUyxDQUFDOzs7O1FBVWhELFdBQU0sR0FBMkQsU0FBUyxDQUFDOzs7O1FBSzNFLGdCQUFXLEdBQUcsSUFBSSxDQUFDOzs7O1FBS25CLGdCQUFXLEdBQUcsRUFBRSxDQUFDOzs7O1FBS2hCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDOzs7O1FBSzVCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBMEN6QyxDQUFDOzs7O0lBeENDLHlCQUFROzs7SUFBUjtRQUNFLFFBQVEsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNuQixLQUFLLE1BQU07Z0JBQ1QsSUFBSSxDQUFDLFVBQVUsR0FBRyxNQUFNLENBQUM7Z0JBQ3pCLE1BQU07WUFDUixLQUFLLFNBQVM7Z0JBQ1osSUFBSSxDQUFDLFVBQVUsR0FBRyxPQUFPLENBQUM7Z0JBQzFCLE1BQU07WUFDUixLQUFLLFdBQVc7Z0JBQ2QsSUFBSSxDQUFDLFVBQVUsR0FBRyxnQkFBZ0IsQ0FBQztnQkFDbkMsTUFBTTtZQUNSLEtBQUssT0FBTztnQkFDVixJQUFJLENBQUMsVUFBVSxHQUFHLGNBQWMsQ0FBQztnQkFDakMsTUFBTTtTQUNUO0lBQ0gsQ0FBQztJQUVEOztPQUVHOzs7OztJQUNILHlCQUFROzs7O0lBQVI7UUFDRSxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRDs7O09BR0c7Ozs7Ozs7SUFDSCx3QkFBTzs7Ozs7O0lBQVAsVUFBUSxLQUFXO1FBQ2pCLElBQUksQ0FBQyxjQUFjLEdBQUcsU0FBUyxDQUFDO1FBQ2hDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDdEIsQ0FBQzs7Ozs7SUFFRCwrQkFBYzs7OztJQUFkLFVBQWUsS0FBcUI7O1lBQzVCLFVBQVUsR0FBRyxJQUFJLENBQUMsY0FBYyxLQUFLLFNBQVM7UUFFcEQsSUFBSSxVQUFVLEVBQUU7WUFDZCxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztTQUNsQjtJQUNILENBQUM7O2dCQS9IRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGFBQWE7b0JBQ3ZCLFFBQVEsRUFBRSwyakNBc0NUO29CQUNELFVBQVUsRUFBRTt3QkFDVixPQUFPLENBQUMsZUFBZSxFQUFFOzRCQUN2QixLQUFLLENBQUMsU0FBUyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7NEJBQ3ZELFVBQVUsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxzQ0FBc0MsQ0FBQyxDQUFDLENBQUM7NEJBQ3pILFVBQVUsQ0FDUixvQkFBb0IsRUFDcEIsT0FBTyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQ2hFO3lCQUNGLENBQUM7cUJBQ0g7aUJBQ0Y7Ozt3QkFVRSxLQUFLO3lCQUtMLEtBQUs7OEJBS0wsS0FBSzs4QkFLTCxLQUFLO3lCQUtMLE1BQU07MEJBS04sTUFBTTs7SUEwQ1QsYUFBQztDQUFBLEFBaElELElBZ0lDO1NBNUVZLE1BQU07OztJQUNqQiw0QkFBcUI7O0lBQ3JCLHNCQUFhOztJQUViLGdDQUF5RDs7Ozs7SUFLekQsdUJBQWU7Ozs7O0lBS2Ysd0JBQW9GOzs7OztJQUtwRiw2QkFBNEI7Ozs7O0lBSzVCLDZCQUEwQjs7Ozs7SUFLMUIsd0JBQXNDOzs7OztJQUt0Qyx5QkFBdUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbnB1dCwgQ29tcG9uZW50LCBIb3N0QmluZGluZywgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSWNvblR5cGUgfSBmcm9tICcuLi9pY29uL2ljb24tdHlwZXMnO1xuaW1wb3J0IHsgdHJpZ2dlciwgc3R5bGUsIHN0YXRlLCB0cmFuc2l0aW9uLCBhbmltYXRlIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5cbi8qKlxuICogSW5mb3JtYSBhIGxvcyB1c3VhcmlvcyBzb2JyZSBjYW1iaW9zIGltcG9ydGFudGVzIG8gY29uZGljaW9uZXMgcGVyc2lzdGVudGVzLlxuICpcbiAqIFVzYSBlc3RlIGNvbXBvbmVudGUgc2kgbmVjZXNpdGFzIGNvbXVuaWNhciBhIGxvcyB1c3VhcmlvcyBkZSB1bmEgbWFuZXJhIHByb21pbmVudGUuIExvcyBCYW5uZXIgc29uIHViaWNhZG9zIGVuIGxhIHBhcnRlIHN1cGVyaW9yIGRlIHVuYSBww6FnaW5hIG8gc2VjY2nDs24gYWwgcXVlIGFwbGljYW4sIGFiYWpvIGRlbCBoZWFkZXIgZGUgbG9zIG1pc21vcy5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1iYW5uZXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXZcbiAgICAgIFtAZmFkZUFuaW1hdGlvbl09XCJ7XG4gICAgICAgIHZhbHVlOiBhbmltYXRpb25TdGF0ZSxcbiAgICAgICAgcGFyYW1zOiB7XG4gICAgICAgICAgZmFkZUluOiAyMDAsXG4gICAgICAgICAgZmFkZU91dDogMjAwXG4gICAgICAgIH1cbiAgICAgIH1cIlxuICAgICAgKEBmYWRlQW5pbWF0aW9uLmRvbmUpPVwib25GYWRlRmluaXNoZWQoJGV2ZW50KVwiXG4gICAgICBjbGFzcz1cImJhbm5lciBiYW5uZXItLXt7c3RhdHVzfX1cIlxuICAgICAgW25nQ2xhc3NdPVwie1xuICAgICAgICAnYmFubmVyLS1oaWRkZW4nOiBoaWRlXG4gICAgICB9XCJcbiAgICA+XG4gICAgICA8YnV0dG9uXG4gICAgICAgICpuZ0lmPVwiZGlzbWlzc2FibGVcIlxuICAgICAgICBzdWthQnV0dG9uPVwicGxhaW5cIlxuICAgICAgICAoY2xpY2spPVwib25DbG9zZSgkZXZlbnQpXCJcbiAgICAgICAgY2xhc3M9XCJiYW5uZXJfX2Nsb3NlLWJ1dHRvblwiXG4gICAgICA+XG4gICAgICAgIDxzdWthLWljb24gaWNvbj1cInhcIj48L3N1a2EtaWNvbj5cbiAgICAgIDwvYnV0dG9uPlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiYmFubmVyX19zdGF0dXMtaWNvblwiICpuZ0lmPVwic3RhdHVzICE9PSAnZGVmYXVsdCdcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJhbm5lcl9fc3RhdHVzLWljb25fX3dyYXBwZXJcIj5cbiAgICAgICAgICA8c3VrYS1pY29uIFtpY29uXT1cInN0YXR1c0ljb25cIj48L3N1a2EtaWNvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cImJhbm5lcl9fY29udGVudFwiPlxuICAgICAgICA8aDU+e3t0aXRsZX19PC9oNT5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJhbm5lcl9fZGVzY3JpcHRpb25cIj5cbiAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8YnV0dG9uICpuZ0lmPVwiYWN0aW9uTGFiZWxcIiBzdWthQnV0dG9uIG91dGxpbmU9XCJ0cnVlXCIgKGNsaWNrKT1cIm9uQWN0aW9uKClcIj57e2FjdGlvbkxhYmVsfX08L2J1dHRvbj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICBgLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignZmFkZUFuaW1hdGlvbicsIFtcbiAgICAgIHN0YXRlKCdkZWZhdWx0Jywgc3R5bGUoeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICcqJyB9KSksXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkID0+IConLCBbc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICdzY2FsZSguOSknIH0pLCBhbmltYXRlKCcxNTBtcyBjdWJpYy1iZXppZXIoLjE3LC42NywuNzgsMS4yMSknKV0pLFxuICAgICAgdHJhbnNpdGlvbihcbiAgICAgICAgJ2RlZmF1bHQgPT4gY2xvc2luZycsXG4gICAgICAgIGFuaW1hdGUoJzE1MG1zJywgc3R5bGUoeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06ICdzY2FsZSguOSknIH0pKSxcbiAgICAgICksXG4gICAgXSksXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQmFubmVyIGltcGxlbWVudHMgT25Jbml0IHtcbiAgc3RhdHVzSWNvbjogSWNvblR5cGU7XG4gIGhpZGUgPSBmYWxzZTtcblxuICBwdWJsaWMgYW5pbWF0aW9uU3RhdGU6ICdkZWZhdWx0JyB8ICdjbG9zaW5nJyA9ICdkZWZhdWx0JztcblxuICAvKipcbiAgICogVGl0bGUgY29udGVudCBmb3IgdGhlIGJhbm5lclxuICAgKi9cbiAgQElucHV0KCkgdGl0bGU7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIHN0YXR1cyBmb3IgdGhlIGJhbm5lclxuICAgKi9cbiAgQElucHV0KCkgc3RhdHVzOiAnZGVmYXVsdCcgfCAnaW5mbycgfCAnc3VjY2VzcycgfCAnYXR0ZW50aW9uJyB8ICdhbGVydCcgPSAnZGVmYXVsdCc7XG5cbiAgLyoqXG4gICAqIERpc3BsYXlzIGEgY2xvc2UgYnV0dG9uXG4gICAqL1xuICBASW5wdXQoKSBkaXNtaXNzYWJsZSA9IHRydWU7XG5cbiAgLyoqXG4gICAqIEFjdGlvbiBsYWJlbCBjb250ZW50XG4gICAqL1xuICBASW5wdXQoKSBhY3Rpb25MYWJlbCA9ICcnO1xuXG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBhY3Rpb25cbiAgICovXG4gIEBPdXRwdXQoKSBhY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgLyoqXG4gICAqIENhbGxiYWNrIHdoZW4gdGhlIGJhbm5lciBpcyBkaXNtaXNzZWQuXG4gICAqL1xuICBAT3V0cHV0KCkgZGlzbWlzcyA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICBzd2l0Y2ggKHRoaXMuc3RhdHVzKSB7XG4gICAgICBjYXNlICdpbmZvJzpcbiAgICAgICAgdGhpcy5zdGF0dXNJY29uID0gJ2luZm8nO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ3N1Y2Nlc3MnOlxuICAgICAgICB0aGlzLnN0YXR1c0ljb24gPSAnY2hlY2snO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2F0dGVudGlvbic6XG4gICAgICAgIHRoaXMuc3RhdHVzSWNvbiA9ICdhbGVydC10cmlhbmdsZSc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnYWxlcnQnOlxuICAgICAgICB0aGlzLnN0YXR1c0ljb24gPSAnYWxlcnQtY2lyY2xlJztcbiAgICAgICAgYnJlYWs7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIEVtaXRzIHRoZSBhY3Rpb24gY2FsbGJhY2suXG4gICAqL1xuICBvbkFjdGlvbigpIHtcbiAgICB0aGlzLmFjdGlvbi5lbWl0KCk7XG4gIH1cblxuICAvKipcbiAgICogQ2xvc2VzIHRoZSBiYW5uZXIuXG4gICAqIEVtaXRzIHRoZSBkaXNtaXNzIGNhbGxiYWNrLlxuICAgKi9cbiAgb25DbG9zZShldmVudD86IGFueSkge1xuICAgIHRoaXMuYW5pbWF0aW9uU3RhdGUgPSAnY2xvc2luZyc7XG4gICAgdGhpcy5kaXNtaXNzLmVtaXQoKTtcbiAgfVxuXG4gIG9uRmFkZUZpbmlzaGVkKGV2ZW50OiBBbmltYXRpb25FdmVudCkge1xuICAgIGNvbnN0IGl0RmluaXNoZWQgPSB0aGlzLmFuaW1hdGlvblN0YXRlID09PSAnY2xvc2luZyc7XG5cbiAgICBpZiAoaXRGaW5pc2hlZCkge1xuICAgICAgdGhpcy5oaWRlID0gdHJ1ZTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==