96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import { animate, state, style, transition, trigger } from "@angular/animations";
|
|
import { CommonModule } from "@angular/common";
|
|
import { Component, ModuleWithProviders, NgModule } from "@angular/core";
|
|
import {
|
|
DefaultNoComponentGlobalConfig,
|
|
GlobalConfig,
|
|
Toast as BaseToast,
|
|
ToastPackage,
|
|
ToastrService,
|
|
TOAST_CONFIG,
|
|
} from "ngx-toastr";
|
|
|
|
@Component({
|
|
selector: "[toast-component2]",
|
|
template: `
|
|
<button
|
|
*ngIf="options.closeButton"
|
|
(click)="remove()"
|
|
type="button"
|
|
class="toast-close-button"
|
|
aria-label="Close"
|
|
>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<div class="icon">
|
|
<i></i>
|
|
</div>
|
|
<div>
|
|
<div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
|
|
{{ title }} <ng-container *ngIf="duplicatesCount">[{{ duplicatesCount + 1 }}]</ng-container>
|
|
</div>
|
|
<div
|
|
*ngIf="message && options.enableHtml"
|
|
role="alertdialog"
|
|
aria-live="polite"
|
|
[class]="options.messageClass"
|
|
[innerHTML]="message"
|
|
></div>
|
|
<div
|
|
*ngIf="message && !options.enableHtml"
|
|
role="alertdialog"
|
|
aria-live="polite"
|
|
[class]="options.messageClass"
|
|
[attr.aria-label]="message"
|
|
>
|
|
{{ message }}
|
|
</div>
|
|
</div>
|
|
<div *ngIf="options.progressBar">
|
|
<div class="toast-progress" [style.width]="width + '%'"></div>
|
|
</div>
|
|
`,
|
|
animations: [
|
|
trigger("flyInOut", [
|
|
state("inactive", style({ opacity: 0 })),
|
|
state("active", style({ opacity: 1 })),
|
|
state("removed", style({ opacity: 0 })),
|
|
transition("inactive => active", animate("{{ easeTime }}ms {{ easing }}")),
|
|
transition("active => removed", animate("{{ easeTime }}ms {{ easing }}")),
|
|
]),
|
|
],
|
|
preserveWhitespaces: false,
|
|
})
|
|
export class BitwardenToast extends BaseToast {
|
|
constructor(protected toastrService: ToastrService, public toastPackage: ToastPackage) {
|
|
super(toastrService, toastPackage);
|
|
}
|
|
}
|
|
|
|
export const BitwardenToastGlobalConfig: GlobalConfig = {
|
|
...DefaultNoComponentGlobalConfig,
|
|
toastComponent: BitwardenToast,
|
|
};
|
|
|
|
@NgModule({
|
|
imports: [CommonModule],
|
|
declarations: [BitwardenToast],
|
|
exports: [BitwardenToast],
|
|
})
|
|
export class BitwardenToastModule {
|
|
static forRoot(config: Partial<GlobalConfig> = {}): ModuleWithProviders<BitwardenToastModule> {
|
|
return {
|
|
ngModule: BitwardenToastModule,
|
|
providers: [
|
|
{
|
|
provide: TOAST_CONFIG,
|
|
useValue: {
|
|
default: BitwardenToastGlobalConfig,
|
|
config: config,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
}
|
|
}
|