@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
154 lines • 15.5 kB
JavaScript
import { animate, keyframes, state, style, transition, trigger, } from '@angular/animations';
import { Component } from '@angular/core';
import { Toast, ToastPackage, ToastrService } from "ngx-toastr";
import * as i0 from "@angular/core";
import * as i1 from "ngx-toastr";
import * as i2 from "@angular/common";
export class HxaToastrComponent extends Toast {
// constructor is only necessary when not using AoT
constructor(toastrService, toastPackage) {
super(toastrService, toastPackage);
this.toastrService = toastrService;
this.toastPackage = toastPackage;
}
close() {
this.remove();
console.log('you');
}
}
HxaToastrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HxaToastrComponent, deps: [{ token: i1.ToastrService }, { token: i1.ToastPackage }], target: i0.ɵɵFactoryTarget.Component });
HxaToastrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HxaToastrComponent, selector: "hxa-toastr-component", usesInheritance: true, ngImport: i0, template: `
<div class="hx-alert is-elevate-2 {{ toastPackage.toastType }}">
<span class="hx-icon-control mr-2">
<i class="hx-icon is-medium"
[class.icon-exclamation]="toastPackage.toastType === 'is-warning' || toastPackage.toastType === 'is-danger'"
[class.icon-information]="toastPackage.toastType === 'is-info'"
[class.icon-check]="toastPackage.toastType === 'is-success'"></i>
</span>
<span class="hx-flex-1">
<h5 class="ma-0 pa-0 is-text-weight-boldest">{{ title }}</h5>
<div *ngIf="message && options.enableHtml" role="alert" aria-live="polite"
[class]="options.messageClass" [innerHTML]="message">
</div>
<div *ngIf="message && !options.enableHtml" role="alert" aria-live="polite"
[class]="options.messageClass" [attr.aria-label]="message">
{{ message }}
</div>
</span>
<span class="hx-icon-control hx-flex hx-flex-align-center ml-8" *ngIf="options.closeButton">
<button class="hx-delete" (click)="remove()"></button>
</span>
</div>
`, isInline: true, styles: [":host{pointer-events:all}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
trigger('flyInOut', [
state('inactive', style({ opacity: 0 })),
transition('inactive => active', animate('300ms ease-out', keyframes([
style({
opacity: 0,
bottom: '-15px',
'max-height': 0,
'max-width': 0,
'margin-top': 0,
}),
style({
opacity: 0.8,
bottom: '-3px',
}),
style({
opacity: 1,
bottom: '0',
'max-height': '200px',
'margin-top': '12px',
'max-width': '400px',
}),
]))),
state('active', style({
bottom: '0',
'max-height': '200px',
'margin-top': '12px',
'max-width': '400px',
})),
transition('active => removed', animate('300ms ease-out', keyframes([
style({
opacity: 1,
transform: 'translateY(0)'
}),
style({
opacity: 0,
transform: 'translateY(25%)'
}),
]))),
]),
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HxaToastrComponent, decorators: [{
type: Component,
args: [{
selector: 'hxa-toastr-component',
styles: [':host{ pointer-events: all; }'],
template: `
<div class="hx-alert is-elevate-2 {{ toastPackage.toastType }}">
<span class="hx-icon-control mr-2">
<i class="hx-icon is-medium"
[class.icon-exclamation]="toastPackage.toastType === 'is-warning' || toastPackage.toastType === 'is-danger'"
[class.icon-information]="toastPackage.toastType === 'is-info'"
[class.icon-check]="toastPackage.toastType === 'is-success'"></i>
</span>
<span class="hx-flex-1">
<h5 class="ma-0 pa-0 is-text-weight-boldest">{{ title }}</h5>
<div *ngIf="message && options.enableHtml" role="alert" aria-live="polite"
[class]="options.messageClass" [innerHTML]="message">
</div>
<div *ngIf="message && !options.enableHtml" role="alert" aria-live="polite"
[class]="options.messageClass" [attr.aria-label]="message">
{{ message }}
</div>
</span>
<span class="hx-icon-control hx-flex hx-flex-align-center ml-8" *ngIf="options.closeButton">
<button class="hx-delete" (click)="remove()"></button>
</span>
</div>
`,
animations: [
trigger('flyInOut', [
state('inactive', style({ opacity: 0 })),
transition('inactive => active', animate('300ms ease-out', keyframes([
style({
opacity: 0,
bottom: '-15px',
'max-height': 0,
'max-width': 0,
'margin-top': 0,
}),
style({
opacity: 0.8,
bottom: '-3px',
}),
style({
opacity: 1,
bottom: '0',
'max-height': '200px',
'margin-top': '12px',
'max-width': '400px',
}),
]))),
state('active', style({
bottom: '0',
'max-height': '200px',
'margin-top': '12px',
'max-width': '400px',
})),
transition('active => removed', animate('300ms ease-out', keyframes([
style({
opacity: 1,
transform: 'translateY(0)'
}),
style({
opacity: 0,
transform: 'translateY(25%)'
}),
]))),
]),
],
}]
}], ctorParameters: function () { return [{ type: i1.ToastrService }, { type: i1.ToastPackage }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHhhLXRvYXN0ci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9oeC11aS9zcmMvbGliL3RvYXN0ci9oeGEtdG9hc3RyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsT0FBTyxFQUNQLFNBQVMsRUFDVCxLQUFLLEVBQ0wsS0FBSyxFQUNMLFVBQVUsRUFDVixPQUFPLEdBQ1IsTUFBTSxxQkFBcUIsQ0FBQztBQUM3QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBQyxLQUFLLEVBQUUsWUFBWSxFQUFFLGFBQWEsRUFBQyxNQUFNLFlBQVksQ0FBQzs7OztBQXNGOUQsTUFBTSxPQUFPLGtCQUFtQixTQUFRLEtBQUs7SUFDM0MsbURBQW1EO0lBQ25ELFlBQ1ksYUFBNEIsRUFDL0IsWUFBMEI7UUFFakMsS0FBSyxDQUFDLGFBQWEsRUFBRSxZQUFZLENBQUMsQ0FBQztRQUh6QixrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQUMvQixpQkFBWSxHQUFaLFlBQVksQ0FBYztJQUduQyxDQUFDO0lBRUQsS0FBSztRQUNILElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUNkLE9BQU8sQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckIsQ0FBQzs7Z0hBWlUsa0JBQWtCO29HQUFsQixrQkFBa0IsbUZBaEZuQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXNCVCxzS0FDVztRQUNWLE9BQU8sQ0FBQyxVQUFVLEVBQUU7WUFDbEIsS0FBSyxDQUFDLFVBQVUsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUN4QyxVQUFVLENBQ1Isb0JBQW9CLEVBQ3BCLE9BQU8sQ0FDTCxnQkFBZ0IsRUFDaEIsU0FBUyxDQUFDO2dCQUNSLEtBQUssQ0FBQztvQkFDSixPQUFPLEVBQUUsQ0FBQztvQkFDVixNQUFNLEVBQUUsT0FBTztvQkFDZixZQUFZLEVBQUUsQ0FBQztvQkFDZixXQUFXLEVBQUUsQ0FBQztvQkFDZCxZQUFZLEVBQUUsQ0FBQztpQkFDaEIsQ0FBQztnQkFDRixLQUFLLENBQUM7b0JBQ0osT0FBTyxFQUFFLEdBQUc7b0JBQ1osTUFBTSxFQUFFLE1BQU07aUJBQ2YsQ0FBQztnQkFDRixLQUFLLENBQUM7b0JBQ0osT0FBTyxFQUFFLENBQUM7b0JBQ1YsTUFBTSxFQUFFLEdBQUc7b0JBQ1gsWUFBWSxFQUFFLE9BQU87b0JBQ3JCLFlBQVksRUFBRSxNQUFNO29CQUNwQixXQUFXLEVBQUUsT0FBTztpQkFDckIsQ0FBQzthQUNILENBQUMsQ0FDSCxDQUNGO1lBQ0QsS0FBSyxDQUNILFFBQVEsRUFDUixLQUFLLENBQUM7Z0JBQ0osTUFBTSxFQUFFLEdBQUc7Z0JBQ1gsWUFBWSxFQUFFLE9BQU87Z0JBQ3JCLFlBQVksRUFBRSxNQUFNO2dCQUNwQixXQUFXLEVBQUUsT0FBTzthQUNyQixDQUFDLENBQ0g7WUFDRCxVQUFVLENBQ1IsbUJBQW1CLEVBQ25CLE9BQU8sQ0FDTCxnQkFBZ0IsRUFDaEIsU0FBUyxDQUFDO2dCQUNSLEtBQUssQ0FBQztvQkFDSixPQUFPLEVBQUUsQ0FBQztvQkFDVixTQUFTLEVBQUUsZUFBZTtpQkFDM0IsQ0FBQztnQkFDRixLQUFLLENBQUM7b0JBQ0osT0FBTyxFQUFFLENBQUM7b0JBQ1YsU0FBUyxFQUFFLGlCQUFpQjtpQkFDN0IsQ0FBQzthQUNILENBQUMsQ0FDSCxDQUNGO1NBQ0YsQ0FBQztLQUNIOzRGQUVVLGtCQUFrQjtrQkFuRjlCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtvQkFDaEMsTUFBTSxFQUFFLENBQUMsK0JBQStCLENBQUM7b0JBQ3pDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXNCVDtvQkFDRCxVQUFVLEVBQUU7d0JBQ1YsT0FBTyxDQUFDLFVBQVUsRUFBRTs0QkFDbEIsS0FBSyxDQUFDLFVBQVUsRUFBRSxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQzs0QkFDeEMsVUFBVSxDQUNSLG9CQUFvQixFQUNwQixPQUFPLENBQ0wsZ0JBQWdCLEVBQ2hCLFNBQVMsQ0FBQztnQ0FDUixLQUFLLENBQUM7b0NBQ0osT0FBTyxFQUFFLENBQUM7b0NBQ1YsTUFBTSxFQUFFLE9BQU87b0NBQ2YsWUFBWSxFQUFFLENBQUM7b0NBQ2YsV0FBVyxFQUFFLENBQUM7b0NBQ2QsWUFBWSxFQUFFLENBQUM7aUNBQ2hCLENBQUM7Z0NBQ0YsS0FBSyxDQUFDO29DQUNKLE9BQU8sRUFBRSxHQUFHO29DQUNaLE1BQU0sRUFBRSxNQUFNO2lDQUNmLENBQUM7Z0NBQ0YsS0FBSyxDQUFDO29DQUNKLE9BQU8sRUFBRSxDQUFDO29DQUNWLE1BQU0sRUFBRSxHQUFHO29DQUNYLFlBQVksRUFBRSxPQUFPO29DQUNyQixZQUFZLEVBQUUsTUFBTTtvQ0FDcEIsV0FBVyxFQUFFLE9BQU87aUNBQ3JCLENBQUM7NkJBQ0gsQ0FBQyxDQUNILENBQ0Y7NEJBQ0QsS0FBSyxDQUNILFFBQVEsRUFDUixLQUFLLENBQUM7Z0NBQ0osTUFBTSxFQUFFLEdBQUc7Z0NBQ1gsWUFBWSxFQUFFLE9BQU87Z0NBQ3JCLFlBQVksRUFBRSxNQUFNO2dDQUNwQixXQUFXLEVBQUUsT0FBTzs2QkFDckIsQ0FBQyxDQUNIOzRCQUNELFVBQVUsQ0FDUixtQkFBbUIsRUFDbkIsT0FBTyxDQUNMLGdCQUFnQixFQUNoQixTQUFTLENBQUM7Z0NBQ1IsS0FBSyxDQUFDO29DQUNKLE9BQU8sRUFBRSxDQUFDO29DQUNWLFNBQVMsRUFBRSxlQUFlO2lDQUMzQixDQUFDO2dDQUNGLEtBQUssQ0FBQztvQ0FDSixPQUFPLEVBQUUsQ0FBQztvQ0FDVixTQUFTLEVBQUUsaUJBQWlCO2lDQUM3QixDQUFDOzZCQUNILENBQUMsQ0FDSCxDQUNGO3lCQUNGLENBQUM7cUJBQ0g7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIGFuaW1hdGUsXHJcbiAga2V5ZnJhbWVzLFxyXG4gIHN0YXRlLFxyXG4gIHN0eWxlLFxyXG4gIHRyYW5zaXRpb24sXHJcbiAgdHJpZ2dlcixcclxufSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcclxuaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7VG9hc3QsIFRvYXN0UGFja2FnZSwgVG9hc3RyU2VydmljZX0gZnJvbSBcIm5neC10b2FzdHJcIjtcclxuXHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2h4YS10b2FzdHItY29tcG9uZW50JyxcclxuICBzdHlsZXM6IFsnOmhvc3R7IHBvaW50ZXItZXZlbnRzOiBhbGw7IH0nXSxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPGRpdiBjbGFzcz1cImh4LWFsZXJ0IGlzLWVsZXZhdGUtMiB7eyB0b2FzdFBhY2thZ2UudG9hc3RUeXBlIH19XCI+XHJcbiAgICAgIDxzcGFuIGNsYXNzPVwiaHgtaWNvbi1jb250cm9sIG1yLTJcIj5cclxuICAgICAgICA8aSBjbGFzcz1cImh4LWljb24gaXMtbWVkaXVtXCJcclxuICAgICAgICBbY2xhc3MuaWNvbi1leGNsYW1hdGlvbl09XCJ0b2FzdFBhY2thZ2UudG9hc3RUeXBlID09PSAnaXMtd2FybmluZycgfHwgdG9hc3RQYWNrYWdlLnRvYXN0VHlwZSA9PT0gJ2lzLWRhbmdlcidcIlxyXG4gICAgICAgIFtjbGFzcy5pY29uLWluZm9ybWF0aW9uXT1cInRvYXN0UGFja2FnZS50b2FzdFR5cGUgPT09ICdpcy1pbmZvJ1wiXHJcbiAgICAgICAgW2NsYXNzLmljb24tY2hlY2tdPVwidG9hc3RQYWNrYWdlLnRvYXN0VHlwZSA9PT0gJ2lzLXN1Y2Nlc3MnXCI+PC9pPlxyXG4gICAgICA8L3NwYW4+XHJcbiAgICAgIDxzcGFuIGNsYXNzPVwiaHgtZmxleC0xXCI+XHJcbiAgICAgICAgPGg1IGNsYXNzPVwibWEtMCBwYS0wIGlzLXRleHQtd2VpZ2h0LWJvbGRlc3RcIj57eyB0aXRsZSB9fTwvaDU+XHJcbiAgICAgICAgPGRpdiAqbmdJZj1cIm1lc3NhZ2UgJiYgb3B0aW9ucy5lbmFibGVIdG1sXCIgcm9sZT1cImFsZXJ0XCIgYXJpYS1saXZlPVwicG9saXRlXCJcclxuICAgICAgICAgICAgIFtjbGFzc109XCJvcHRpb25zLm1lc3NhZ2VDbGFzc1wiIFtpbm5lckhUTUxdPVwibWVzc2FnZVwiPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgKm5nSWY9XCJtZXNzYWdlICYmICFvcHRpb25zLmVuYWJsZUh0bWxcIiByb2xlPVwiYWxlcnRcIiBhcmlhLWxpdmU9XCJwb2xpdGVcIlxyXG4gICAgICAgICAgICAgW2NsYXNzXT1cIm9wdGlvbnMubWVzc2FnZUNsYXNzXCIgW2F0dHIuYXJpYS1sYWJlbF09XCJtZXNzYWdlXCI+XHJcbiAgICAgICAgICB7eyBtZXNzYWdlIH19XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwvc3Bhbj5cclxuICAgICAgPHNwYW4gY2xhc3M9XCJoeC1pY29uLWNvbnRyb2wgaHgtZmxleCBoeC1mbGV4LWFsaWduLWNlbnRlciBtbC04XCIgICpuZ0lmPVwib3B0aW9ucy5jbG9zZUJ1dHRvblwiPlxyXG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJoeC1kZWxldGVcIiAoY2xpY2spPVwicmVtb3ZlKClcIj48L2J1dHRvbj5cclxuICAgICAgPC9zcGFuPlxyXG4gICAgPC9kaXY+XHJcbiAgYCxcclxuICBhbmltYXRpb25zOiBbXHJcbiAgICB0cmlnZ2VyKCdmbHlJbk91dCcsIFtcclxuICAgICAgc3RhdGUoJ2luYWN0aXZlJywgc3R5bGUoeyBvcGFjaXR5OiAwIH0pKSxcclxuICAgICAgdHJhbnNpdGlvbihcclxuICAgICAgICAnaW5hY3RpdmUgPT4gYWN0aXZlJyxcclxuICAgICAgICBhbmltYXRlKFxyXG4gICAgICAgICAgJzMwMG1zIGVhc2Utb3V0JyxcclxuICAgICAgICAgIGtleWZyYW1lcyhbXHJcbiAgICAgICAgICAgIHN0eWxlKHtcclxuICAgICAgICAgICAgICBvcGFjaXR5OiAwLFxyXG4gICAgICAgICAgICAgIGJvdHRvbTogJy0xNXB4JyxcclxuICAgICAgICAgICAgICAnbWF4LWhlaWdodCc6IDAsXHJcbiAgICAgICAgICAgICAgJ21heC13aWR0aCc6IDAsXHJcbiAgICAgICAgICAgICAgJ21hcmdpbi10b3AnOiAwLFxyXG4gICAgICAgICAgICB9KSxcclxuICAgICAgICAgICAgc3R5bGUoe1xyXG4gICAgICAgICAgICAgIG9wYWNpdHk6IDAuOCxcclxuICAgICAgICAgICAgICBib3R0b206ICctM3B4JyxcclxuICAgICAgICAgICAgfSksXHJcbiAgICAgICAgICAgIHN0eWxlKHtcclxuICAgICAgICAgICAgICBvcGFjaXR5OiAxLFxyXG4gICAgICAgICAgICAgIGJvdHRvbTogJzAnLFxyXG4gICAgICAgICAgICAgICdtYXgtaGVpZ2h0JzogJzIwMHB4JyxcclxuICAgICAgICAgICAgICAnbWFyZ2luLXRvcCc6ICcxMnB4JyxcclxuICAgICAgICAgICAgICAnbWF4LXdpZHRoJzogJzQwMHB4JyxcclxuICAgICAgICAgICAgfSksXHJcbiAgICAgICAgICBdKSxcclxuICAgICAgICApLFxyXG4gICAgICApLFxyXG4gICAgICBzdGF0ZShcclxuICAgICAgICAnYWN0aXZlJyxcclxuICAgICAgICBzdHlsZSh7XHJcbiAgICAgICAgICBib3R0b206ICcwJyxcclxuICAgICAgICAgICdtYXgtaGVpZ2h0JzogJzIwMHB4JyxcclxuICAgICAgICAgICdtYXJnaW4tdG9wJzogJzEycHgnLFxyXG4gICAgICAgICAgJ21heC13aWR0aCc6ICc0MDBweCcsXHJcbiAgICAgICAgfSksXHJcbiAgICAgICksXHJcbiAgICAgIHRyYW5zaXRpb24oXHJcbiAgICAgICAgJ2FjdGl2ZSA9PiByZW1vdmVkJyxcclxuICAgICAgICBhbmltYXRlKFxyXG4gICAgICAgICAgJzMwMG1zIGVhc2Utb3V0JyxcclxuICAgICAgICAgIGtleWZyYW1lcyhbXHJcbiAgICAgICAgICAgIHN0eWxlKHtcclxuICAgICAgICAgICAgICBvcGFjaXR5OiAxLFxyXG4gICAgICAgICAgICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoMCknXHJcbiAgICAgICAgICAgIH0pLFxyXG4gICAgICAgICAgICBzdHlsZSh7XHJcbiAgICAgICAgICAgICAgb3BhY2l0eTogMCxcclxuICAgICAgICAgICAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKDI1JSknXHJcbiAgICAgICAgICAgIH0pLFxyXG4gICAgICAgICAgXSksXHJcbiAgICAgICAgKSxcclxuICAgICAgKSxcclxuICAgIF0pLFxyXG4gIF0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIeGFUb2FzdHJDb21wb25lbnQgZXh0ZW5kcyBUb2FzdCB7XHJcbiAgLy8gY29uc3RydWN0b3IgaXMgb25seSBuZWNlc3Nhcnkgd2hlbiBub3QgdXNpbmcgQW9UXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcm90ZWN0ZWQgdG9hc3RyU2VydmljZTogVG9hc3RyU2VydmljZSxcclxuICAgIHB1YmxpYyB0b2FzdFBhY2thZ2U6IFRvYXN0UGFja2FnZSxcclxuICApIHtcclxuICAgIHN1cGVyKHRvYXN0clNlcnZpY2UsIHRvYXN0UGFja2FnZSk7XHJcbiAgfVxyXG5cclxuICBjbG9zZSgpe1xyXG4gICAgdGhpcy5yZW1vdmUoKTtcclxuICAgIGNvbnNvbGUubG9nKCd5b3UnKTtcclxuICB9XHJcbn1cclxuIl19