@acorex/components 21.0.1-next.7 → 21.0.1-next.71

package/fesm2022/acorex-components-notification.mjs

@@ -2,137 +2,11 @@ import { MXBaseComponent, AXClosableComponent, AXComponent } from '@acorex/cdk/c
 import { AXButtonComponent } from '@acorex/components/button';
 import { AXDecoratorCloseButtonComponent } from '@acorex/components/decorators';
 import { AXLoadingComponent } from '@acorex/components/loading';
-import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation';
-import { DIALOG_DATA, DialogRef, Dialog } from '@angular/cdk/dialog';
-import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { AsyncPipe } from '@angular/common';
+import { AXTranslationService, AXTranslatorPipe } from '@acorex/core/translation';
+import { NgTemplateOutlet, NgComponentOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, signal, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, NgModule, Injectable } from '@angular/core';
-import { GlobalPositionStrategy } from '@angular/cdk/overlay';
-
-/**
- * The Button is a component which detects user interaction and triggers a corresponding event
- *
- * @category Components
- */
-class AXNotificationComponent extends MXBaseComponent {
-    constructor() {
-        super(...arguments);
-        this.config = inject(DIALOG_DATA);
-        this.dialogRef = inject(DialogRef);
-        this.isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
-        this.remainingTime = signal(0, ...(ngDevMode ? [{ debugName: "remainingTime" }] : []));
-        this.transitionDuration = signal(150, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this._initContent();
-        this._initIcon();
-        this.remainingTime.set(this.config.timeOut);
-        this._handleTimeOut();
-        this.getHostElement().addEventListener('pointerenter', () => {
-            if (!this.config.pauseOnHover)
-                return;
-            if (this.isPaused())
-                return;
-            // Only pause if not already paused
-            this.isPaused.set(true);
-            this.pauseAnimation();
-        });
-        this.getHostElement().addEventListener('pointerleave', () => {
-            if (!this.config.pauseOnHover)
-                return;
-            if (!this.isPaused())
-                return;
-            // Only resume if paused
-            this.isPaused.set(false);
-            this._handleTimeOut();
-        });
-    }
-    pauseAnimation() {
-        clearInterval(this.intervalId);
-    }
-    _handleTimeOut() {
-        if (this.config.timeOut) {
-            this.intervalId = setInterval(() => {
-                this.remainingTime.update((prev) => prev - this.transitionDuration());
-                if (this.remainingTime() <= 0) {
-                    clearInterval(this.intervalId);
-                    this.close();
-                }
-            }, this.transitionDuration());
-        }
-    }
-    /** @ignore */
-    _initContent() {
-        if (this.config.content instanceof TemplateRef) {
-            this._selectedPortal = new TemplatePortal(this.config.content, this.getViewContainer());
-        }
-        else if (typeof this.config.content === 'function') {
-            this._selectedPortal = new ComponentPortal(this.config.content);
-        }
-    }
-    /** @ignore */
-    _initIcon() {
-        if (!this.config.icon) {
-            switch (this.config.color) {
-                case 'success':
-                    this._icon = 'ax-icon ax-icon-check-circle';
-                    break;
-                case 'danger':
-                    this._icon = 'ax-icon ax-icon-error';
-                    break;
-                case 'warning':
-                    this._icon = 'ax-icon ax-icon-warning';
-                    break;
-                default:
-                    this._icon = this.config.icon || 'ax-icon ax-icon-info';
-                    break;
-            }
-        }
-        else {
-            this._icon = this.config.icon;
-        }
-    }
-    /** @ignore */
-    get _stringContent() {
-        return typeof this.config.content === 'string' ? this.config.content : '';
-    }
-    /** @ignore */
-    _handleButtonClick(button) {
-        if (button.onClick) {
-            button.onClick({ source: button });
-        }
-    }
-    /**
-     * Closes the dialog and provides the component and HTML element for reference.
-     */
-    close() {
-        this.dialogRef.close({
-            component: this,
-            htmlElement: this.getHostElement(),
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXNotificationComponent, isStandalone: true, selector: "ax-notification", providers: [
-            { provide: AXClosableComponent, useExisting: AXNotificationComponent },
-            { provide: AXComponent, useExisting: AXNotificationComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-notification-icon ax-icon-solid {{ _icon }} ax-{{ this.config.color }}\"></span>\n<div class=\"ax-notification-content\">\n  <div class=\"ax-notification-title\">{{ config.title | translate | async }}</div>\n  @if (_selectedPortal) {\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\"></ng-template>\n  } @else {\n    <div>{{ _stringContent | translate | async }}</div>\n  }\n\n  @if (config.buttons?.length) {\n    <div class=\"ax-notification-buttons\">\n      @for (button of config.buttons; track $index) {\n        <ax-button\n          class=\"ax-xs\"\n          [text]=\"button.text | translate | async\"\n          [color]=\"'ax-' + button.color\"\n          [look]=\"'ax-' + button.look\"\n          [disabled]=\"button.disabled\"\n          (onClick)=\"_handleButtonClick(button)\"\n        >\n          @if (button.loading) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n@if (config.closeButton) {\n  <ax-close-button></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut && remainingTime()) {\n  <div\n    [class]=\"'ax-notification-progress ax-' + this.config.color\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n  ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-leading:initial;--tw-duration:initial;--tw-ease:initial}}}@layer components{ax-notification{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:98vw;padding:calc(var(--spacing,.25rem)*4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}ax-notification:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}@media (min-width:768px){ax-notification{width:calc(var(--spacing,.25rem)*96)}}ax-notification .ax-notification-icon{color:var(--ax-comp-bg);padding-inline-end:calc(var(--spacing,.25rem)*3)}ax-notification .ax-notification-content{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));flex-direction:column;flex:1;justify-content:center;display:flex}ax-notification .ax-notification-content .ax-notification-title{--tw-leading:calc(var(--spacing,.25rem)*5);line-height:calc(var(--spacing,.25rem)*5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:calc(var(--spacing,.25rem)*3);gap:calc(var(--spacing,.25rem)*3);display:flex}ax-notification .ax-notification-progress{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bg);width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.3s;--tw-ease:linear;transition-duration:.3s;transition-timing-function:linear;position:absolute}ax-notification .ax-notification-icon,ax-notification .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem)!important;line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)))!important;align-items:flex-start!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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: AXNotificationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-notification', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
-                        { provide: AXClosableComponent, useExisting: AXNotificationComponent },
-                        { provide: AXComponent, useExisting: AXNotificationComponent },
-                    ], imports: [
-                        CdkPortalOutlet,
-                        AXButtonComponent,
-                        AXLoadingComponent,
-                        AXDecoratorCloseButtonComponent,
-                        AsyncPipe,
-                        AXTranslatorPipe,
-                    ], template: "<span class=\"ax-notification-icon ax-icon-solid {{ _icon }} ax-{{ this.config.color }}\"></span>\n<div class=\"ax-notification-content\">\n  <div class=\"ax-notification-title\">{{ config.title | translate | async }}</div>\n  @if (_selectedPortal) {\n    <ng-template [cdkPortalOutlet]=\"_selectedPortal\"></ng-template>\n  } @else {\n    <div>{{ _stringContent | translate | async }}</div>\n  }\n\n  @if (config.buttons?.length) {\n    <div class=\"ax-notification-buttons\">\n      @for (button of config.buttons; track $index) {\n        <ax-button\n          class=\"ax-xs\"\n          [text]=\"button.text | translate | async\"\n          [color]=\"'ax-' + button.color\"\n          [look]=\"'ax-' + button.look\"\n          [disabled]=\"button.disabled\"\n          (onClick)=\"_handleButtonClick(button)\"\n        >\n          @if (button.loading) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n@if (config.closeButton) {\n  <ax-close-button></ax-close-button>\n}\n@if (config.timeOutProgress && config.timeOut && remainingTime()) {\n  <div\n    [class]=\"'ax-notification-progress ax-' + this.config.color\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config.timeOut + '%'\"\n  ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-leading:initial;--tw-duration:initial;--tw-ease:initial}}}@layer components{ax-notification{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:98vw;padding:calc(var(--spacing,.25rem)*4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}ax-notification:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}@media (min-width:768px){ax-notification{width:calc(var(--spacing,.25rem)*96)}}ax-notification .ax-notification-icon{color:var(--ax-comp-bg);padding-inline-end:calc(var(--spacing,.25rem)*3)}ax-notification .ax-notification-content{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));flex-direction:column;flex:1;justify-content:center;display:flex}ax-notification .ax-notification-content .ax-notification-title{--tw-leading:calc(var(--spacing,.25rem)*5);line-height:calc(var(--spacing,.25rem)*5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:calc(var(--spacing,.25rem)*3);gap:calc(var(--spacing,.25rem)*3);display:flex}ax-notification .ax-notification-progress{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);height:calc(var(--spacing,.25rem)*1);background-color:var(--ax-comp-bg);width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.3s;--tw-ease:linear;transition-duration:.3s;transition-timing-function:linear;position:absolute}ax-notification .ax-notification-icon,ax-notification .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem)!important;line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75/1.25)))!important;align-items:flex-start!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
-        }] });
+import { InjectionToken, inject, signal, Injectable, input, computed, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { AXOverlayService } from '@acorex/cdk/overlay';
 
 const AX_NOTIFICATION_CONFIG = new InjectionToken('AX_NOTIFICATION_CONFIG', {
     providedIn: 'root',
@@ -155,42 +29,30 @@ function notificationConfig(config = {}) {
     return result;
 }
 
-class AXNotificationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXNotificationModule, imports: [AXNotificationComponent], exports: [AXNotificationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNotificationModule, imports: [AXNotificationComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNotificationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [AXNotificationComponent],
-                    exports: [AXNotificationComponent],
-                }]
-        }] });
-
+let notificationIdCounter = 0;
 class AXNotificationService {
     constructor() {
-        this.dialog = inject(Dialog);
+        this.overlayService = inject(AXOverlayService);
         this.translationService = inject(AXTranslationService);
         this.defaultConfig = inject(AX_NOTIFICATION_CONFIG);
-        this.activeNotifications = [];
-        this.reservedNotifications = [];
-        this.notificationCounterElement = null;
-        this.moreNotificationsColor = 'primary';
-        this.moreNotificationsLocation = 'bottom-center';
-        this.reserveCounter = 0;
+        this.activeNotifications = signal([], ...(ngDevMode ? [{ debugName: "activeNotifications" }] : []));
+        this.reservedNotifications = signal([], ...(ngDevMode ? [{ debugName: "reservedNotifications" }] : []));
+        this.notificationCounterRef = signal(null, ...(ngDevMode ? [{ debugName: "notificationCounterRef" }] : []));
+        this.moreNotificationsColor = signal('primary', ...(ngDevMode ? [{ debugName: "moreNotificationsColor" }] : []));
+        this.moreNotificationsLocation = signal('bottom-center', ...(ngDevMode ? [{ debugName: "moreNotificationsLocation" }] : []));
+        this.reserveCounter = signal(0, ...(ngDevMode ? [{ debugName: "reserveCounter" }] : []));
     }
     show(config) {
         config = { ...this.defaultConfig, ...config };
-        this.moreNotificationsColor = config.color;
-        this.moreNotificationsLocation = config.location;
-        if (this.defaultConfig.limit > 0 && this.activeNotifications.length >= this.defaultConfig.limit) {
+        this.moreNotificationsColor.set(config.color);
+        this.moreNotificationsLocation.set(config.location);
+        if (this.defaultConfig.limit > 0 && this.activeNotifications().length >= this.defaultConfig.limit) {
             const reservedRef = {
                 close: () => {
                     console.warn('Reserved notification cannot be closed until it is displayed.');
                 },
             };
-            this.reservedNotifications.push({ config, reservedRef });
+            this.reservedNotifications.update((prev) => [...prev, { config, reservedRef }]);
             this.handleReservedNotificationCounter();
             return reservedRef;
         }
@@ -198,164 +60,430 @@ class AXNotificationService {
     }
     displayNotification(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(AXNotificationComponent, {
-            data: config,
-            autoFocus: '__no_element__',
-            restoreFocus: false,
-            role: 'dialog',
-            ariaModal: true,
-            closeOnNavigation: true,
-            closeOnDestroy: true,
-            hasBackdrop: false,
-            panelClass: ['animate-fadeIn', 'animate-faster'],
-            positionStrategy,
-        });
-        this.activeNotifications.push(dialogRef.id);
-        this.handleReservedNotificationCounter();
-        const notificationRef = dialogRef.componentInstance;
-        dialogRef.closed.subscribe(() => {
-            this.activeNotifications = this.activeNotifications.filter((id) => id !== dialogRef.id);
-            this.handleShowReservedNotification();
+        const notificationData = {
+            buttons: config.buttons,
+            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 notificationId = `notification-${++notificationIdCounter}`;
+        let internalRef;
+        const closeNotification = () => {
+            if (internalRef) {
+                internalRef.overlayRef.dispose();
+                this.activeNotifications.set(this.activeNotifications().filter((n) => n.id !== internalRef.id));
+                this.handleShowReservedNotification();
+                this.handleReservedNotificationCounter();
+                setTimeout(() => {
+                    this.reposition(config.location, gap);
+                });
+            }
+        };
+        this.overlayService
+            .create(AXNotificationComponent, {
+            inputs: {
+                config: notificationData,
+                onClose: closeNotification,
+            },
+            centered: false,
+            panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
+            onDispose: () => {
+                // Clean up when disposed externally
+                const currentNotifications = this.activeNotifications();
+                if (internalRef && currentNotifications.find((n) => n.id === internalRef.id)) {
+                    this.activeNotifications.set(currentNotifications.filter((n) => n.id !== internalRef.id));
+                    this.handleShowReservedNotification();
+                    this.handleReservedNotificationCounter();
+                }
+            },
+        })
+            .then((overlayRef) => {
+            internalRef = {
+                id: notificationId,
+                overlayRef,
+                config: notificationData,
+                close: closeNotification,
+            };
+            // Position the notification BEFORE adding to activeNotifications
+            this.positionNotification(overlayRef.overlayElement, config.location, gap);
+            this.activeNotifications.update((prev) => [...prev, internalRef]);
             this.handleReservedNotificationCounter();
-            setTimeout(() => {
-                this.reposition(config.location, gap);
-            }, 0);
         });
         return {
             close: () => {
-                notificationRef.close();
+                closeNotification();
             },
         };
     }
     hideAll() {
-        this.dialog.closeAll();
-        this.reserveCounter = 0;
-        this.reservedNotifications = [];
-        this.activeNotifications = [];
+        this.reserveCounter.set(0);
+        this.reservedNotifications.set([]);
+        // Close all active notifications
+        this.activeNotifications().forEach((notification) => {
+            notification.overlayRef.dispose();
+        });
+        this.activeNotifications.set([]);
+        // Close counter notification if exists
+        const counterRef = this.notificationCounterRef();
+        if (counterRef) {
+            counterRef.overlayRef.dispose();
+            this.notificationCounterRef.set(null);
+        }
         this.handleReservedNotificationCounter();
     }
     handleShowReservedNotification() {
-        if (this.activeNotifications.length > this.defaultConfig.limit - 1)
+        if (this.activeNotifications().length > this.defaultConfig.limit - 1)
             return;
-        if (!this.reservedNotifications.length)
+        if (!this.reservedNotifications().length)
             return;
-        const { config, reservedRef } = this.reservedNotifications.shift();
-        const displayedRef = this.displayNotification(config);
+        const reserved = this.reservedNotifications()[0];
+        this.reservedNotifications.update((prev) => prev.slice(1));
+        const displayedRef = this.displayNotification(reserved.config);
         this.handleReservedNotificationCounter();
-        reservedRef.close = displayedRef.close;
+        reserved.reservedRef.close = displayedRef.close;
     }
     handleReservedNotificationCounter() {
-        const reservedCount = this.reservedNotifications.length;
-        if (reservedCount === this.reserveCounter)
+        const reservedCount = this.reservedNotifications().length;
+        if (reservedCount === this.reserveCounter())
             return;
-        this.reserveCounter = reservedCount;
-        if (reservedCount === 0 && this.notificationCounterElement !== null) {
-            this.notificationCounterElement.close();
+        this.reserveCounter.set(reservedCount);
+        if (reservedCount === 0 && this.notificationCounterRef() !== null) {
+            this.notificationCounterRef().close();
+            this.notificationCounterRef.set(null);
             return;
         }
         if (reservedCount > 0) {
-            if (this.notificationCounterElement !== null) {
-                this.notificationCounterElement.close();
+            if (this.notificationCounterRef() !== null) {
+                this.notificationCounterRef().close();
+                this.notificationCounterRef.set(null);
             }
-            this.createReservedCounternotification();
+            this.createReservedCounterNotification();
         }
     }
-    async createReservedCounternotification() {
+    async createReservedCounterNotification() {
+        const gap = this.defaultConfig.gap;
         const opt = {
             closeButton: false,
-            color: this.moreNotificationsColor,
-            location: this.moreNotificationsLocation,
+            color: this.moreNotificationsColor(),
+            location: this.moreNotificationsLocation(),
             title: await this.translationService.translateAsync('@acorex:common.notifications.more', {
-                params: { number: this.reserveCounter },
+                params: { number: this.reserveCounter() },
             }),
             timeOutProgress: false,
         };
-        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(AXNotificationComponent, {
-            data: opt,
-            autoFocus: '__no_element__',
-            restoreFocus: true,
-            role: 'dialog',
-            ariaModal: true,
-            closeOnNavigation: true,
-            closeOnDestroy: true,
-            hasBackdrop: false,
-            panelClass: ['animate-fadeIn', 'animate-faster'],
-            positionStrategy,
-        });
-        this.notificationCounterElement = dialogRef.componentInstance;
-    }
-    reposition(notificationLocation, gap) {
-        const list = this.dialog.openDialogs
-            .map((c) => c.componentInstance)
-            .filter((c) => c.config?.location == notificationLocation);
-        list.forEach((element, index) => {
-            const pos = this.getRepositionPosition(index, gap, list, notificationLocation);
-            this.getPositionStrategy(element.dialogRef.config.positionStrategy, notificationLocation, pos, gap).apply();
+        const notificationId = `notification-counter-${++notificationIdCounter}`;
+        const overlayRef = await this.overlayService.create(AXNotificationComponent, {
+            inputs: {
+                config: opt,
+                onClose: () => {
+                    const currentCounterRef = this.notificationCounterRef();
+                    if (currentCounterRef) {
+                        currentCounterRef.overlayRef.dispose();
+                        if (currentCounterRef.id === notificationId) {
+                            this.notificationCounterRef.set(null);
+                        }
+                    }
+                },
+            },
+            centered: false,
+            panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
         });
+        const counterInternalRef = {
+            id: notificationId,
+            overlayRef,
+            config: opt,
+            close: () => {
+                counterInternalRef.overlayRef.dispose();
+                if (this.notificationCounterRef()?.id === counterInternalRef.id) {
+                    this.notificationCounterRef.set(null);
+                }
+            },
+        };
+        this.notificationCounterRef.set(counterInternalRef);
+        // Position the counter notification
+        this.positionNotification(overlayRef.overlayElement, opt.location, gap);
     }
-    getRepositionPosition(index, gap, list, notificationLocation) {
-        if (index === 0)
-            return gap + 'px';
-        const previouseElement = list[index - 1];
-        if (notificationLocation.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;
-    }
-    getPositionStrategy(positionStrategy, location, pos, gap) {
+    positionNotification(element, location, gap) {
+        if (!element)
+            return;
+        const pos = this.getPosition(location) + gap;
+        // Override the centered overlay container styles for notification 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;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNotificationService, providedIn: 'root' }); }
+    reposition(notificationLocation, gap) {
+        const list = this.activeNotifications().filter((n) => n.config?.location === notificationLocation);
+        list.forEach((notification, index) => {
+            const element = notification.overlayRef.overlayElement;
+            if (!element)
+                return;
+            const pos = this.getRepositionPosition(index, gap, list, notificationLocation);
+            this.applyRepositionPosition(element, notificationLocation, pos, gap);
+        });
+    }
+    getRepositionPosition(index, gap, list, notificationLocation) {
+        if (index === 0)
+            return gap;
+        const previousNotification = list[index - 1];
+        const previousElement = previousNotification.overlayRef.overlayElement;
+        if (!previousElement)
+            return gap;
+        if (notificationLocation.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.activeNotifications().filter((n) => n.config?.location === location);
+        if (list.length === 0)
+            return 0;
+        const lastNotification = list[list.length - 1];
+        const element = lastNotification.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: "21.1.3", ngImport: i0, type: AXNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXNotificationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXNotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXNotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+class AXNotificationComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        /** Notification configuration data */
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        /** @internal Callback function to close the notification */
+        this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
+        this.notificationService = inject(AXNotificationService);
+        this.isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
+        this.remainingTime = signal(0, ...(ngDevMode ? [{ debugName: "remainingTime" }] : []));
+        this.transitionDuration = signal(150, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
+        /** Template content if config.content is a TemplateRef */
+        this.templateContent = computed(() => {
+            const content = this.config().content;
+            return content instanceof TemplateRef ? content : null;
+        }, ...(ngDevMode ? [{ debugName: "templateContent" }] : []));
+        /** Component content if config.content is a component Type */
+        this.componentContent = computed(() => {
+            const content = this.config().content;
+            return typeof content === 'function' ? content : null;
+        }, ...(ngDevMode ? [{ debugName: "componentContent" }] : []));
+        /** String content if config.content is a string */
+        this.stringContent = computed(() => {
+            const content = this.config().content;
+            return typeof content === 'string' ? content : '';
+        }, ...(ngDevMode ? [{ debugName: "stringContent" }] : []));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._initIcon();
+        this.remainingTime.set(this.config().timeOut);
+        this._handleTimeOut();
+        this.getHostElement().addEventListener('pointerenter', () => {
+            if (!this.config().pauseOnHover)
+                return;
+            if (this.isPaused())
+                return;
+            // Only pause if not already paused
+            this.isPaused.set(true);
+            this.pauseAnimation();
+        });
+        this.getHostElement().addEventListener('pointerleave', () => {
+            if (!this.config().pauseOnHover)
+                return;
+            if (!this.isPaused())
+                return;
+            // Only resume if paused
+            this.isPaused.set(false);
+            this._handleTimeOut();
+        });
+    }
+    pauseAnimation() {
+        clearInterval(this.intervalId);
+    }
+    _handleTimeOut() {
+        if (this.config().timeOut) {
+            this.intervalId = setInterval(() => {
+                this.remainingTime.update((prev) => prev - this.transitionDuration());
+                if (this.remainingTime() <= 0) {
+                    clearInterval(this.intervalId);
+                    this.close();
+                }
+            }, this.transitionDuration());
+        }
+    }
+    /** @ignore */
+    _initIcon() {
+        if (!this.config().icon) {
+            switch (this.config().color) {
+                case 'success':
+                    this._icon = 'ax-icon ax-icon-check-circle';
+                    break;
+                case 'danger':
+                    this._icon = 'ax-icon ax-icon-error';
+                    break;
+                case 'warning':
+                    this._icon = 'ax-icon ax-icon-warning';
+                    break;
+                default:
+                    this._icon = this.config().icon || 'ax-icon ax-icon-info';
+                    break;
+            }
+        }
+        else {
+            this._icon = this.config().icon;
+        }
+    }
+    /** @ignore */
+    _handleButtonClick(button) {
+        if (button.onClick) {
+            button.onClick({ source: button });
+        }
+    }
+    /**
+     * Closes the notification.
+     */
+    close() {
+        const closeCallback = this.onClose();
+        if (closeCallback) {
+            closeCallback();
+        }
+    }
+    /**
+     * Closes all notifications.
+     */
+    closeAll() {
+        this.notificationService.hideAll();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXNotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXNotificationComponent, isStandalone: true, selector: "ax-notification", 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: AXNotificationComponent },
+            { provide: AXComponent, useExisting: AXNotificationComponent },
+        ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-notification-icon ax-icon-solid {{ _icon }} ax-{{ this.config().color }}\"></span>\n<div class=\"ax-notification-content\">\n  <div class=\"ax-notification-title\">{{ config().title | translate | async }}</div>\n  @if (templateContent()) {\n    <ng-container *ngTemplateOutlet=\"templateContent()\"></ng-container>\n  } @else if (componentContent()) {\n    <ng-container *ngComponentOutlet=\"componentContent()\"></ng-container>\n  } @else {\n    <div>{{ stringContent() | translate | async }}</div>\n  }\n\n  @if (config().buttons?.length) {\n    <div class=\"ax-notification-buttons\">\n      @for (button of config().buttons; track $index) {\n        <ax-button\n          class=\"ax-xs\"\n          [text]=\"button.text | translate | async\"\n          [color]=\"'ax-' + button.color\"\n          [look]=\"'ax-' + button.look\"\n          [disabled]=\"button.disabled\"\n          (onClick)=\"_handleButtonClick(button)\"\n        >\n          @if (button.loading) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n@if (config().closeButton) {\n  <ax-close-button></ax-close-button>\n}\n@if (config().timeOutProgress && config().timeOut && remainingTime()) {\n  <div\n    [class]=\"'ax-notification-progress ax-' + this.config().color\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config().timeOut + '%'\"\n  ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-leading:initial;--tw-duration:initial;--tw-ease:initial}}}@layer components{ax-notification{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:98vw;padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}ax-notification:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}@media(min-width:768px){ax-notification{width:calc(var(--spacing,.25rem) * 96)}}ax-notification .ax-notification-icon{color:var(--ax-comp-bg);padding-inline-end:calc(var(--spacing,.25rem) * 3)}ax-notification .ax-notification-content{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));flex-direction:column;flex:1;justify-content:center;display:flex}ax-notification .ax-notification-content .ax-notification-title{--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:calc(var(--spacing,.25rem) * 3);gap:calc(var(--spacing,.25rem) * 3);display:flex}ax-notification .ax-notification-progress{inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * 1);background-color:var(--ax-comp-bg);width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.3s;--tw-ease:linear;transition-duration:.3s;transition-timing-function:linear;position:absolute}ax-notification .ax-notification-icon,ax-notification .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem)!important;line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))!important;align-items:flex-start!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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: "21.1.3", ngImport: i0, type: AXNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-notification', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': '"ax-" + config().color',
+                    }, providers: [
+                        { provide: AXClosableComponent, useExisting: AXNotificationComponent },
+                        { provide: AXComponent, useExisting: AXNotificationComponent },
+                    ], imports: [
+                        NgTemplateOutlet,
+                        NgComponentOutlet,
+                        AXButtonComponent,
+                        AXLoadingComponent,
+                        AXDecoratorCloseButtonComponent,
+                        AsyncPipe,
+                        AXTranslatorPipe,
+                    ], template: "<span class=\"ax-notification-icon ax-icon-solid {{ _icon }} ax-{{ this.config().color }}\"></span>\n<div class=\"ax-notification-content\">\n  <div class=\"ax-notification-title\">{{ config().title | translate | async }}</div>\n  @if (templateContent()) {\n    <ng-container *ngTemplateOutlet=\"templateContent()\"></ng-container>\n  } @else if (componentContent()) {\n    <ng-container *ngComponentOutlet=\"componentContent()\"></ng-container>\n  } @else {\n    <div>{{ stringContent() | translate | async }}</div>\n  }\n\n  @if (config().buttons?.length) {\n    <div class=\"ax-notification-buttons\">\n      @for (button of config().buttons; track $index) {\n        <ax-button\n          class=\"ax-xs\"\n          [text]=\"button.text | translate | async\"\n          [color]=\"'ax-' + button.color\"\n          [look]=\"'ax-' + button.look\"\n          [disabled]=\"button.disabled\"\n          (onClick)=\"_handleButtonClick(button)\"\n        >\n          @if (button.loading) {\n            <ax-loading></ax-loading>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n@if (config().closeButton) {\n  <ax-close-button></ax-close-button>\n}\n@if (config().timeOutProgress && config().timeOut && remainingTime()) {\n  <div\n    [class]=\"'ax-notification-progress ax-' + this.config().color\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config().timeOut + '%'\"\n  ></div>\n}\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-leading:initial;--tw-duration:initial;--tw-ease:initial}}}@layer components{ax-notification{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:98vw;padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative;overflow:hidden}ax-notification:where(.dark,.dark *){background-color:var(--color-darkest,rgba(var(--ax-sys-color-darkest-surface)))}@media(min-width:768px){ax-notification{width:calc(var(--spacing,.25rem) * 96)}}ax-notification .ax-notification-icon{color:var(--ax-comp-bg);padding-inline-end:calc(var(--spacing,.25rem) * 3)}ax-notification .ax-notification-content{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));flex-direction:column;flex:1;justify-content:center;display:flex}ax-notification .ax-notification-content .ax-notification-title{--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:calc(var(--spacing,.25rem) * 3);gap:calc(var(--spacing,.25rem) * 3);display:flex}ax-notification .ax-notification-progress{inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);height:calc(var(--spacing,.25rem) * 1);background-color:var(--ax-comp-bg);width:100%;transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.3s;--tw-ease:linear;transition-duration:.3s;transition-timing-function:linear;position:absolute}ax-notification .ax-notification-icon,ax-notification .ax-icon-close{max-width:fit-content;font-size:var(--text-xl,1.25rem)!important;line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)))!important;align-items:flex-start!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }] } });
+
+class AXNotificationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXNotificationModule, imports: [AXNotificationComponent], exports: [AXNotificationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXNotificationModule, imports: [AXNotificationComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXNotificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXNotificationComponent],
+                    exports: [AXNotificationComponent],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */