Toast component

src/lib/common-ui.module.ts

@@ -5,7 +5,14 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { SortByPipe } from './sorting';
 import { HumanizePipe } from './utils';
-import { ConfirmationDialogComponent, HiddenActionComponent, LogoComponent, StatusBarComponent } from './misc';
+import {
+    ConfirmationDialogComponent,
+    HiddenActionComponent,
+    LogoComponent,
+    SideNavComponent,
+    StatusBarComponent,
+    ToastComponent,
+} from './misc';
 import { FullPageLoadingIndicatorComponent } from './loading';
 import { FullPageErrorComponent } from './error';
 import { IqserListingModule } from './listing';
@@ -20,7 +27,6 @@ import { LogPipe } from './utils/pipes/log.pipe';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
-import { SideNavComponent } from './misc/side-nav/side-nav.component';
 
 const matModules = [MatIconModule, MatProgressSpinnerModule, MatButtonModule, MatDialogModule];
 const modules = [
@@ -42,6 +48,7 @@ const components = [
     HiddenActionComponent,
     ConfirmationDialogComponent,
     SideNavComponent,
+    ToastComponent,
 ];
 const pipes = [SortByPipe, HumanizePipe];
 

src/lib/misc/index.ts

@@ -4,3 +4,4 @@ export * from './logo/logo.component';
 export * from './side-nav/side-nav.component';
 export * from './status-bar/status-bar.component';
 export * from './status-bar/status-bar-config.model';
+export * from './toast/toast.component';

src/lib/misc/toast/toast.component.html

@@ -0,0 +1,20 @@
+<div [style.display]="state.value === 'inactive' ? 'none' : ''" class="row">
+    <div *ngIf="title" [attr.aria-label]="title" [class]="options.titleClass">
+        {{ title }}
+    </div>
+    <div *ngIf="message && options.enableHtml" [class]="options.messageClass" [innerHTML]="message" aria-live="polite" role="alert"></div>
+    <div *ngIf="message && !options.enableHtml" [attr.aria-label]="message" [class]="options.messageClass" aria-live="polite" role="alert">
+        {{ message }}
+    </div>
+
+    <div *ngIf="actions?.length" class="actions-wrapper">
+        <a (click)="callAction($event, action.action)" *ngFor="let action of actions">
+            {{ action.title }}
+        </a>
+    </div>
+</div>
+<div class="text-right">
+    <a (click)="remove()" *ngIf="options.closeButton" class="toast-close-button">
+        <mat-icon svgIcon="iqser:close"></mat-icon>
+    </a>
+</div>

src/lib/misc/toast/toast.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Toast, ToastPackage, ToastrService } from 'ngx-toastr';
+import { ToasterActions, ToasterOptions } from '../../services';
+
+@Component({
+    templateUrl: './toast.component.html',
+    styleUrls: ['./toast.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ToastComponent extends Toast {
+    constructor(protected readonly _toastrService: ToastrService, readonly toastPackage: ToastPackage) {
+        super(_toastrService, toastPackage);
+    }
+
+    get actions(): ToasterActions[] {
+        return (this.options as ToasterOptions)?.actions || [];
+    }
+
+    callAction($event: MouseEvent, action: () => void): void {
+        $event.stopPropagation();
+        if (action) {
+            action();
+        }
+        this.remove();
+    }
+}

src/lib/services/toaster.service.ts

@@ -13,6 +13,11 @@ const enum NotificationType {
     INFO = 'INFO',
 }
 
+export interface ToasterActions {
+    readonly title?: string;
+    readonly action: () => void;
+}
+
 export interface ToasterOptions extends IndividualConfig {
     readonly title?: string;
     /**
@@ -20,7 +25,7 @@ export interface ToasterOptions extends IndividualConfig {
      */
     // eslint-disable-next-line @typescript-eslint/ban-types
     readonly params?: object;
-    readonly actions?: { readonly title?: string; readonly action: () => void }[];
+    readonly actions?: ToasterActions[];
 }
 
 export interface ErrorToasterOptions extends ToasterOptions {