86 lines
2.7 KiB
TypeScript
86 lines
2.7 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,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|