@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>
141 lines (139 loc) • 10.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';
export class Banner {
constructor() {
this.hide = false;
this.animationState = 'default';
this.status = 'default';
this.dismissable = true;
this.actionLabel = '';
this.action = new EventEmitter();
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;
}
}
/**
* @return {?}
*/
onAction() {
this.action.emit();
}
/**
* @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;
/** @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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFubmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9iYW5uZXIvYmFubmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQWUsTUFBTSxFQUFFLFlBQVksRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUU1RixPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBc0RqRixNQUFNLE9BQU8sTUFBTTtJQXBEbkI7UUFzREUsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUVOLG1CQUFjLEdBQTBCLFNBQVMsQ0FBQztRQUdoRCxXQUFNLEdBQTJELFNBQVMsQ0FBQztRQUMzRSxnQkFBVyxHQUFHLElBQUksQ0FBQztRQUNuQixnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQUVoQixXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUM1QixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQW1DekMsQ0FBQzs7OztJQWpDQyxRQUFRO1FBQ04sUUFBUSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ25CLEtBQUssTUFBTTtnQkFDVCxJQUFJLENBQUMsVUFBVSxHQUFHLE1BQU0sQ0FBQztnQkFDekIsTUFBTTtZQUNSLEtBQUssU0FBUztnQkFDWixJQUFJLENBQUMsVUFBVSxHQUFHLE9BQU8sQ0FBQztnQkFDMUIsTUFBTTtZQUNSLEtBQUssV0FBVztnQkFDZCxJQUFJLENBQUMsVUFBVSxHQUFHLGdCQUFnQixDQUFDO2dCQUNuQyxNQUFNO1lBQ1IsS0FBSyxPQUFPO2dCQUNWLElBQUksQ0FBQyxVQUFVLEdBQUcsY0FBYyxDQUFDO2dCQUNqQyxNQUFNO1NBQ1Q7SUFDSCxDQUFDOzs7O0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDckIsQ0FBQzs7Ozs7SUFFRCxPQUFPLENBQUMsS0FBVztRQUNqQixJQUFJLENBQUMsY0FBYyxHQUFHLFNBQVMsQ0FBQztRQUNoQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3RCLENBQUM7Ozs7O0lBRUQsY0FBYyxDQUFDLEtBQXFCOztjQUM1QixVQUFVLEdBQUcsSUFBSSxDQUFDLGNBQWMsS0FBSyxTQUFTO1FBRXBELElBQUksVUFBVSxFQUFFO1lBQ2QsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7U0FDbEI7SUFDSCxDQUFDOzs7WUFsR0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxhQUFhO2dCQUN2QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBc0NUO2dCQUNELFVBQVUsRUFBRTtvQkFDVixPQUFPLENBQUMsZUFBZSxFQUFFO3dCQUN2QixLQUFLLENBQUMsU0FBUyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7d0JBQ3ZELFVBQVUsQ0FBQyxXQUFXLEVBQUUsQ0FBQyxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxzQ0FBc0MsQ0FBQyxDQUFDLENBQUM7d0JBQ3pILFVBQVUsQ0FDUixvQkFBb0IsRUFDcEIsT0FBTyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQ2hFO3FCQUNGLENBQUM7aUJBQ0g7YUFDRjs7O29CQU9FLEtBQUs7cUJBQ0wsS0FBSzswQkFDTCxLQUFLOzBCQUNMLEtBQUs7cUJBRUwsTUFBTTtzQkFDTixNQUFNOzs7O0lBWFAsNEJBQXFCOztJQUNyQixzQkFBYTs7SUFFYixnQ0FBeUQ7O0lBRXpELHVCQUFlOztJQUNmLHdCQUFvRjs7SUFDcEYsNkJBQTRCOztJQUM1Qiw2QkFBMEI7O0lBRTFCLHdCQUFzQzs7SUFDdEMseUJBQXVDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5wdXQsIENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25UeXBlIH0gZnJvbSAnLi4vaWNvbi9pY29uLXR5cGVzJztcbmltcG9ydCB7IHRyaWdnZXIsIHN0eWxlLCBzdGF0ZSwgdHJhbnNpdGlvbiwgYW5pbWF0ZSB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLWJhbm5lcicsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdlxuICAgICAgW0BmYWRlQW5pbWF0aW9uXT1cIntcbiAgICAgICAgdmFsdWU6IGFuaW1hdGlvblN0YXRlLFxuICAgICAgICBwYXJhbXM6IHtcbiAgICAgICAgICBmYWRlSW46IDIwMCxcbiAgICAgICAgICBmYWRlT3V0OiAyMDBcbiAgICAgICAgfVxuICAgICAgfVwiXG4gICAgICAoQGZhZGVBbmltYXRpb24uZG9uZSk9XCJvbkZhZGVGaW5pc2hlZCgkZXZlbnQpXCJcbiAgICAgIGNsYXNzPVwiYmFubmVyIGJhbm5lci0te3tzdGF0dXN9fVwiXG4gICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICdiYW5uZXItLWhpZGRlbic6IGhpZGVcbiAgICAgIH1cIlxuICAgID5cbiAgICAgIDxidXR0b25cbiAgICAgICAgKm5nSWY9XCJkaXNtaXNzYWJsZVwiXG4gICAgICAgIHN1a2FCdXR0b249XCJwbGFpblwiXG4gICAgICAgIChjbGljayk9XCJvbkNsb3NlKCRldmVudClcIlxuICAgICAgICBjbGFzcz1cImJhbm5lcl9fY2xvc2UtYnV0dG9uXCJcbiAgICAgID5cbiAgICAgICAgPHN1a2EtaWNvbiBpY29uPVwieFwiPjwvc3VrYS1pY29uPlxuICAgICAgPC9idXR0b24+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJiYW5uZXJfX3N0YXR1cy1pY29uXCIgKm5nSWY9XCJzdGF0dXMgIT09ICdkZWZhdWx0J1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYmFubmVyX19zdGF0dXMtaWNvbl9fd3JhcHBlclwiPlxuICAgICAgICAgIDxzdWthLWljb24gW2ljb25dPVwic3RhdHVzSWNvblwiPjwvc3VrYS1pY29uPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IGNsYXNzPVwiYmFubmVyX19jb250ZW50XCI+XG4gICAgICAgIDxoNT57e3RpdGxlfX08L2g1PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYmFubmVyX19kZXNjcmlwdGlvblwiPlxuICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxidXR0b24gKm5nSWY9XCJhY3Rpb25MYWJlbFwiIHN1a2FCdXR0b24gb3V0bGluZT1cInRydWVcIiAoY2xpY2spPVwib25BY3Rpb24oKVwiPnt7YWN0aW9uTGFiZWx9fTwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdmYWRlQW5pbWF0aW9uJywgW1xuICAgICAgc3RhdGUoJ2RlZmF1bHQnLCBzdHlsZSh7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJyonIH0pKSxcbiAgICAgIHRyYW5zaXRpb24oJ3ZvaWQgPT4gKicsIFtzdHlsZSh7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogJ3NjYWxlKC45KScgfSksIGFuaW1hdGUoJzE1MG1zIGN1YmljLWJlemllciguMTcsLjY3LC43OCwxLjIxKScpXSksXG4gICAgICB0cmFuc2l0aW9uKFxuICAgICAgICAnZGVmYXVsdCA9PiBjbG9zaW5nJyxcbiAgICAgICAgYW5pbWF0ZSgnMTUwbXMnLCBzdHlsZSh7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogJ3NjYWxlKC45KScgfSkpLFxuICAgICAgKSxcbiAgICBdKSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBCYW5uZXIgaW1wbGVtZW50cyBPbkluaXQge1xuICBzdGF0dXNJY29uOiBJY29uVHlwZTtcbiAgaGlkZSA9IGZhbHNlO1xuXG4gIHB1YmxpYyBhbmltYXRpb25TdGF0ZTogJ2RlZmF1bHQnIHwgJ2Nsb3NpbmcnID0gJ2RlZmF1bHQnO1xuXG4gIEBJbnB1dCgpIHRpdGxlO1xuICBASW5wdXQoKSBzdGF0dXM6ICdkZWZhdWx0JyB8ICdpbmZvJyB8ICdzdWNjZXNzJyB8ICdhdHRlbnRpb24nIHwgJ2FsZXJ0JyA9ICdkZWZhdWx0JztcbiAgQElucHV0KCkgZGlzbWlzc2FibGUgPSB0cnVlO1xuICBASW5wdXQoKSBhY3Rpb25MYWJlbCA9ICcnO1xuXG4gIEBPdXRwdXQoKSBhY3Rpb24gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBkaXNtaXNzID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHN3aXRjaCAodGhpcy5zdGF0dXMpIHtcbiAgICAgIGNhc2UgJ2luZm8nOlxuICAgICAgICB0aGlzLnN0YXR1c0ljb24gPSAnaW5mbyc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnc3VjY2Vzcyc6XG4gICAgICAgIHRoaXMuc3RhdHVzSWNvbiA9ICdjaGVjayc7XG4gICAgICAgIGJyZWFrO1xuICAgICAgY2FzZSAnYXR0ZW50aW9uJzpcbiAgICAgICAgdGhpcy5zdGF0dXNJY29uID0gJ2FsZXJ0LXRyaWFuZ2xlJztcbiAgICAgICAgYnJlYWs7XG4gICAgICBjYXNlICdhbGVydCc6XG4gICAgICAgIHRoaXMuc3RhdHVzSWNvbiA9ICdhbGVydC1jaXJjbGUnO1xuICAgICAgICBicmVhaztcbiAgICB9XG4gIH1cblxuICBvbkFjdGlvbigpIHtcbiAgICB0aGlzLmFjdGlvbi5lbWl0KCk7XG4gIH1cblxuICBvbkNsb3NlKGV2ZW50PzogYW55KSB7XG4gICAgdGhpcy5hbmltYXRpb25TdGF0ZSA9ICdjbG9zaW5nJztcbiAgICB0aGlzLmRpc21pc3MuZW1pdCgpO1xuICB9XG5cbiAgb25GYWRlRmluaXNoZWQoZXZlbnQ6IEFuaW1hdGlvbkV2ZW50KSB7XG4gICAgY29uc3QgaXRGaW5pc2hlZCA9IHRoaXMuYW5pbWF0aW9uU3RhdGUgPT09ICdjbG9zaW5nJztcblxuICAgIGlmIChpdEZpbmlzaGVkKSB7XG4gICAgICB0aGlzLmhpZGUgPSB0cnVlO1xuICAgIH1cbiAgfVxufVxuIl19