@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>
182 lines (180 loc) • 12.3 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.
*/
export class Banner {
constructor() {
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 {?}
*/
ngOnInit() {
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.
* @return {?}
*/
onAction() {
this.action.emit();
}
/**
* Closes the banner.
* Emits the dismiss callback.
* @param {?=} event
* @return {?}
*/
onClose(event) {
this.animationState = 'closing';
this.dismiss.emit();
}
/**
* @param {?} event
* @return {?}
*/
onFadeFinished(event) {
/** @type {?} */
const itFinished = this.animationState === 'closing';
if (itFinished) {
this.hide = true;
}
}
}
Banner.decorators = [
{ type: Component, args: [{
selector: 'suka-banner',
template: `
<div
[@fadeAnimation]="{
value: animationState,
params: {
fadeIn: 200,
fadeOut: 200
}
}"
(@fadeAnimation.done)="onFadeFinished($event)"
class="banner banner--{{status}}"
[ngClass]="{
'banner--hidden': hide
}"
>
<button
*ngIf="dismissable"
sukaButton="plain"
(click)="onClose($event)"
class="banner__close-button"
>
<suka-icon icon="x"></suka-icon>
</button>
<div class="banner__status-icon" *ngIf="status !== 'default'">
<div class="banner__status-icon__wrapper">
<suka-icon [icon]="statusIcon"></suka-icon>
</div>
</div>
<div class="banner__content">
<h5>{{title}}</h5>
<div class="banner__description">
<ng-content></ng-content>
</div>
<button *ngIf="actionLabel" sukaButton outline="true" (click)="onAction()">{{actionLabel}}</button>
</div>
</div>
`,
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 }]
};
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9iYW5uZXIvYmFubmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQWUsTUFBTSxFQUFFLFlBQVksRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUU1RixPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7QUEyRGpGLE1BQU0sT0FBTyxNQUFNO0lBcERuQjtRQXNERSxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBRU4sbUJBQWMsR0FBMEIsU0FBUyxDQUFDOzs7O1FBVWhELFdBQU0sR0FBMkQsU0FBUyxDQUFDOzs7O1FBSzNFLGdCQUFXLEdBQUcsSUFBSSxDQUFDOzs7O1FBS25CLGdCQUFXLEdBQUcsRUFBRSxDQUFDOzs7O1FBS2hCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDOzs7O1FBSzVCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBMEN6QyxDQUFDOzs7O0lBeENDLFFBQVE7UUFDTixRQUFRLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDbkIsS0FBSyxNQUFNO2dCQUNULElBQUksQ0FBQyxVQUFVLEdBQUcsTUFBTSxDQUFDO2dCQUN6QixNQUFNO1lBQ1IsS0FBSyxTQUFTO2dCQUNaLElBQUksQ0FBQyxVQUFVLEdBQUcsT0FBTyxDQUFDO2dCQUMxQixNQUFNO1lBQ1IsS0FBSyxXQUFXO2dCQUNkLElBQUksQ0FBQyxVQUFVLEdBQUcsZ0JBQWdCLENBQUM7Z0JBQ25DLE1BQU07WUFDUixLQUFLLE9BQU87Z0JBQ1YsSUFBSSxDQUFDLFVBQVUsR0FBRyxjQUFjLENBQUM7Z0JBQ2pDLE1BQU07U0FDVDtJQUNILENBQUM7Ozs7O0lBS0QsUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQzs7Ozs7OztJQU1ELE9BQU8sQ0FBQyxLQUFXO1FBQ2pCLElBQUksQ0FBQyxjQUFjLEdBQUcsU0FBUyxDQUFDO1FBQ2hDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDdEIsQ0FBQzs7Ozs7SUFFRCxjQUFjLENBQUMsS0FBcUI7O2NBQzVCLFVBQVUsR0FBRyxJQUFJLENBQUMsY0FBYyxLQUFLLFNBQVM7UUFFcEQsSUFBSSxVQUFVLEVBQUU7WUFDZCxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztTQUNsQjtJQUNILENBQUM7OztZQS9IRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FzQ1Q7Z0JBQ0QsVUFBVSxFQUFFO29CQUNWLE9BQU8sQ0FBQyxlQUFlLEVBQUU7d0JBQ3ZCLEtBQUssQ0FBQyxTQUFTLEVBQUUsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQzt3QkFDdkQsVUFBVSxDQUFDLFdBQVcsRUFBRSxDQUFDLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxDQUFDLEVBQUUsT0FBTyxDQUFDLHNDQUFzQyxDQUFDLENBQUMsQ0FBQzt3QkFDekgsVUFBVSxDQUNSLG9CQUFvQixFQUNwQixPQUFPLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxDQUFDLENBQUMsQ0FDaEU7cUJBQ0YsQ0FBQztpQkFDSDthQUNGOzs7b0JBVUUsS0FBSztxQkFLTCxLQUFLOzBCQUtMLEtBQUs7MEJBS0wsS0FBSztxQkFLTCxNQUFNO3NCQUtOLE1BQU07Ozs7SUFqQ1AsNEJBQXFCOztJQUNyQixzQkFBYTs7SUFFYixnQ0FBeUQ7Ozs7O0lBS3pELHVCQUFlOzs7OztJQUtmLHdCQUFvRjs7Ozs7SUFLcEYsNkJBQTRCOzs7OztJQUs1Qiw2QkFBMEI7Ozs7O0lBSzFCLHdCQUFzQzs7Ozs7SUFLdEMseUJBQXVDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5wdXQsIENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25UeXBlIH0gZnJvbSAnLi4vaWNvbi9pY29uLXR5cGVzJztcbmltcG9ydCB7IHRyaWdnZXIsIHN0eWxlLCBzdGF0ZSwgdHJhbnNpdGlvbiwgYW5pbWF0ZSB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuXG4vKipcbiAqIEluZm9ybWEgYSBsb3MgdXN1YXJpb3Mgc29icmUgY2FtYmlvcyBpbXBvcnRhbnRlcyBvIGNvbmRpY2lvbmVzIHBlcnNpc3RlbnRlcy5cbiAqXG4gKiBVc2EgZXN0ZSBjb21wb25lbnRlIHNpIG5lY2VzaXRhcyBjb211bmljYXIgYSBsb3MgdXN1YXJpb3MgZGUgdW5hIG1hbmVyYSBwcm9taW5lbnRlLiBMb3MgQmFubmVyIHNvbiB1YmljYWRvcyBlbiBsYSBwYXJ0ZSBzdXBlcmlvciBkZSB1bmEgcMOhZ2luYSBvIHNlY2Npw7NuIGFsIHF1ZSBhcGxpY2FuLCBhYmFqbyBkZWwgaGVhZGVyIGRlIGxvcyBtaXNtb3MuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtYmFubmVyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2XG4gICAgICBbQGZhZGVBbmltYXRpb25dPVwie1xuICAgICAgICB2YWx1ZTogYW5pbWF0aW9uU3RhdGUsXG4gICAgICAgIHBhcmFtczoge1xuICAgICAgICAgIGZhZGVJbjogMjAwLFxuICAgICAgICAgIGZhZGVPdXQ6IDIwMFxuICAgICAgICB9XG4gICAgICB9XCJcbiAgICAgIChAZmFkZUFuaW1hdGlvbi5kb25lKT1cIm9uRmFkZUZpbmlzaGVkKCRldmVudClcIlxuICAgICAgY2xhc3M9XCJiYW5uZXIgYmFubmVyLS17e3N0YXR1c319XCJcbiAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgJ2Jhbm5lci0taGlkZGVuJzogaGlkZVxuICAgICAgfVwiXG4gICAgPlxuICAgICAgPGJ1dHRvblxuICAgICAgICAqbmdJZj1cImRpc21pc3NhYmxlXCJcbiAgICAgICAgc3VrYUJ1dHRvbj1cInBsYWluXCJcbiAgICAgICAgKGNsaWNrKT1cIm9uQ2xvc2UoJGV2ZW50KVwiXG4gICAgICAgIGNsYXNzPVwiYmFubmVyX19jbG9zZS1idXR0b25cIlxuICAgICAgPlxuICAgICAgICA8c3VrYS1pY29uIGljb249XCJ4XCI+PC9zdWthLWljb24+XG4gICAgICA8L2J1dHRvbj5cblxuICAgICAgPGRpdiBjbGFzcz1cImJhbm5lcl9fc3RhdHVzLWljb25cIiAqbmdJZj1cInN0YXR1cyAhPT0gJ2RlZmF1bHQnXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJiYW5uZXJfX3N0YXR1cy1pY29uX193cmFwcGVyXCI+XG4gICAgICAgICAgPHN1a2EtaWNvbiBbaWNvbl09XCJzdGF0dXNJY29uXCI+PC9zdWthLWljb24+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJiYW5uZXJfX2NvbnRlbnRcIj5cbiAgICAgICAgPGg1Pnt7dGl0bGV9fTwvaDU+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJiYW5uZXJfX2Rlc2NyaXB0aW9uXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGJ1dHRvbiAqbmdJZj1cImFjdGlvbkxhYmVsXCIgc3VrYUJ1dHRvbiBvdXRsaW5lPVwidHJ1ZVwiIChjbGljayk9XCJvbkFjdGlvbigpXCI+e3thY3Rpb25MYWJlbH19PC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgYCxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2ZhZGVBbmltYXRpb24nLCBbXG4gICAgICBzdGF0ZSgnZGVmYXVsdCcsIHN0eWxlKHsgb3BhY2l0eTogMSwgdHJhbnNmb3JtOiAnKicgfSkpLFxuICAgICAgdHJhbnNpdGlvbigndm9pZCA9PiAqJywgW3N0eWxlKHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiAnc2NhbGUoLjkpJyB9KSwgYW5pbWF0ZSgnMTUwbXMgY3ViaWMtYmV6aWVyKC4xNywuNjcsLjc4LDEuMjEpJyldKSxcbiAgICAgIHRyYW5zaXRpb24oXG4gICAgICAgICdkZWZhdWx0ID0+IGNsb3NpbmcnLFxuICAgICAgICBhbmltYXRlKCcxNTBtcycsIHN0eWxlKHsgb3BhY2l0eTogMCwgdHJhbnNmb3JtOiAnc2NhbGUoLjkpJyB9KSksXG4gICAgICApLFxuICAgIF0pLFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIEJhbm5lciBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHN0YXR1c0ljb246IEljb25UeXBlO1xuICBoaWRlID0gZmFsc2U7XG5cbiAgcHVibGljIGFuaW1hdGlvblN0YXRlOiAnZGVmYXVsdCcgfCAnY2xvc2luZycgPSAnZGVmYXVsdCc7XG5cbiAgLyoqXG4gICAqIFRpdGxlIGNvbnRlbnQgZm9yIHRoZSBiYW5uZXJcbiAgICovXG4gIEBJbnB1dCgpIHRpdGxlO1xuXG4gIC8qKlxuICAgKiBTZXRzIHRoZSBzdGF0dXMgZm9yIHRoZSBiYW5uZXJcbiAgICovXG4gIEBJbnB1dCgpIHN0YXR1czogJ2RlZmF1bHQnIHwgJ2luZm8nIHwgJ3N1Y2Nlc3MnIHwgJ2F0dGVudGlvbicgfCAnYWxlcnQnID0gJ2RlZmF1bHQnO1xuXG4gIC8qKlxuICAgKiBEaXNwbGF5cyBhIGNsb3NlIGJ1dHRvblxuICAgKi9cbiAgQElucHV0KCkgZGlzbWlzc2FibGUgPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBBY3Rpb24gbGFiZWwgY29udGVudFxuICAgKi9cbiAgQElucHV0KCkgYWN0aW9uTGFiZWwgPSAnJztcblxuICAvKipcbiAgICogQ2FsbGJhY2sgd2hlbiB0aGUgYWN0aW9uXG4gICAqL1xuICBAT3V0cHV0KCkgYWN0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIC8qKlxuICAgKiBDYWxsYmFjayB3aGVuIHRoZSBiYW5uZXIgaXMgZGlzbWlzc2VkLlxuICAgKi9cbiAgQE91dHB1dCgpIGRpc21pc3MgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgc3dpdGNoICh0aGlzLnN0YXR1cykge1xuICAgICAgY2FzZSAnaW5mbyc6XG4gICAgICAgIHRoaXMuc3RhdHVzSWNvbiA9ICdpbmZvJztcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdzdWNjZXNzJzpcbiAgICAgICAgdGhpcy5zdGF0dXNJY29uID0gJ2NoZWNrJztcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdhdHRlbnRpb24nOlxuICAgICAgICB0aGlzLnN0YXR1c0ljb24gPSAnYWxlcnQtdHJpYW5nbGUnO1xuICAgICAgICBicmVhaztcbiAgICAgIGNhc2UgJ2FsZXJ0JzpcbiAgICAgICAgdGhpcy5zdGF0dXNJY29uID0gJ2FsZXJ0LWNpcmNsZSc7XG4gICAgICAgIGJyZWFrO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBFbWl0cyB0aGUgYWN0aW9uIGNhbGxiYWNrLlxuICAgKi9cbiAgb25BY3Rpb24oKSB7XG4gICAgdGhpcy5hY3Rpb24uZW1pdCgpO1xuICB9XG5cbiAgLyoqXG4gICAqIENsb3NlcyB0aGUgYmFubmVyLlxuICAgKiBFbWl0cyB0aGUgZGlzbWlzcyBjYWxsYmFjay5cbiAgICovXG4gIG9uQ2xvc2UoZXZlbnQ/OiBhbnkpIHtcbiAgICB0aGlzLmFuaW1hdGlvblN0YXRlID0gJ2Nsb3NpbmcnO1xuICAgIHRoaXMuZGlzbWlzcy5lbWl0KCk7XG4gIH1cblxuICBvbkZhZGVGaW5pc2hlZChldmVudDogQW5pbWF0aW9uRXZlbnQpIHtcbiAgICBjb25zdCBpdEZpbmlzaGVkID0gdGhpcy5hbmltYXRpb25TdGF0ZSA9PT0gJ2Nsb3NpbmcnO1xuXG4gICAgaWYgKGl0RmluaXNoZWQpIHtcbiAgICAgIHRoaXMuaGlkZSA9IHRydWU7XG4gICAgfVxuICB9XG59XG4iXX0=