toast-message-display 18.0.6 → 20.0.0

package/fesm2022/toast-message-display.mjs

@@ -1,18 +1,22 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, Pipe, VERSION, EventEmitter, Input, Output, Inject, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
+import { Injectable, inject, Pipe, input, output, computed, Optional, Inject, ViewEncapsulation, Component, signal, makeEnvironmentProviders, effect } from '@angular/core';
+import { MatSnackBar, MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSnackBar, MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import { DomSanitizer } from '@angular/platform-browser';
+import { TitleCasePipe } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i5 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
+import * as i6 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
+import * as i7 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
-import { DomSanitizer } from '@angular/platform-browser';
-import { take } from 'rxjs/operators';
 
 var ToastColors;
 (function (ToastColors) {
@@ -68,10 +72,10 @@ class ColorConversionService {
             parseInt(result[3], 16)
         ] : [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorConversionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorConversionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorConversionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorConversionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -158,10 +162,10 @@ class TextColorService {
         }
         return ctx?.fillStyle;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextColorService, deps: [{ token: ColorConversionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextColorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TextColorService, deps: [{ token: ColorConversionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TextColorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextColorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TextColorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -175,75 +179,50 @@ class SafeHtmlPipe {
     transform(html) {
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'safeHtml',
-                    standalone: false
+                    name: 'safeHtml'
                 }]
         }] });
 
 class ToastUIComponent {
     constructor(data) {
         this.data = data;
-        this.ngVersion = parseInt(VERSION.full.split('.')[0], 10);
-        this.close = new EventEmitter();
+        this.options = input(ToastDisplay.adapt(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.close = output();
         this.textColorService = inject(TextColorService);
         this.snackBar = inject(MatSnackBar);
-        this.options = ToastDisplay.adapt();
-        this.options = ToastDisplay.adapt(data);
-    }
-    ngOnInit() {
-        if (this.ngVersion >= 15) {
-            const hostElement = document.querySelector('.mat-mdc-snack-bar-container');
-            if (hostElement) {
-                hostElement.setAttribute('style', `
-          --toast-bg-color: ${this.color};
-          --toast-text-color: ${this.textColor};
-        `);
-            }
-        }
-        else {
-            document.documentElement.style.setProperty('--toast-bg-color', this.color);
-            document.documentElement.style.setProperty('--toast-text-color', this.textColor);
-            const hostElement = document.querySelector('.mat-snack-bar-container');
-            if (hostElement) {
-                hostElement.style.backgroundColor = this.color;
-                hostElement.style.color = this.textColor;
-                const actionButton = hostElement.querySelector('.mat-button, .mat-snack-bar-action');
-                if (actionButton) {
-                    actionButton.style.color = this.textColor;
-                }
-            }
-        }
-    }
-    get color() {
-        return this.options.color || '#2196f3';
-    }
-    get textColor() {
-        return this.textColorService.textColorForBgColor(this.color, '#FFFFFF', '#000000');
+        this.displayOptions = computed(() => {
+            return this.data ? ToastDisplay.adapt(this.data) : this.options();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayOptions" }] : /* istanbul ignore next */ []));
+        this.color = computed(() => this.displayOptions().color || '#2196f3', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.textColor = computed(() => this.textColorService.textColorForBgColor(this.color(), '#FFFFFF', '#000000'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
     }
     onCloseToast(options) {
         this.snackBar.dismiss();
-        this.close.emit(options);
+        if (options)
+            this.close.emit(options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastUIComponent, deps: [{ token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastUIComponent, selector: "app-toast-ui", inputs: { options: "options" }, outputs: { close: "close" }, ngImport: i0, template: "<div\n  class=\"toast-grid-container\"\n  [class.has-icon]=\"options.icon\"\n  [class.has-action]=\"options.action\"\n  [style.background-color]=\"(options) ? options.color : ''\"\n  >\n  @if (options.icon) {\n    <mat-icon\n      class=\"toast-icon\"\n      [style.color]=\"textColor\"\n      >\n      {{ options.icon }}\n    </mat-icon>\n  }\n\n  <div\n    class=\"toast-message\"\n    [style.color]=\"textColor\"\n    [innerHTML]=\"options.message | safeHtml\"\n    >\n  </div>\n\n  @if (options.action) {\n    <button\n      class=\"toast-action-button\"\n      mat-button\n      (click)=\"onCloseToast(options)\"\n      [style.color]=\"textColor\"\n      >\n      @if (options.action !== '-') {\n        {{ options.action }}\n      } @else {\n        <mat-icon>close</mat-icon>\n      }\n    </button>\n  }\n</div>\n", styles: [".mat-mdc-snack-bar-container .mdc-snackbar__surface{max-width:100%!important;width:100%}.cdk-overlay-pane{width:100%}.cdk-overlay-container{position:fixed;top:0;left:0;width:100%;z-index:1000}.toast-grid-container{display:grid;grid-template-columns:1fr}.toast-grid-container.has-action{grid-template-columns:1fr auto}.toast-grid-container.has-icon{grid-template-columns:minmax(0,44px) 1fr}.toast-grid-container.has-icon.has-action{grid-template-columns:minmax(0,44px) 1fr auto}.toast-grid-container>*{display:inline-flex;overflow:hidden;align-items:center}.toast-icon{margin-top:.25rem;grid-column:1;display:flex;align-items:center;justify-content:center;max-width:44px;overflow:hidden}.toast-message{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;flex-grow:1}.toast-action-button{justify-self:end}\n", ".mat-mdc-snack-bar-container{--mat-snackbar-container-color: var(--toast-bg-color, #fff);--mat-mdc-snack-bar-button-color: var(--toast-text-color, #fff);--mat-snackbar-supporting-text-color: var(--toast-text-color, #000)}\n"], dependencies: [{ kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastUIComponent, deps: [{ token: MAT_SNACK_BAR_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ToastUIComponent, isStandalone: true, selector: "app-toast-ui", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div\n  class=\"toast-grid-container\"\n  [class.has-icon]=\"displayOptions().icon\"\n  [class.has-action]=\"displayOptions().action\"\n  >\n  @if (displayOptions().icon) {\n    <mat-icon\n      class=\"toast-icon\"\n      [style.color]=\"textColor()\"\n      >\n      {{ displayOptions().icon }}\n    </mat-icon>\n  }\n\n  <div\n    class=\"toast-message\"\n    [style.color]=\"textColor()\"\n    [innerHTML]=\"displayOptions().message | safeHtml\"\n    >\n  </div>\n\n  @if (displayOptions().action) {\n    <button\n      class=\"toast-action-button\"\n      mat-button\n      (click)=\"onCloseToast(displayOptions())\"\n      [style.color]=\"textColor()\"\n      >\n      @if (displayOptions().action !== '-') {\n        {{ displayOptions().action }}\n      } @else {\n        <mat-icon>close</mat-icon>\n      }\n    </button>\n  }\n</div>\n", styles: [".mat-mdc-snack-bar-container{--mat-snackbar-container-color: var(--toast-bg-color, #fff);--mat-mdc-snack-bar-button-color: var(--toast-text-color, #fff);--mat-snackbar-supporting-text-color: var(--toast-text-color, #000)}.mat-mdc-snack-bar-container .mdc-snackbar__surface{max-width:100%!important;width:100%}.mat-mdc-snackbar-surface{padding-right:0}.cdk-overlay-pane{width:100%}.cdk-overlay-container{position:fixed;top:0;left:0;width:100%;z-index:1000}.toast-grid-container{display:grid;grid-template-columns:1fr}.toast-grid-container.has-action{grid-template-columns:1fr auto}.toast-grid-container.has-icon{grid-template-columns:minmax(0,44px) 1fr}.toast-grid-container.has-icon.has-action{grid-template-columns:minmax(0,44px) 1fr auto}.toast-grid-container>*{display:inline-flex;overflow:hidden;align-items:center}.toast-icon{margin-top:.25rem;grid-column:1;display:flex;align-items:center;justify-content:center;max-width:44px;overflow:hidden}.toast-message{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;flex-grow:1}.toast-action-button{justify-self:end}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastUIComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastUIComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-toast-ui', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div\n  class=\"toast-grid-container\"\n  [class.has-icon]=\"options.icon\"\n  [class.has-action]=\"options.action\"\n  [style.background-color]=\"(options) ? options.color : ''\"\n  >\n  @if (options.icon) {\n    <mat-icon\n      class=\"toast-icon\"\n      [style.color]=\"textColor\"\n      >\n      {{ options.icon }}\n    </mat-icon>\n  }\n\n  <div\n    class=\"toast-message\"\n    [style.color]=\"textColor\"\n    [innerHTML]=\"options.message | safeHtml\"\n    >\n  </div>\n\n  @if (options.action) {\n    <button\n      class=\"toast-action-button\"\n      mat-button\n      (click)=\"onCloseToast(options)\"\n      [style.color]=\"textColor\"\n      >\n      @if (options.action !== '-') {\n        {{ options.action }}\n      } @else {\n        <mat-icon>close</mat-icon>\n      }\n    </button>\n  }\n</div>\n", styles: [".mat-mdc-snack-bar-container .mdc-snackbar__surface{max-width:100%!important;width:100%}.cdk-overlay-pane{width:100%}.cdk-overlay-container{position:fixed;top:0;left:0;width:100%;z-index:1000}.toast-grid-container{display:grid;grid-template-columns:1fr}.toast-grid-container.has-action{grid-template-columns:1fr auto}.toast-grid-container.has-icon{grid-template-columns:minmax(0,44px) 1fr}.toast-grid-container.has-icon.has-action{grid-template-columns:minmax(0,44px) 1fr auto}.toast-grid-container>*{display:inline-flex;overflow:hidden;align-items:center}.toast-icon{margin-top:.25rem;grid-column:1;display:flex;align-items:center;justify-content:center;max-width:44px;overflow:hidden}.toast-message{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;flex-grow:1}.toast-action-button{justify-self:end}\n", ".mat-mdc-snack-bar-container{--mat-snackbar-container-color: var(--toast-bg-color, #fff);--mat-mdc-snack-bar-button-color: var(--toast-text-color, #fff);--mat-snackbar-supporting-text-color: var(--toast-text-color, #000)}\n"] }]
+            args: [{ selector: 'app-toast-ui', encapsulation: ViewEncapsulation.None, imports: [MatIconModule, MatButtonModule, SafeHtmlPipe], template: "<div\n  class=\"toast-grid-container\"\n  [class.has-icon]=\"displayOptions().icon\"\n  [class.has-action]=\"displayOptions().action\"\n  >\n  @if (displayOptions().icon) {\n    <mat-icon\n      class=\"toast-icon\"\n      [style.color]=\"textColor()\"\n      >\n      {{ displayOptions().icon }}\n    </mat-icon>\n  }\n\n  <div\n    class=\"toast-message\"\n    [style.color]=\"textColor()\"\n    [innerHTML]=\"displayOptions().message | safeHtml\"\n    >\n  </div>\n\n  @if (displayOptions().action) {\n    <button\n      class=\"toast-action-button\"\n      mat-button\n      (click)=\"onCloseToast(displayOptions())\"\n      [style.color]=\"textColor()\"\n      >\n      @if (displayOptions().action !== '-') {\n        {{ displayOptions().action }}\n      } @else {\n        <mat-icon>close</mat-icon>\n      }\n    </button>\n  }\n</div>\n", styles: [".mat-mdc-snack-bar-container{--mat-snackbar-container-color: var(--toast-bg-color, #fff);--mat-mdc-snack-bar-button-color: var(--toast-text-color, #fff);--mat-snackbar-supporting-text-color: var(--toast-text-color, #000)}.mat-mdc-snack-bar-container .mdc-snackbar__surface{max-width:100%!important;width:100%}.mat-mdc-snackbar-surface{padding-right:0}.cdk-overlay-pane{width:100%}.cdk-overlay-container{position:fixed;top:0;left:0;width:100%;z-index:1000}.toast-grid-container{display:grid;grid-template-columns:1fr}.toast-grid-container.has-action{grid-template-columns:1fr auto}.toast-grid-container.has-icon{grid-template-columns:minmax(0,44px) 1fr}.toast-grid-container.has-icon.has-action{grid-template-columns:minmax(0,44px) 1fr auto}.toast-grid-container>*{display:inline-flex;overflow:hidden;align-items:center}.toast-icon{margin-top:.25rem;grid-column:1;display:flex;align-items:center;justify-content:center;max-width:44px;overflow:hidden}.toast-message{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;flex-grow:1}.toast-action-button{justify-self:end}\n"] }]
         }], ctorParameters: () => [{ type: ToastDisplay, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [MAT_SNACK_BAR_DATA]
-                }] }], propDecorators: { close: [{
-                type: Output
-            }], options: [{
-                type: Input
-            }] } });
+                }] }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
 
 var HorizontalAlignment;
 (function (HorizontalAlignment) {
@@ -258,17 +237,6 @@ var VerticalAlignment;
     VerticalAlignment["BOTTOM"] = "bottom";
 })(VerticalAlignment || (VerticalAlignment = {}));
 
-class ToastMessage {
-    constructor(error = '', action = '', icon = 'error') {
-        this.error = error;
-        this.action = action;
-        this.icon = icon;
-    }
-    static adapt(item) {
-        return new ToastMessage(item?.error, item?.action, item?.icon);
-    }
-}
-
 class ToastOptions {
     constructor(duration, horizontalPosition = HorizontalAlignment.CENTER, verticalPosition = VerticalAlignment.TOP, data) {
         this.duration = duration;
@@ -282,24 +250,97 @@ class ToastOptions {
     }
 }
 
+class ToastMessageDisplayService {
+    constructor() {
+        this.snackBar = inject(MatSnackBar);
+        this.toastQueue = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toastQueue" }] : /* istanbul ignore next */ []));
+        this.isToastVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isToastVisible" }] : /* istanbul ignore next */ []));
+        this.defaultDuration = 3;
+    }
+    toastMessage(options = ToastDisplay.adapt(), duration, vertical) {
+        this.toastQueue.update(queue => [...queue, { options, duration, vertical }]);
+        this.showNextToast();
+    }
+    showNextToast() {
+        if (this.isToastVisible() || this.toastQueue().length === 0)
+            return;
+        const queue = this.toastQueue();
+        const { options, duration, vertical } = queue[0];
+        this.toastQueue.set(queue.slice(1));
+        const vertPosition = (vertical) ? vertical : 'top';
+        const durationDismiss = (!options.action) ? this.defaultDuration : duration;
+        const displayOptions = ToastOptions.adapt({
+            duration: durationDismiss,
+            horizontalPosition: 'center',
+            verticalPosition: vertPosition,
+            data: options,
+        });
+        this.isToastVisible.set(true);
+        this.snackBarRef = this.snackBar.openFromComponent(ToastUIComponent, displayOptions);
+        if (this.snackBarRef) {
+            this.snackBarRef
+                .afterDismissed()
+                .subscribe(() => {
+                this.isToastVisible.set(false);
+                this.showNextToast();
+            });
+        }
+        else {
+            console.error('Snackbar reference is undefined. Unable to subscribe to dismissal event.');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageDisplayService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageDisplayService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+function provideToast() {
+    return makeEnvironmentProviders([
+        ToastMessageDisplayService
+    ]);
+}
+
+class ToastMessage {
+    constructor(error = '', action = '', icon = 'error') {
+        this.error = error;
+        this.action = action;
+        this.icon = icon;
+    }
+    static adapt(item) {
+        return new ToastMessage(item?.error, item?.action, item?.icon);
+    }
+}
+
 class ToastMessageInlineComponent {
     constructor() {
-        this.close = new EventEmitter();
+        this.close = output();
         this.textColorService = inject(TextColorService);
         this.toastList = [];
         this.dismissToasts = [];
-        this.duration = -1;
-        this.position = VerticalAlignment.TOP;
-    }
-    set toast(value) {
-        if (!value)
-            return;
-        const toast = ToastDisplay.adapt(value);
-        if (!toast.action) {
-            this.dismissToasts.push(toast);
-            this.expireTime(toast, this.duration);
-        }
-        this.toastList.push(toast);
+        this.toast = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
+        this.duration = input(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+        this.position = input(VerticalAlignment.TOP, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const value = this.toast();
+            if (!value)
+                return;
+            const toast = ToastDisplay.adapt(value);
+            if (!toast.action) {
+                this.dismissToasts.push(toast);
+                this.expireTime(toast, this.duration());
+            }
+            this.toastList.push(toast);
+        });
     }
     get option() {
         return (this.toastList.length > 0) ? this.toastList[0] : null;
@@ -312,7 +353,8 @@ class ToastMessageInlineComponent {
     }
     onCloseToast(toast) {
         this.toastList = this.toastList.filter(item => item.id !== toast?.id);
-        this.close.emit(toast);
+        if (toast)
+            this.close.emit(toast);
     }
     expireTime(toast, duration) {
         if (duration <= 0)
@@ -324,118 +366,131 @@ class ToastMessageInlineComponent {
         this.dismissToasts = this.dismissToasts.filter(t => t.id !== toast.id);
         this.toastList = this.toastList.filter(t => t.id !== toast.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastMessageInlineComponent, selector: "app-toast-message-display-inline", inputs: { toast: "toast", duration: "duration", position: "position" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"toast-inline-list\" [class.position-bottom]=\"position === 'bottom'\">\n  @for (toast of toastList; track toast) {\n    <div [style.background-color]=\"toast.color\" class=\"inline\">\n      <app-toast-ui\n        [options]=\"toast\"\n        class=\"toast-inline-item\"\n        (close)=\"onCloseToast(toast)\"\n      ></app-toast-ui>\n    </div>\n  }\n</div>\n", styles: [".toast-inline-list{display:flex;flex-direction:column;gap:.5rem}.toast-inline-list.position-bottom{flex-direction:column-reverse}.toast-inline-item{flex:1}.inline{padding:.75rem;border-radius:.25rem}\n"], dependencies: [{ kind: "component", type: ToastUIComponent, selector: "app-toast-ui", inputs: ["options"], outputs: ["close"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ToastMessageInlineComponent, isStandalone: true, selector: "app-toast-message-display-inline", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"toast-inline-list\" [class.position-bottom]=\"position() === 'bottom'\">\n  @for (toast of toastList; track toast) {\n    <div [style.background-color]=\"toast.color\" class=\"inline\">\n      <app-toast-ui\n        [options]=\"toast\"\n        class=\"toast-inline-item\"\n        (close)=\"onCloseToast(toast)\"\n      ></app-toast-ui>\n    </div>\n  }\n</div>\n", styles: [".toast-inline-list{display:flex;flex-direction:column;gap:.5rem}.toast-inline-list.position-bottom{flex-direction:column-reverse}.toast-inline-item{flex:1}.inline{padding:.75rem;border-radius:.25rem}\n"], dependencies: [{ kind: "component", type: ToastUIComponent, selector: "app-toast-ui", inputs: ["options"], outputs: ["close"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageInlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageInlineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-toast-message-display-inline', standalone: false, template: "<div class=\"toast-inline-list\" [class.position-bottom]=\"position === 'bottom'\">\n  @for (toast of toastList; track toast) {\n    <div [style.background-color]=\"toast.color\" class=\"inline\">\n      <app-toast-ui\n        [options]=\"toast\"\n        class=\"toast-inline-item\"\n        (close)=\"onCloseToast(toast)\"\n      ></app-toast-ui>\n    </div>\n  }\n</div>\n", styles: [".toast-inline-list{display:flex;flex-direction:column;gap:.5rem}.toast-inline-list.position-bottom{flex-direction:column-reverse}.toast-inline-item{flex:1}.inline{padding:.75rem;border-radius:.25rem}\n"] }]
-        }], propDecorators: { close: [{
-                type: Output
-            }], toast: [{
-                type: Input
-            }], duration: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'app-toast-message-display-inline', encapsulation: ViewEncapsulation.None, imports: [ToastUIComponent, MatIconModule, MatButtonModule, SafeHtmlPipe], template: "<div class=\"toast-inline-list\" [class.position-bottom]=\"position() === 'bottom'\">\n  @for (toast of toastList; track toast) {\n    <div [style.background-color]=\"toast.color\" class=\"inline\">\n      <app-toast-ui\n        [options]=\"toast\"\n        class=\"toast-inline-item\"\n        (close)=\"onCloseToast(toast)\"\n      ></app-toast-ui>\n    </div>\n  }\n</div>\n", styles: [".toast-inline-list{display:flex;flex-direction:column;gap:.5rem}.toast-inline-list.position-bottom{flex-direction:column-reverse}.toast-inline-item{flex:1}.inline{padding:.75rem;border-radius:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { close: [{ type: i0.Output, args: ["close"] }], toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
-class ToastMessageDisplayModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayModule, declarations: [SafeHtmlPipe,
-            ToastUIComponent,
-            ToastMessageInlineComponent], imports: [CommonModule,
-            ReactiveFormsModule,
-            MatIconModule,
-            MatSnackBarModule,
-            MatButtonModule,
-            MatToolbarModule,
-            MatMenuModule,
-            MatRadioModule,
-            MatDividerModule], exports: [ToastUIComponent,
-            ToastMessageInlineComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayModule, imports: [CommonModule,
-            ReactiveFormsModule,
-            MatIconModule,
-            MatSnackBarModule,
-            MatButtonModule,
-            MatToolbarModule,
-            MatMenuModule,
-            MatRadioModule,
-            MatDividerModule] }); }
+class ToastDemoComponent {
+    constructor() {
+        this.random = () => {
+            const typedArray = new Uint8Array(1);
+            const randomValue = crypto.getRandomValues(typedArray)[0];
+            const randomFloat = randomValue / Math.pow(2, 8);
+            return randomFloat;
+        };
+        this.randomNumber = (min, max) => {
+            return Math.floor(this.random() * max) + min;
+        };
+        this.fb = inject(FormBuilder);
+        this.toastMessageDisplayService = inject(ToastMessageDisplayService);
+        this.type = 'Basic';
+        this.position = this.fb.control('top');
+        this.icons = [
+            'favorite_border',
+            'dashboard',
+            'event',
+            'paid',
+            'notifications',
+            'movie_filter',
+        ];
+        this.toastSamples = [
+            {
+                message: `This is a simple toast message. This is a <span style="font-size: 22px">simple toast message</span>. This is a simple toast message. This is a simple toast message`,
+                color: ToastColors.ERROR,
+                action: "Ok"
+            },
+            {
+                message: 'Sample message',
+                color: ToastColors.INFO,
+                icon: this.icons[0]
+            },
+            {
+                message: 'Sample message',
+                color: ToastColors.WARN,
+                icon: this.icons[1]
+            },
+            {
+                message: `This is a simple toast message. This is a <span style="font-size: 22px">simple toast message</span>. This is a simple toast message. This is a simple toast message`,
+                color: ToastColors.NOTIFY,
+                icon: this.icons[2],
+                action: "Dismiss"
+            },
+            {
+                message: 'Sample message',
+                color: ToastColors.GENERAL,
+                action: "Dismiss"
+            },
+            {
+                message: `This is a simple toast message. This is a <span style="font-size: 22px">simple toast message</span>. This is a simple toast message. This is a simple toast message`,
+                color: ToastColors.SUCCESS,
+                action: "-"
+            },
+        ];
+    }
+    onSelectType(type) {
+        this.type = type;
+    }
+    onBasic(type, icon, action) {
+        switch (type) {
+            case 'ERROR':
+                this.presentToast(ToastColors.ERROR, icon, action);
+                break;
+            case 'INFO':
+                this.presentToast(ToastColors.INFO, icon, action);
+                break;
+            case 'WARN':
+                this.presentToast(ToastColors.WARN, icon, action);
+                break;
+            case 'NOTIFY':
+                this.presentToast(ToastColors.NOTIFY, icon, action);
+                break;
+            case 'GENERAL':
+                this.presentToast(ToastColors.GENERAL, icon, action);
+                break;
+            default:
+                this.presentToast(ToastColors.SUCCESS, icon, action);
+                break;
+        }
+    }
+    presentToast(color, icon, action) {
+        const options = ToastDisplay.adapt({
+            message: `This is a simple toast message. <span style="font-size: 22px">simple toast message</span>. This is a simple toast message. This is a simple toast message`,
+            color,
+            icon,
+            action
+        });
+        const toastPosition = (this.position.value === 'top') ? VerticalAlignment.TOP : VerticalAlignment.BOTTOM;
+        this.toastMessageDisplayService.toastMessage(options, -1, toastPosition);
+    }
+    onInline() {
+        const pick = this.randomNumber(0, this.toastSamples.length - 1);
+        this.pickToastSample = this.toastSamples[pick];
+    }
+    onClosedToast(toast) {
+        console.log(toast);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ToastDemoComponent, isStandalone: true, selector: "app-toast-display-demo", ngImport: i0, template: "<mat-toolbar class=\"demo-toolbar\">\n  <div>Toast Message Demo</div>\n  <div class=\"demo-toolbar-title\">\n    <button\n      mat-stroked-button\n      [matMenuTriggerFor]=\"menu\"\n      matIconPrefix\n      >\n      {{ type | titlecase }}\n      <mat-icon>layers</mat-icon>\n    </button>\n  </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n  <button\n    mat-menu-item\n    (click)=\"onSelectType('basic')\"\n    >\n    Basic\n  </button>\n  <button\n    mat-menu-item\n    (click)=\"onSelectType('icon')\"\n    >\n    Icon\n  </button>\n  <button\n    mat-menu-item\n    (click)=\"onSelectType('action')\"\n    >\n    Action\n  </button>\n</mat-menu>\n\n<div class=\"demo-container\">\n  <span>\n    @switch (type) {\n      @case ('icon') {\n        <div>\n          <div class=\"demo-section\">\n            <h3 class=\"demo-title\">Toast with Icon</h3>\n            <div class=\"demo-button-row\">\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('SUCCESS', 'favorite_border')\"\n                >\n                Icon - SUCCESS\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('ERROR', 'dashboard')\"\n                >\n                Icon - ERROR\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('INFO', 'event')\"\n                >\n                Icon - INFO\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN', 'paid')\"\n                >\n                Icon - WARN\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN', 'notifications')\"\n                >\n                Icon - NOTIFY\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN', 'movie_filter')\"\n                >\n                Icon - GENERAL\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      @case ('action') {\n        <div>\n          <div class=\"demo-section\">\n            <h3 class=\"demo-title\">Toast with Icon and Action</h3>\n            <div class=\"demo-button-row\">\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('SUCCESS', 'favorite_border', 'Dismiss')\"\n                >\n                Action - SUCCESS\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('ERROR', 'dashboard', 'Dismiss')\"\n                >\n                Action - ERROR\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('INFO', 'event', 'Dismiss')\"\n                >\n                Action - INFO\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN', 'paid', 'Dismiss')\"\n                >\n                Action - WARN\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('NOTIFY', 'notifications', 'Dismiss')\"\n                >\n                Action - NOTIFY\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('GENERAL', 'movie_filter', 'Dismiss')\"\n                >\n                Action - GENERAL\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      @default {\n        <div>\n          <div class=\"demo-section\">\n            <h3 class=\"demo-title\">Basic Toast</h3>\n            <div class=\"demo-button-row\">\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('SUCCESS')\"\n                >\n                Basic - SUCCESS\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('ERROR')\"\n                >\n                Basic - ERROR\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('INFO')\"\n                >\n                Basic - INFO\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN')\"\n                >\n                Basic - WARN\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('NOTIFY')\"\n                >\n                Basic - NOTIFY\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('GENERAL')\"\n                >\n                Basic - GENERAL\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    }\n  </span>\n  <div class=\"demo-position-controls\">\n    <mat-radio-group [formControl]=\"position\" class=\"demo-radio-group\">\n      <mat-radio-button value=\"top\">Top Position</mat-radio-button>\n      <mat-radio-button value=\"bottom\">Bottom Position</mat-radio-button>\n    </mat-radio-group>\n  </div>\n</div>\n\n<div class=\"demo-divider\">\n  <mat-divider></mat-divider>\n</div>\n\n<div class=\"demo-container\">\n  <button mat-stroked-button (click)=\"onInline()\" class=\"demo-inline-button\">\n    Add Inline Toast Message\n  </button>\n  <app-toast-message-display-inline\n    [toast]=\"pickToastSample\"\n    [duration]=\"5\"\n    (close)=\"onClosedToast($event)\"\n  ></app-toast-message-display-inline>\n</div>\n", styles: [".bold{font-size:22px;font-weight:700}.demo-toolbar{display:flex}.demo-toolbar-title{flex:1;text-align:end}.demo-container{margin:1rem}.demo-section{display:flex;gap:1rem;flex-direction:column}.demo-title{flex:1;margin-bottom:0}.demo-button-row{display:flex;gap:.5rem}.demo-position-controls{display:flex;margin-top:1rem}.demo-radio-group{display:flex;gap:2rem}.demo-divider{margin-top:1rem;margin-bottom:1rem}.demo-inline-button{margin-bottom:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ToastMessageInlineComponent, selector: "app-toast-message-display-inline", inputs: ["toast", "duration", "position"], outputs: ["close"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-toast-display-demo', imports: [
+                        TitleCasePipe,
                         ReactiveFormsModule,
+                        MatToolbarModule,
                         MatIconModule,
-                        MatSnackBarModule,
                         MatButtonModule,
-                        MatToolbarModule,
                         MatMenuModule,
                         MatRadioModule,
+                        MatSnackBarModule,
                         MatDividerModule,
-                    ],
-                    declarations: [
-                        SafeHtmlPipe,
-                        ToastUIComponent,
                         ToastMessageInlineComponent,
-                    ],
-                    exports: [
-                        ToastUIComponent,
-                        ToastMessageInlineComponent,
-                    ],
-                }]
-        }] });
-
-class ToastMessageDisplayService {
-    constructor() {
-        this.snackBar = inject(MatSnackBar);
-        this.toastQueue = [];
-        this.isToastVisible = false;
-        this.defaultDuration = 3;
-    }
-    toastMessage(options = ToastDisplay.adapt(), duration, vertical) {
-        this.toastQueue.push({ options, duration, vertical });
-        this.showNextToast();
-    }
-    showNextToast() {
-        if (this.isToastVisible || this.toastQueue.length === 0)
-            return;
-        const { options, duration, vertical } = this.toastQueue.shift();
-        const vertPosition = (vertical) ? vertical : 'top';
-        const durationDismiss = (!options.action) ? this.defaultDuration : duration;
-        const displayOptions = ToastOptions.adapt({
-            duration: durationDismiss,
-            horizontalPosition: 'center',
-            verticalPosition: vertPosition,
-            data: options,
-        });
-        this.isToastVisible = true;
-        this.snackBarRef = this.snackBar.openFromComponent(ToastUIComponent, displayOptions);
-        if (this.snackBarRef) {
-            this.snackBarRef
-                .afterDismissed()
-                .pipe(take(1))
-                .subscribe(() => {
-                this.isToastVisible = false;
-                this.showNextToast();
-            });
-        }
-        else {
-            console.error('Snackbar reference is undefined. Unable to subscribe to dismissal event.');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+                        SafeHtmlPipe
+                    ], template: "<mat-toolbar class=\"demo-toolbar\">\n  <div>Toast Message Demo</div>\n  <div class=\"demo-toolbar-title\">\n    <button\n      mat-stroked-button\n      [matMenuTriggerFor]=\"menu\"\n      matIconPrefix\n      >\n      {{ type | titlecase }}\n      <mat-icon>layers</mat-icon>\n    </button>\n  </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n  <button\n    mat-menu-item\n    (click)=\"onSelectType('basic')\"\n    >\n    Basic\n  </button>\n  <button\n    mat-menu-item\n    (click)=\"onSelectType('icon')\"\n    >\n    Icon\n  </button>\n  <button\n    mat-menu-item\n    (click)=\"onSelectType('action')\"\n    >\n    Action\n  </button>\n</mat-menu>\n\n<div class=\"demo-container\">\n  <span>\n    @switch (type) {\n      @case ('icon') {\n        <div>\n          <div class=\"demo-section\">\n            <h3 class=\"demo-title\">Toast with Icon</h3>\n            <div class=\"demo-button-row\">\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('SUCCESS', 'favorite_border')\"\n                >\n                Icon - SUCCESS\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('ERROR', 'dashboard')\"\n                >\n                Icon - ERROR\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('INFO', 'event')\"\n                >\n                Icon - INFO\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN', 'paid')\"\n                >\n                Icon - WARN\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN', 'notifications')\"\n                >\n                Icon - NOTIFY\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN', 'movie_filter')\"\n                >\n                Icon - GENERAL\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      @case ('action') {\n        <div>\n          <div class=\"demo-section\">\n            <h3 class=\"demo-title\">Toast with Icon and Action</h3>\n            <div class=\"demo-button-row\">\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('SUCCESS', 'favorite_border', 'Dismiss')\"\n                >\n                Action - SUCCESS\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('ERROR', 'dashboard', 'Dismiss')\"\n                >\n                Action - ERROR\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('INFO', 'event', 'Dismiss')\"\n                >\n                Action - INFO\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN', 'paid', 'Dismiss')\"\n                >\n                Action - WARN\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('NOTIFY', 'notifications', 'Dismiss')\"\n                >\n                Action - NOTIFY\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('GENERAL', 'movie_filter', 'Dismiss')\"\n                >\n                Action - GENERAL\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      @default {\n        <div>\n          <div class=\"demo-section\">\n            <h3 class=\"demo-title\">Basic Toast</h3>\n            <div class=\"demo-button-row\">\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('SUCCESS')\"\n                >\n                Basic - SUCCESS\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('ERROR')\"\n                >\n                Basic - ERROR\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('INFO')\"\n                >\n                Basic - INFO\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('WARN')\"\n                >\n                Basic - WARN\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('NOTIFY')\"\n                >\n                Basic - NOTIFY\n              </button>\n              <button\n                mat-stroked-button\n                (click)=\"onBasic('GENERAL')\"\n                >\n                Basic - GENERAL\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    }\n  </span>\n  <div class=\"demo-position-controls\">\n    <mat-radio-group [formControl]=\"position\" class=\"demo-radio-group\">\n      <mat-radio-button value=\"top\">Top Position</mat-radio-button>\n      <mat-radio-button value=\"bottom\">Bottom Position</mat-radio-button>\n    </mat-radio-group>\n  </div>\n</div>\n\n<div class=\"demo-divider\">\n  <mat-divider></mat-divider>\n</div>\n\n<div class=\"demo-container\">\n  <button mat-stroked-button (click)=\"onInline()\" class=\"demo-inline-button\">\n    Add Inline Toast Message\n  </button>\n  <app-toast-message-display-inline\n    [toast]=\"pickToastSample\"\n    [duration]=\"5\"\n    (close)=\"onClosedToast($event)\"\n  ></app-toast-message-display-inline>\n</div>\n", styles: [".bold{font-size:22px;font-weight:700}.demo-toolbar{display:flex}.demo-toolbar-title{flex:1;text-align:end}.demo-container{margin:1rem}.demo-section{display:flex;gap:1rem;flex-direction:column}.demo-title{flex:1;margin-bottom:0}.demo-button-row{display:flex;gap:.5rem}.demo-position-controls{display:flex;margin-top:1rem}.demo-radio-group{display:flex;gap:2rem}.demo-divider{margin-top:1rem;margin-bottom:1rem}.demo-inline-button{margin-bottom:2rem}\n"] }]
         }] });
 
 /*
@@ -446,5 +501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { HorizontalAlignment, ToastColors, ToastDisplay, ToastMessage, ToastMessageDisplayModule, ToastMessageDisplayService, ToastMessageInlineComponent, ToastOptions, ToastUIComponent, VerticalAlignment };
+export { HorizontalAlignment, ToastColors, ToastDemoComponent, ToastDisplay, ToastMessage, ToastMessageDisplayService, ToastMessageInlineComponent, ToastOptions, ToastUIComponent, VerticalAlignment, provideToast };
 //# sourceMappingURL=toast-message-display.mjs.map