Add toastr component (#568)

angular/src/components/toastr.component.ts

@@ -0,0 +1,85 @@
+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">&times;</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,
+                    },
+                },
+            ],
+        };
+    }
+}

angular/src/services/jslib-services.module.ts

@@ -3,7 +3,6 @@ import {
     LOCALE_ID,
     NgModule,
 } from '@angular/core';
-import { ToasterModule } from 'angular2-toaster';
 
 import { ApiService } from 'jslib-common/services/api.service';
 import { AppIdService } from 'jslib-common/services/appId.service';
@@ -80,9 +79,6 @@ import { UnauthGuardService } from './unauth-guard.service';
 import { ValidationService } from './validation.service';
 
 @NgModule({
-    imports: [
-        ToasterModule,
-    ],
     declarations: [],
     providers: [
         { provide: 'WINDOW', useValue: window },

common/src/abstractions/platformUtils.service.ts

@@ -1,6 +1,10 @@
 import { DeviceType } from '../enums/deviceType';
 import { ThemeType } from '../enums/themeType';
 
+interface ToastOptions {
+    timeout?: number;
+}
+
 export abstract class PlatformUtilsService {
     identityClientId: string;
     getDevice: () => DeviceType;
@@ -20,7 +24,7 @@ export abstract class PlatformUtilsService {
     supportsWebAuthn: (win: Window) => boolean;
     supportsDuo: () => boolean;
     showToast: (type: 'error' | 'success' | 'warning' | 'info', title: string, text: string | string[],
-        options?: any) => void;
+        options?: ToastOptions) => void;
     showDialog: (body: string, title?: string, confirmText?: string, cancelText?: string,
         type?: string, bodyIsHtml?: boolean) => Promise<boolean>;
     isDev: () => boolean;