@acorex/components 21.0.1-next.3 → 21.0.1-next.4

package/fesm2022/acorex-components-toast.mjs

@@ -1,11 +1,10 @@
 import { MXBaseComponent, AXClosableComponent, AXComponent } from '@acorex/cdk/common';
 import { AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXTranslationService, AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { Dialog, DIALOG_DATA, DialogRef, DialogModule } from '@angular/cdk/dialog';
 import { AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, Injectable, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { ScrollStrategyOptions, GlobalPositionStrategy } from '@angular/cdk/overlay';
+import { InjectionToken, inject, signal, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { AXOverlayService } from '@acorex/cdk/overlay';
 import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
 import { set } from 'lodash-es';
 import { AXButtonModule } from '@acorex/components/button';
@@ -35,18 +34,17 @@ function toastConfig(config = {}) {
     return result;
 }
 
+let toastIdCounter = 0;
 class AXToastService {
     constructor() {
-        this.scrollStrategyOptions = inject(ScrollStrategyOptions);
-        this.dialog = inject(Dialog);
+        this.overlayService = inject(AXOverlayService);
         this.defaultConfig = inject(AX_TOAST_CONFIG);
         this.translationService = inject(AXTranslationService);
         this.reserveCounter = signal(0, ...(ngDevMode ? [{ debugName: "reserveCounter" }] : []));
         this.activeToasts = signal([], ...(ngDevMode ? [{ debugName: "activeToasts" }] : []));
         this.reservedToasts = signal([], ...(ngDevMode ? [{ debugName: "reservedToasts" }] : []));
-        this.toastCounterElement = signal(null, ...(ngDevMode ? [{ debugName: "toastCounterElement" }] : []));
+        this.toastCounterRef = signal(null, ...(ngDevMode ? [{ debugName: "toastCounterRef" }] : []));
         this.moreToastsConfig = signal({ color: 'primary', location: 'bottom-center' }, ...(ngDevMode ? [{ debugName: "moreToastsConfig" }] : []));
-        this.scrollStrategy = this.scrollStrategyOptions.noop();
     }
     /**
      * Shows a primary toast notification.
@@ -148,35 +146,63 @@ class AXToastService {
     }
     displayToast(config) {
         const gap = this.defaultConfig.gap;
-        const pos = this.getPosition(config.location) + gap + 'px';
-        const positionStrategy = this.getPositionStrategy(new GlobalPositionStrategy(), config.location, pos, gap);
-        const dialogRef = this.dialog.open(AXToastComponent, {
-            data: config,
-            autoFocus: '__no_element__',
-            restoreFocus: true,
-            role: 'dialog',
-            ariaModal: true,
-            closeOnNavigation: true,
-            closeOnDestroy: true,
-            hasBackdrop: false,
+        const toastData = {
+            icon: config.icon,
+            title: config.title,
+            content: config.content,
+            location: config.location,
+            closeButton: config.closeButton ?? true,
+            color: config.color,
+            timeOut: config.timeOut,
+            timeOutProgress: config.timeOutProgress ?? true,
+            pauseOnHover: config.pauseOnHover,
+        };
+        const toastId = `toast-${++toastIdCounter}`;
+        let internalRef;
+        const closeToast = () => {
+            if (internalRef) {
+                internalRef.overlayRef.dispose();
+                this.activeToasts.set(this.activeToasts().filter((t) => t.id !== internalRef.id));
+                this.handleShowReservedToast();
+                this.handleReservedToastCounter();
+                setTimeout(() => {
+                    this.reposition(config.location, gap);
+                });
+            }
+        };
+        this.overlayService
+            .create(AXToastComponent, {
+            inputs: {
+                config: toastData,
+                onClose: closeToast,
+            },
+            centered: false,
             panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
-            positionStrategy,
-            scrollStrategy: this.scrollStrategy,
-        });
-        this.activeToasts.update((prev) => [...prev, dialogRef.id]);
-        this.handleReservedToastCounter();
-        const toastRef = dialogRef.componentInstance;
-        dialogRef.closed.subscribe(() => {
-            this.activeToasts.set(this.activeToasts().filter((id) => id !== dialogRef.id));
-            this.handleShowReservedToast();
+            onDispose: () => {
+                // Clean up when disposed externally
+                const currentToasts = this.activeToasts();
+                if (internalRef && currentToasts.find((t) => t.id === internalRef.id)) {
+                    this.activeToasts.set(currentToasts.filter((t) => t.id !== internalRef.id));
+                    this.handleShowReservedToast();
+                    this.handleReservedToastCounter();
+                }
+            },
+        })
+            .then((overlayRef) => {
+            internalRef = {
+                id: toastId,
+                overlayRef,
+                config: toastData,
+                close: closeToast,
+            };
+            // Position the toast BEFORE adding to activeToasts (so getPosition calculates correctly)
+            this.positionToast(overlayRef.overlayElement, config.location, gap);
+            this.activeToasts.update((prev) => [...prev, internalRef]);
             this.handleReservedToastCounter();
-            setTimeout(() => {
-                this.reposition(config.location, gap);
-            });
         });
         return {
             close: () => {
-                toastRef.close();
+                closeToast();
             },
         };
     }
@@ -186,8 +212,17 @@ class AXToastService {
     hideAll() {
         this.reserveCounter.set(0);
         this.reservedToasts.set([]);
+        // Close all active toasts
+        this.activeToasts().forEach((toast) => {
+            toast.overlayRef.dispose();
+        });
         this.activeToasts.set([]);
-        this.dialog.closeAll();
+        // Close counter toast if exists
+        const counterRef = this.toastCounterRef();
+        if (counterRef) {
+            counterRef.overlayRef.dispose();
+            this.toastCounterRef.set(null);
+        }
         this.handleReservedToastCounter();
     }
     handleShowReservedToast() {
@@ -195,29 +230,37 @@ class AXToastService {
             return;
         if (!this.reservedToasts().length)
             return;
-        const { config, reservedRef } = this.reservedToasts().shift();
-        const displayedRef = this.displayToast(config);
+        const reserved = this.reservedToasts()[0];
+        this.reservedToasts.update((prev) => prev.slice(1));
+        const displayedRef = this.displayToast(reserved.config);
         this.handleReservedToastCounter();
-        reservedRef.close = displayedRef.close;
+        reserved.reservedRef.close = displayedRef.close;
     }
     handleReservedToastCounter() {
         const reservedCount = this.reservedToasts().length;
         if (reservedCount === this.reserveCounter())
             return;
         this.reserveCounter.set(reservedCount);
-        if (reservedCount === 0 && this.toastCounterElement() !== null) {
-            this.toastCounterElement().close();
+        if (reservedCount === 0 && this.toastCounterRef() !== null) {
+            this.toastCounterRef().close();
+            this.toastCounterRef.set(null);
             return;
         }
         if (reservedCount > 0) {
-            if (this.toastCounterElement() !== null) {
-                this.toastCounterElement().close();
+            if (this.toastCounterRef() !== null) {
+                this.toastCounterRef().close();
+                this.toastCounterRef.set(null);
+            }
+            const firstToast = this.activeToasts()[0];
+            if (firstToast) {
+                const toastComponent = firstToast.overlayRef.instance.instance;
+                const remainingTime = toastComponent.createdDate();
+                this.createReservedCounterToast(remainingTime);
             }
-            const remainingTime = this.dialog.getDialogById(this.activeToasts()[0]).componentRef.instance.createdDate();
-            this.createReservedCounterToast(remainingTime);
         }
     }
     async createReservedCounterToast(remainingTime) {
+        const gap = this.defaultConfig.gap;
         const timeOut = Math.min(this.moreToastsConfig().timeOut - (new Date().getTime() - remainingTime), this.moreToastsConfig().timeOut);
         const opt = {
             closeButton: false,
@@ -230,88 +273,156 @@ class AXToastService {
             timeOutProgress: this.moreToastsConfig().timeOutProgress,
             closeAllButton: true,
         };
-        const gap = this.defaultConfig.gap;
-        const pos = this.getPosition(opt.location) + gap + 'px';
-        const positionStrategy = this.getPositionStrategy(new GlobalPositionStrategy(), opt.location, pos, gap);
-        const dialogRef = this.dialog.open(AXToastComponent, {
-            data: opt,
-            autoFocus: '__no_element__',
-            restoreFocus: true,
-            role: 'dialog',
-            ariaModal: true,
-            closeOnNavigation: true,
-            closeOnDestroy: true,
-            hasBackdrop: false,
+        const toastId = `toast-counter-${++toastIdCounter}`;
+        let counterInternalRef;
+        const closeCounter = () => {
+            if (counterInternalRef) {
+                counterInternalRef.overlayRef.dispose();
+                if (this.toastCounterRef()?.id === counterInternalRef.id) {
+                    this.toastCounterRef.set(null);
+                }
+            }
+        };
+        const overlayRef = await this.overlayService.create(AXToastComponent, {
+            inputs: {
+                config: opt,
+                onClose: closeCounter,
+            },
+            centered: false,
             panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
-            positionStrategy,
-            scrollStrategy: this.scrollStrategy,
         });
-        this.toastCounterElement.set(dialogRef.componentInstance);
-    }
-    reposition(toastLocation, gap) {
-        const list = this.dialog.openDialogs
-            .map((c) => c.componentInstance)
-            .filter((c) => c.config?.location == toastLocation);
-        list.forEach((element, index) => {
-            const pos = this.getRepositionPosition(index, gap, list, toastLocation);
-            this.getPositionStrategy(element.dialogRef.config.positionStrategy, toastLocation, pos, gap).apply();
-        });
-    }
-    getRepositionPosition(index, gap, list, toastLocation) {
-        if (index === 0)
-            return gap + 'px';
-        const previouseElement = list[index - 1];
-        if (toastLocation.split('-')[0] == 'bottom') {
-            return window.innerHeight - previouseElement.getHostElement().offsetTop + gap + 'px';
-        }
-        return previouseElement.getHostElement().offsetTop + previouseElement.getHostElement().offsetHeight + gap + 'px';
-    }
-    getPosition(location) {
-        const list = this.dialog.openDialogs
-            .map((c) => c.componentInstance)
-            .filter((c) => c.config?.location == location);
-        if (list.length == 0)
-            return 0;
-        if (location.split('-')[0] == 'bottom') {
-            return window.innerHeight - list[list.length - 1].getHostElement().offsetTop;
-        }
-        return list[list.length - 1].getHostElement().offsetTop + list[list.length - 1].getHostElement().offsetHeight;
+        counterInternalRef = {
+            id: toastId,
+            overlayRef,
+            config: opt,
+            close: closeCounter,
+        };
+        this.toastCounterRef.set(counterInternalRef);
+        // Position the counter toast
+        this.positionToast(overlayRef.overlayElement, opt.location, gap);
     }
-    getPositionStrategy(positionStrategy, location, pos, gap) {
+    positionToast(element, location, gap) {
+        if (!element)
+            return;
+        const pos = this.getPosition(location) + gap;
+        // Override the centered overlay container styles for toast positioning
+        element.style.width = 'max-content';
+        element.style.height = 'auto';
+        element.style.display = 'block';
+        element.style.alignItems = '';
+        element.style.justifyContent = '';
+        // Reset all positioning styles
+        element.style.top = '';
+        element.style.bottom = '';
+        element.style.left = '';
+        element.style.right = '';
+        element.style.transform = '';
+        // Apply position based on location
         switch (location) {
             case 'bottom-center':
-                return positionStrategy.bottom(pos).centerHorizontally();
+                element.style.bottom = pos + 'px';
+                element.style.left = '50%';
+                element.style.transform = 'translateX(-50%)';
                 break;
             case 'bottom-end':
-                return positionStrategy.bottom(pos).right(gap + 'px');
+                element.style.bottom = pos + 'px';
+                element.style.right = gap + 'px';
                 break;
             case 'bottom-start':
-                return positionStrategy.bottom(pos).left(gap + 'px');
+                element.style.bottom = pos + 'px';
+                element.style.left = gap + 'px';
                 break;
             case 'top-center':
-                return positionStrategy.top(pos).centerHorizontally();
+                element.style.top = pos + 'px';
+                element.style.left = '50%';
+                element.style.transform = 'translateX(-50%)';
                 break;
             case 'top-end':
-                return positionStrategy.top(pos).right(gap + 'px');
+                element.style.top = pos + 'px';
+                element.style.right = gap + 'px';
                 break;
             case 'top-start':
-                return positionStrategy.top(pos).left(gap + 'px');
+                element.style.top = pos + 'px';
+                element.style.left = gap + 'px';
                 break;
             case 'center-start':
-                return positionStrategy.centerVertically().left(gap + 'px');
+                element.style.top = '50%';
+                element.style.left = gap + 'px';
+                element.style.transform = 'translateY(-50%)';
                 break;
             case 'center-end':
-                return positionStrategy.centerVertically().right(gap + 'px');
+                element.style.top = '50%';
+                element.style.right = gap + 'px';
+                element.style.transform = 'translateY(-50%)';
                 break;
         }
     }
+    reposition(toastLocation, gap) {
+        const list = this.activeToasts().filter((t) => t.config?.location === toastLocation);
+        list.forEach((toast, index) => {
+            const element = toast.overlayRef.overlayElement;
+            if (!element)
+                return;
+            const pos = this.getRepositionPosition(index, gap, list, toastLocation);
+            this.applyRepositionPosition(element, toastLocation, pos, gap);
+        });
+    }
+    getRepositionPosition(index, gap, list, toastLocation) {
+        if (index === 0)
+            return gap;
+        const previousToast = list[index - 1];
+        const previousElement = previousToast.overlayRef.overlayElement;
+        if (!previousElement)
+            return gap;
+        if (toastLocation.split('-')[0] === 'bottom') {
+            return window.innerHeight - previousElement.offsetTop + gap;
+        }
+        return previousElement.offsetTop + previousElement.offsetHeight + gap;
+    }
+    applyRepositionPosition(element, location, pos, gap) {
+        // Reset transform if needed, then apply position
+        const isVerticalCenter = location === 'center-start' || location === 'center-end';
+        const isHorizontalCenter = location === 'bottom-center' || location === 'top-center';
+        if (location.startsWith('bottom')) {
+            element.style.bottom = pos + 'px';
+            element.style.top = '';
+            if (isHorizontalCenter) {
+                element.style.transform = 'translateX(-50%)';
+            }
+        }
+        else if (location.startsWith('top')) {
+            element.style.top = pos + 'px';
+            element.style.bottom = '';
+            if (isHorizontalCenter) {
+                element.style.transform = 'translateX(-50%)';
+            }
+        }
+        else if (isVerticalCenter) {
+            element.style.top = pos + 'px';
+            element.style.bottom = '';
+            element.style.transform = '';
+        }
+    }
+    getPosition(location) {
+        const list = this.activeToasts().filter((t) => t.config?.location === location);
+        if (list.length === 0)
+            return 0;
+        const lastToast = list[list.length - 1];
+        const element = lastToast.overlayRef.overlayElement;
+        if (!element)
+            return 0;
+        if (location.split('-')[0] === 'bottom') {
+            return window.innerHeight - element.offsetTop;
+        }
+        return element.offsetTop + element.offsetHeight;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
@@ -321,8 +432,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class AXToastComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.config = inject(DIALOG_DATA);
-        this.dialogRef = inject(DialogRef);
+        /** Toast configuration data */
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        /** @internal Callback function to close the toast */
+        this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
         this.toastService = inject(AXToastService);
         this.createdDate = signal(0, ...(ngDevMode ? [{ debugName: "createdDate" }] : []));
         this.isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
@@ -336,10 +449,10 @@ class AXToastComponent extends MXBaseComponent {
         super.ngOnInit();
         this._initIcon();
         this.createdDate.set(new Date().getTime());
-        this.remainingTime.set(this.config.timeOut);
+        this.remainingTime.set(this.config().timeOut);
         this._handleTimeOut();
         this.getHostElement().addEventListener('pointerenter', () => {
-            if (!this.config.pauseOnHover)
+            if (!this.config().pauseOnHover)
                 return;
             if (this.isPaused())
                 return;
@@ -348,7 +461,7 @@ class AXToastComponent extends MXBaseComponent {
             this.pauseAnimation();
         });
         this.getHostElement().addEventListener('pointerleave', () => {
-            if (!this.config.pauseOnHover)
+            if (!this.config().pauseOnHover)
                 return;
             if (!this.isPaused())
                 return;
@@ -361,7 +474,7 @@ class AXToastComponent extends MXBaseComponent {
         clearInterval(this.intervalId);
     }
     _handleTimeOut() {
-        if (this.config.timeOut) {
+        if (this.config().timeOut) {
             this.intervalId = setInterval(() => {
                 this.remainingTime.update((prev) => prev - this.transitionDuration());
                 if (this.remainingTime() <= 0) {
@@ -372,8 +485,8 @@ class AXToastComponent extends MXBaseComponent {
         }
     }
     _initIcon() {
-        if (!this.config.icon) {
-            switch (this.config.color) {
+        if (!this.config().icon) {
+            switch (this.config().color) {
                 case 'success':
                     this._icon = 'ax-icon ax-icon-check-circle';
                     break;
@@ -384,12 +497,12 @@ class AXToastComponent extends MXBaseComponent {
                     this._icon = 'ax-icon ax-icon-error';
                     break;
                 default:
-                    this._icon = this.config.icon || 'ax-icon ax-icon-info';
+                    this._icon = this.config().icon || 'ax-icon ax-icon-info';
                     break;
             }
         }
         else {
-            this._icon = this.config.icon;
+            this._icon = this.config().icon;
         }
     }
     /** @ignore */
@@ -398,18 +511,14 @@ class AXToastComponent extends MXBaseComponent {
             button.onClick({ source: button });
         }
     }
-    /** @ignore */
-    get __hostClass() {
-        return `ax-${this.config.color}`;
-    }
     /**
      * Closes the toast notification.
      */
     close() {
-        this.dialogRef.close({
-            component: this,
-            htmlElement: this.getHostElement(),
-        });
+        const closeCallback = this.onClose();
+        if (closeCallback) {
+            closeCallback();
+        }
     }
     /**
      * Closes all toast notifications.
@@ -418,27 +527,26 @@ class AXToastComponent extends MXBaseComponent {
         this.toastService.hideAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXToastComponent, isStandalone: true, selector: "ax-toast", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXToastComponent, isStandalone: true, selector: "ax-toast", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"ax-\" + config().color" } }, providers: [
             { provide: AXClosableComponent, useExisting: AXToastComponent },
             { provide: AXComponent, useExisting: AXToastComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">\n    {{ config.title | translate | async }}\n  </div>\n  <div>{{ config.content | translate | async }}</div>\n</div>\n@if (config.closeButton) {\n  <ax-close-button></ax-close-button>\n} @else if (config.closeAllButton) {\n  <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut) {\n  <div\n    class=\"ax-toast-progress\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n  ></div>\n}\n", styles: ["ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-darkest-surface)}.ax-dark ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-toast.ax-primary{--ax-comp-toast-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-primary-darker-surface)}ax-toast.ax-secondary{--ax-comp-toast-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-secondary-darker-surface)}ax-toast.ax-success{--ax-comp-toast-bg-color: var(--ax-sys-color-success-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-success-darker-surface)}ax-toast.ax-warning{--ax-comp-toast-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-warning-darker-surface)}ax-toast.ax-danger{--ax-comp-toast-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-danger-darker-surface)}ax-toast.ax-accent1{--ax-comp-toast-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent1-darker-surface)}ax-toast.ax-accent2{--ax-comp-toast-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent2-darker-surface)}ax-toast.ax-accent3{--ax-comp-toast-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent3-darker-surface)}ax-toast.ax-accent4{--ax-comp-toast-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent4-darker-surface)}ax-toast.ax-accent5{--ax-comp-toast-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent5-darker-surface)}ax-toast.ax-accent6{--ax-comp-toast-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent6-darker-surface)}ax-toast.ax-accent7{--ax-comp-toast-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent7-darker-surface)}ax-toast{position:relative;display:flex;width:98vw;overflow:hidden;padding:.75rem 1rem;--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);color:rgba(var(--ax-comp-toast-text-color));background-color:rgba(var(--ax-comp-toast-bg-color));font-size:var(--ax-comp-toast-font-size, .875rem);line-height:var(--ax-comp-toast-line-height, 1.25rem);border-radius:var(--ax-comp-toast-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-toast{width:24rem}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem;max-width:fit-content;align-items:start}ax-toast .ax-toast-icon{margin-inline-end:.5rem}ax-toast .ax-toast-content{display:flex;flex:1 1 0%;flex-direction:column}ax-toast .ax-toast-content .ax-toast-title{font-weight:500;line-height:1.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.75rem;margin-bottom:.75rem;display:flex;gap:.5rem}ax-toast ax-icon-close{height:fit-content}ax-toast ax-icon-close:hover{opacity:.75}ax-toast .ax-toast-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-toast-progress-bg-color, 255, 255, 255, .46))}\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config().title && config().content\">\n    {{ config().title | translate | async }}\n  </div>\n  <div>{{ config().content | translate | async }}</div>\n</div>\n@if (config().closeButton) {\n  <ax-close-button></ax-close-button>\n} @else if (config().closeAllButton) {\n  <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config().timeOutProgress && config().timeOut) {\n  <div\n    class=\"ax-toast-progress\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config().timeOut + '%'\"\n  ></div>\n}\n", styles: ["ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-darkest-surface)}.ax-dark ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-toast.ax-primary{--ax-comp-toast-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-primary-darker-surface)}ax-toast.ax-secondary{--ax-comp-toast-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-secondary-darker-surface)}ax-toast.ax-success{--ax-comp-toast-bg-color: var(--ax-sys-color-success-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-success-darker-surface)}ax-toast.ax-warning{--ax-comp-toast-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-warning-darker-surface)}ax-toast.ax-danger{--ax-comp-toast-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-danger-darker-surface)}ax-toast.ax-accent1{--ax-comp-toast-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent1-darker-surface)}ax-toast.ax-accent2{--ax-comp-toast-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent2-darker-surface)}ax-toast.ax-accent3{--ax-comp-toast-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent3-darker-surface)}ax-toast.ax-accent4{--ax-comp-toast-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent4-darker-surface)}ax-toast.ax-accent5{--ax-comp-toast-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent5-darker-surface)}ax-toast.ax-accent6{--ax-comp-toast-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent6-darker-surface)}ax-toast.ax-accent7{--ax-comp-toast-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent7-darker-surface)}ax-toast{position:relative;display:flex;width:98vw;overflow:hidden;padding:.75rem 1rem;--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);color:rgba(var(--ax-comp-toast-text-color));background-color:rgba(var(--ax-comp-toast-bg-color));font-size:var(--ax-comp-toast-font-size, .875rem);line-height:var(--ax-comp-toast-line-height, 1.25rem);border-radius:var(--ax-comp-toast-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-toast{width:24rem}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem;max-width:fit-content;align-items:start}ax-toast .ax-toast-icon{margin-inline-end:.5rem}ax-toast .ax-toast-content{display:flex;flex:1 1 0%;flex-direction:column}ax-toast .ax-toast-content .ax-toast-title{font-weight:500;line-height:1.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.75rem;margin-bottom:.75rem;display:flex;gap:.5rem}ax-toast ax-icon-close{height:fit-content}ax-toast ax-icon-close:hover{opacity:.75}ax-toast .ax-toast-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-toast-progress-bg-color, 255, 255, 255, .46))}\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': '"ax-" + config().color',
+                    }, providers: [
                         { provide: AXClosableComponent, useExisting: AXToastComponent },
                         { provide: AXComponent, useExisting: AXToastComponent },
-                    ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe], template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config.title && config.content\">\n    {{ config.title | translate | async }}\n  </div>\n  <div>{{ config.content | translate | async }}</div>\n</div>\n@if (config.closeButton) {\n  <ax-close-button></ax-close-button>\n} @else if (config.closeAllButton) {\n  <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut) {\n  <div\n    class=\"ax-toast-progress\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n  ></div>\n}\n", styles: ["ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-darkest-surface)}.ax-dark ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-toast.ax-primary{--ax-comp-toast-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-primary-darker-surface)}ax-toast.ax-secondary{--ax-comp-toast-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-secondary-darker-surface)}ax-toast.ax-success{--ax-comp-toast-bg-color: var(--ax-sys-color-success-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-success-darker-surface)}ax-toast.ax-warning{--ax-comp-toast-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-warning-darker-surface)}ax-toast.ax-danger{--ax-comp-toast-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-danger-darker-surface)}ax-toast.ax-accent1{--ax-comp-toast-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent1-darker-surface)}ax-toast.ax-accent2{--ax-comp-toast-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent2-darker-surface)}ax-toast.ax-accent3{--ax-comp-toast-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent3-darker-surface)}ax-toast.ax-accent4{--ax-comp-toast-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent4-darker-surface)}ax-toast.ax-accent5{--ax-comp-toast-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent5-darker-surface)}ax-toast.ax-accent6{--ax-comp-toast-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent6-darker-surface)}ax-toast.ax-accent7{--ax-comp-toast-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent7-darker-surface)}ax-toast{position:relative;display:flex;width:98vw;overflow:hidden;padding:.75rem 1rem;--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);color:rgba(var(--ax-comp-toast-text-color));background-color:rgba(var(--ax-comp-toast-bg-color));font-size:var(--ax-comp-toast-font-size, .875rem);line-height:var(--ax-comp-toast-line-height, 1.25rem);border-radius:var(--ax-comp-toast-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-toast{width:24rem}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem;max-width:fit-content;align-items:start}ax-toast .ax-toast-icon{margin-inline-end:.5rem}ax-toast .ax-toast-content{display:flex;flex:1 1 0%;flex-direction:column}ax-toast .ax-toast-content .ax-toast-title{font-weight:500;line-height:1.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.75rem;margin-bottom:.75rem;display:flex;gap:.5rem}ax-toast ax-icon-close{height:fit-content}ax-toast ax-icon-close:hover{opacity:.75}ax-toast .ax-toast-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-toast-progress-bg-color, 255, 255, 255, .46))}\n"] }]
-        }], propDecorators: { __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                    ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe], template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config().title && config().content\">\n    {{ config().title | translate | async }}\n  </div>\n  <div>{{ config().content | translate | async }}</div>\n</div>\n@if (config().closeButton) {\n  <ax-close-button></ax-close-button>\n} @else if (config().closeAllButton) {\n  <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config().timeOutProgress && config().timeOut) {\n  <div\n    class=\"ax-toast-progress\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config().timeOut + '%'\"\n  ></div>\n}\n", styles: ["ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-darkest-surface)}.ax-dark ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-toast.ax-primary{--ax-comp-toast-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-primary-darker-surface)}ax-toast.ax-secondary{--ax-comp-toast-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-secondary-darker-surface)}ax-toast.ax-success{--ax-comp-toast-bg-color: var(--ax-sys-color-success-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-success-darker-surface)}ax-toast.ax-warning{--ax-comp-toast-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-warning-darker-surface)}ax-toast.ax-danger{--ax-comp-toast-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-danger-darker-surface)}ax-toast.ax-accent1{--ax-comp-toast-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent1-darker-surface)}ax-toast.ax-accent2{--ax-comp-toast-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent2-darker-surface)}ax-toast.ax-accent3{--ax-comp-toast-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent3-darker-surface)}ax-toast.ax-accent4{--ax-comp-toast-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent4-darker-surface)}ax-toast.ax-accent5{--ax-comp-toast-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent5-darker-surface)}ax-toast.ax-accent6{--ax-comp-toast-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent6-darker-surface)}ax-toast.ax-accent7{--ax-comp-toast-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent7-darker-surface)}ax-toast{position:relative;display:flex;width:98vw;overflow:hidden;padding:.75rem 1rem;--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);color:rgba(var(--ax-comp-toast-text-color));background-color:rgba(var(--ax-comp-toast-bg-color));font-size:var(--ax-comp-toast-font-size, .875rem);line-height:var(--ax-comp-toast-line-height, 1.25rem);border-radius:var(--ax-comp-toast-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-toast{width:24rem}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem;max-width:fit-content;align-items:start}ax-toast .ax-toast-icon{margin-inline-end:.5rem}ax-toast .ax-toast-content{display:flex;flex:1 1 0%;flex-direction:column}ax-toast .ax-toast-content .ax-toast-title{font-weight:500;line-height:1.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.75rem;margin-bottom:.75rem;display:flex;gap:.5rem}ax-toast ax-icon-close{height:fit-content}ax-toast ax-icon-close:hover{opacity:.75}ax-toast .ax-toast-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-toast-progress-bg-color, 255, 255, 255, .46))}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }] } });
 
 const COMPONENT = [AXToastComponent];
-const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, DialogModule, AXTranslationModule];
+const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule];
 class AXToastModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, DialogModule, AXTranslationModule, AXToastComponent], exports: [AXToastComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, AXToastComponent], exports: [AXToastComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, providers: [AXToastService], imports: [MODULES, COMPONENT] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXToastModule, decorators: [{