@acorex/components 22.4.31 → 22.4.33

package/fesm2022/acorex-components-notification.mjs

@@ -5,7 +5,7 @@ import { AXSafePipe } from '@acorex/core/pipes';
 import { AXTranslationService, AXTranslatorPipe } from '@acorex/core/translation';
 import { NgTemplateOutlet, NgComponentOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, Injectable, input, computed, TemplateRef, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { InjectionToken, inject, signal, Injectable, input, computed, TemplateRef, effect, HostBinding, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { AXOverlayService } from '@acorex/cdk/overlay';
 
 const AX_NOTIFICATION_CONFIG = new InjectionToken('AX_NOTIFICATION_CONFIG', {
@@ -74,15 +74,19 @@ class AXNotificationService {
             icon: config.icon,
             title: config.title,
             content: config.content,
+            steps: config.steps,
+            stepIndex: config.stepIndex,
             location: config.location,
             closeButton: config.closeButton ?? true,
             color: config.color,
             timeOut: config.timeOut,
             timeOutProgress: config.timeOutProgress ?? true,
+            stepCompleteTimeOut: config.stepCompleteTimeOut,
             pauseOnHover: config.pauseOnHover,
         };
         const notificationId = `notification-${++notificationIdCounter}`;
         let internalRef;
+        let notificationComponent = null;
         const closeNotification = () => {
             if (internalRef) {
                 internalRef.overlayRef.dispose();
@@ -114,6 +118,7 @@ class AXNotificationService {
             },
         })
             .then((overlayRef) => {
+            notificationComponent = overlayRef.instance.instance;
             internalRef = {
                 id: notificationId,
                 overlayRef,
@@ -130,6 +135,12 @@ class AXNotificationService {
             close: () => {
                 closeNotification();
             },
+            update: (patch) => notificationComponent?.patchConfig(patch),
+            nextStep: () => notificationComponent?.nextStep() ?? false,
+            previousStep: () => notificationComponent?.previousStep() ?? false,
+            goToStep: (index) => notificationComponent?.goToStep(index) ?? false,
+            getStepIndex: () => notificationComponent?.getStepIndex() ?? 0,
+            getStepCount: () => notificationComponent?.getStepCount() ?? 0,
         };
     }
     hideAll() {
@@ -368,45 +379,135 @@ class AXNotificationComponent extends MXBaseComponent {
         ...(ngDevMode ? [{ debugName: "remainingTime" }] : /* istanbul ignore next */ []));
         this.transitionDuration = signal(150, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "transitionDuration" }] : /* istanbul ignore next */ []));
+        this.runtimePatch = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "runtimePatch" }] : /* istanbul ignore next */ []));
+        this.currentStepIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentStepIndex" }] : /* istanbul ignore next */ []));
+        this.multiStepCompleteCountdown = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiStepCompleteCountdown" }] : /* istanbul ignore next */ []));
+        this.stepCompleteTimerId = null;
+        this.mergedConfig = computed(() => ({
+            ...this.config(),
+            ...this.runtimePatch(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mergedConfig" }] : /* istanbul ignore next */ []));
+        this.steps = computed(() => this.mergedConfig().steps ?? [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.isMultiStep = computed(() => this.steps().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiStep" }] : /* istanbul ignore next */ []));
+        this.effectiveConfig = computed(() => {
+            const base = this.mergedConfig();
+            const stepList = base.steps;
+            if (!stepList?.length) {
+                return base;
+            }
+            const index = Math.min(Math.max(this.currentStepIndex(), 0), stepList.length - 1);
+            const step = stepList[index];
+            return {
+                ...base,
+                title: step.title ?? base.title,
+                content: step.content ?? base.content,
+                icon: step.icon ?? base.icon,
+                color: step.color ?? base.color,
+                buttons: step.buttons ?? base.buttons,
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveConfig" }] : /* istanbul ignore next */ []));
+        this.stepIndicator = computed(() => {
+            const total = this.steps().length;
+            if (total <= 1) {
+                return null;
+            }
+            return `${this.currentStepIndex() + 1} / ${total}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepIndicator" }] : /* istanbul ignore next */ []));
+        this.showProgressBar = computed(() => {
+            const cfg = this.mergedConfig();
+            if (!cfg.timeOutProgress) {
+                return false;
+            }
+            if (this.multiStepCompleteCountdown()) {
+                return this.resolveStepCompleteDelay() > 0 && this.remainingTime() > 0;
+            }
+            if (this.isMultiStep() && this.steps().length > 0) {
+                return true;
+            }
+            return !!cfg.timeOut && this.remainingTime() > 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showProgressBar" }] : /* istanbul ignore next */ []));
+        this.progressWidthPercent = computed(() => {
+            const cfg = this.mergedConfig();
+            const stepTotal = this.steps().length;
+            if (cfg.timeOutProgress && this.multiStepCompleteCountdown()) {
+                const delay = this.resolveStepCompleteDelay();
+                return delay ? (this.remainingTime() * 100) / delay : 0;
+            }
+            if (cfg.timeOutProgress && this.isMultiStep() && stepTotal > 0) {
+                return ((this.currentStepIndex() + 1) / stepTotal) * 100;
+            }
+            const timeOut = this.mergedConfig().timeOut;
+            if (!timeOut) {
+                return 0;
+            }
+            return (this.remainingTime() * 100) / timeOut;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressWidthPercent" }] : /* istanbul ignore next */ []));
+        this.progressTransitionDuration = computed(() => {
+            if (this.multiStepCompleteCountdown()) {
+                return this.transitionDuration();
+            }
+            return this.isMultiStep() ? 300 : this.transitionDuration();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressTransitionDuration" }] : /* istanbul ignore next */ []));
         /** Template content if config.content is a TemplateRef */
         this.templateContent = computed(() => {
-            const content = this.config().content;
+            const content = this.effectiveConfig().content;
             return content instanceof TemplateRef ? content : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "templateContent" }] : /* istanbul ignore next */ []));
         /** Component content if config.content is a component Type */
         this.componentContent = computed(() => {
-            const content = this.config().content;
+            const content = this.effectiveConfig().content;
             return typeof content === 'function' ? content : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "componentContent" }] : /* istanbul ignore next */ []));
         /** String content if config.content is a string */
         this.stringContent = computed(() => {
-            const content = this.config().content;
+            const content = this.effectiveConfig().content;
             return typeof content === 'string' ? content : '';
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "stringContent" }] : /* istanbul ignore next */ []));
+        this.#iconEffect = effect(() => {
+            this._syncIcon(this.effectiveConfig());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#iconEffect" }] : /* istanbul ignore next */ []));
+    }
+    static { this.defaultStepCompleteDelayMs = 2000; }
+    get hostMultiStepClass() {
+        return this.isMultiStep();
     }
+    #iconEffect;
     ngOnInit() {
         super.ngOnInit();
-        this._initIcon();
-        this.remainingTime.set(this.config().timeOut);
+        const initialStep = this.config().stepIndex ?? 0;
+        if (this.config().steps?.length) {
+            this.currentStepIndex.set(Math.min(initialStep, this.config().steps.length - 1));
+        }
+        this.remainingTime.set(this.mergedConfig().timeOut);
         this._handleTimeOut();
         this.getHostElement().addEventListener('pointerenter', () => {
-            if (!this.config().pauseOnHover)
+            if (!this.mergedConfig().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)
+            if (!this.mergedConfig().pauseOnHover)
                 return;
             if (!this.isPaused())
                 return;
-            // Only resume if paused
             this.isPaused.set(false);
             this._handleTimeOut();
         });
@@ -415,20 +516,78 @@ class AXNotificationComponent extends MXBaseComponent {
         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());
+        const intervalMs = this.transitionDuration();
+        const hasTimeOut = this.multiStepCompleteCountdown()
+            ? this.resolveStepCompleteDelay() > 0
+            : !!this.mergedConfig().timeOut;
+        if (!hasTimeOut) {
+            return;
         }
+        this.intervalId = setInterval(() => {
+            this.remainingTime.update((prev) => prev - intervalMs);
+            if (this.remainingTime() <= 0) {
+                clearInterval(this.intervalId);
+                this.close();
+            }
+        }, intervalMs);
     }
-    /** @ignore */
-    _initIcon() {
-        if (!this.config().icon) {
-            switch (this.config().color) {
+    restartTimeOut() {
+        if (this.multiStepCompleteCountdown()) {
+            return;
+        }
+        this.clearStepCompleteClose();
+        clearInterval(this.intervalId);
+        const timeOut = this.mergedConfig().timeOut;
+        this.remainingTime.set(timeOut ?? 0);
+        if (timeOut) {
+            this._handleTimeOut();
+        }
+    }
+    resolveStepCompleteDelay() {
+        const cfg = this.mergedConfig();
+        if (cfg.stepCompleteTimeOut === null) {
+            return 0;
+        }
+        if (cfg.stepCompleteTimeOut != null) {
+            return cfg.stepCompleteTimeOut;
+        }
+        return AXNotificationComponent.defaultStepCompleteDelayMs;
+    }
+    clearStepCompleteClose() {
+        if (this.stepCompleteTimerId != null) {
+            clearTimeout(this.stepCompleteTimerId);
+            this.stepCompleteTimerId = null;
+        }
+        clearInterval(this.intervalId);
+        this.multiStepCompleteCountdown.set(false);
+    }
+    scheduleStepCompleteClose() {
+        if (!this.isMultiStep()) {
+            return;
+        }
+        const delay = this.resolveStepCompleteDelay();
+        if (delay <= 0) {
+            return;
+        }
+        this.clearStepCompleteClose();
+        const cfg = this.mergedConfig();
+        if (cfg.timeOutProgress) {
+            this.multiStepCompleteCountdown.set(true);
+            this.remainingTime.set(delay);
+            this._handleTimeOut();
+            return;
+        }
+        this.stepCompleteTimerId = setTimeout(() => this.close(), delay);
+    }
+    onReachedFinalMultiStep() {
+        const total = this.steps().length;
+        if (total > 0 && this.currentStepIndex() === total - 1) {
+            this.scheduleStepCompleteClose();
+        }
+    }
+    _syncIcon(cfg) {
+        if (!cfg.icon) {
+            switch (cfg.color) {
                 case 'success':
                     this._icon = 'ax-icon ax-icon-check-circle';
                     break;
@@ -439,13 +598,60 @@ class AXNotificationComponent extends MXBaseComponent {
                     this._icon = 'ax-icon ax-icon-warning';
                     break;
                 default:
-                    this._icon = this.config().icon || 'ax-icon ax-icon-info';
+                    this._icon = cfg.icon || 'ax-icon ax-icon-info';
                     break;
             }
         }
         else {
-            this._icon = this.config().icon;
+            this._icon = cfg.icon;
+        }
+    }
+    patchConfig(patch) {
+        this.runtimePatch.update((prev) => ({ ...prev, ...patch }));
+        if (patch.stepIndex != null && this.steps().length) {
+            this.currentStepIndex.set(Math.min(Math.max(patch.stepIndex, 0), this.steps().length - 1));
+        }
+        if (patch.timeOut != null) {
+            this.restartTimeOut();
+        }
+    }
+    nextStep() {
+        const total = this.steps().length;
+        if (total === 0 || this.currentStepIndex() >= total - 1) {
+            return false;
         }
+        this.currentStepIndex.update((index) => index + 1);
+        this.restartTimeOut();
+        this.onReachedFinalMultiStep();
+        return true;
+    }
+    previousStep() {
+        if (this.steps().length === 0 || this.currentStepIndex() <= 0) {
+            return false;
+        }
+        this.clearStepCompleteClose();
+        this.currentStepIndex.update((index) => index - 1);
+        this.restartTimeOut();
+        return true;
+    }
+    goToStep(index) {
+        const total = this.steps().length;
+        if (total === 0 || index < 0 || index >= total) {
+            return false;
+        }
+        if (index < total - 1) {
+            this.clearStepCompleteClose();
+        }
+        this.currentStepIndex.set(index);
+        this.restartTimeOut();
+        this.onReachedFinalMultiStep();
+        return true;
+    }
+    getStepIndex() {
+        return this.currentStepIndex();
+    }
+    getStepCount() {
+        return this.steps().length;
     }
     /** @ignore */
     _handleButtonClick(button) {
@@ -469,10 +675,10 @@ class AXNotificationComponent extends MXBaseComponent {
         this.notificationService.hideAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXNotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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 } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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-notification-multi-step": "this.hostMultiStepClass" } }, 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\" [class.ax-mb-2]=\"config().title && config().content\">\n    {{ config().title | translate | async }}\n  </div>\n  @if (templateContent(); as template) {\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  } @else if (componentContent(); as component) {\n    <ng-container [ngComponentOutlet]=\"component\"></ng-container>\n  } @else if (stringContent()) {\n    <div class=\"ax-notification-body\" [innerHTML]=\"stringContent() | translate | async | safe: 'html'\"></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]=\"button.color || 'default'\"\n          [look]=\"button.look || 'solid'\"\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;@layer components{ax-notification{--ax-comp-notification-shadow-rest: var(--ax-sys-effect-prominent-floating);--ax-comp-notification-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-notification-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-notification-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-notification-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-notification-surface-overlay-rest: var(--ax-sys-surface-overlay-prominent-floating);position:relative;display:flex;width:98vw;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));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)));background-color:rgba(var(--ax-sys-color-lightest-surface));background-image:linear-gradient(var(--ax-comp-notification-contrast-surface-overlay-rest),var(--ax-comp-notification-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-notification-surface-overlay-rest),var(--ax-comp-notification-surface-overlay-rest));box-shadow:var(--ax-comp-notification-contrast-inner-border-rest),var(--ax-comp-notification-inner-border-rest),var(--ax-comp-notification-shadow-rest);backdrop-filter:var(--ax-comp-notification-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-notification-backdrop-filter-rest)}ax-notification:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}@media(min-width:768px){ax-notification{width:calc(var(--spacing, .25rem) * 96)}}ax-notification .ax-notification-icon{padding-inline-end:calc(var(--spacing, .25rem) * 3);color:var(--ax-comp-bg)}ax-notification .ax-notification-content{display:flex;flex:1;flex-direction:column;justify-content:center;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface))}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-body{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:calc(var(--spacing, .25rem) * 3);display:flex;gap:calc(var(--spacing, .25rem) * 3)}ax-notification .ax-notification-progress{position:absolute;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);width:100%;background-color:var(--ax-comp-bg);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;transition-duration:.3s;--tw-ease: linear;transition-timing-function:linear}ax-notification .ax-notification-icon{max-width:fit-content;align-items:flex-start!important;font-size:var(--text-xl, 1.25rem)!important;line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))!important}ax-notification ax-close-button{height:fit-content;max-width:fit-content;align-self:flex-start}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@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-font-weight: initial;--tw-leading: initial;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.1.16 | 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", "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" }, { kind: "pipe", type: AXSafePipe, name: "safe" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-notification-icon ax-icon-solid {{ _icon }} ax-{{ effectiveConfig().color }}\"></span>\n<div class=\"ax-notification-content\">\n  <div class=\"ax-notification-title\" [class.ax-mb-2]=\"effectiveConfig().title && effectiveConfig().content\">\n    {{ effectiveConfig().title | translate | async }}\n    @if (stepIndicator(); as indicator) {\n      <span class=\"ax-notification-step-indicator\">{{ indicator }}</span>\n    }\n  </div>\n  @if (templateContent(); as template) {\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  } @else if (componentContent(); as component) {\n    <ng-container [ngComponentOutlet]=\"component\"></ng-container>\n  } @else if (stringContent()) {\n    <div class=\"ax-notification-body\" [innerHTML]=\"stringContent() | translate | async | safe: 'html'\"></div>\n  }\n\n  @if (effectiveConfig().buttons?.length) {\n    <div class=\"ax-notification-buttons\">\n      @for (button of effectiveConfig().buttons; track $index) {\n        <ax-button\n          class=\"ax-xs\"\n          [text]=\"button.text | translate | async\"\n          [color]=\"button.color || 'default'\"\n          [look]=\"button.look || 'solid'\"\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 (effectiveConfig().closeButton) {\n  <ax-close-button></ax-close-button>\n}\n@if (showProgressBar()) {\n  <div\n    [class]=\"'ax-notification-progress ax-' + effectiveConfig().color\"\n    [style.transition-duration]=\"progressTransitionDuration() + 'ms'\"\n    [style.width]=\"progressWidthPercent() + '%'\"\n  ></div>\n}\n", styles: ["@layer properties;@layer components{ax-notification{--ax-comp-notification-shadow-rest: var(--ax-sys-effect-prominent-floating);--ax-comp-notification-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-notification-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-notification-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-notification-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-notification-surface-overlay-rest: var(--ax-sys-surface-overlay-prominent-floating);position:relative;display:flex;width:98vw;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));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)));background-color:rgba(var(--ax-sys-color-lightest-surface));background-image:linear-gradient(var(--ax-comp-notification-contrast-surface-overlay-rest),var(--ax-comp-notification-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-notification-surface-overlay-rest),var(--ax-comp-notification-surface-overlay-rest));box-shadow:var(--ax-comp-notification-contrast-inner-border-rest),var(--ax-comp-notification-inner-border-rest),var(--ax-comp-notification-shadow-rest);backdrop-filter:var(--ax-comp-notification-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-notification-backdrop-filter-rest)}ax-notification:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}@media(min-width:768px){ax-notification{width:calc(var(--spacing, .25rem) * 96)}}ax-notification .ax-notification-icon{padding-inline-end:calc(var(--spacing, .25rem) * 3);color:var(--ax-comp-bg)}ax-notification .ax-notification-content{display:flex;flex:1;flex-direction:column;justify-content:center;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface))}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-body{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:calc(var(--spacing, .25rem) * 3);display:flex;gap:calc(var(--spacing, .25rem) * 3)}ax-notification .ax-notification-progress{position:absolute;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);width:100%;background-color:var(--ax-comp-bg);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;transition-duration:.3s;--tw-ease: linear;transition-timing-function:linear}ax-notification .ax-notification-icon{max-width:fit-content;align-items:flex-start!important;font-size:var(--text-xl, 1.25rem)!important;line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))!important}ax-notification ax-close-button{height:fit-content;max-width:fit-content;align-self:flex-start}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@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-font-weight: initial;--tw-leading: initial;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n", "@layer properties;@layer components{ax-notification.ax-notification-multi-step .ax-notification-title{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}ax-notification.ax-notification-multi-step .ax-notification-step-indicator{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@supports (color: color-mix(in lab,red,red)){ax-notification.ax-notification-multi-step .ax-notification-step-indicator{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@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-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | 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", "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" }, { kind: "pipe", type: AXSafePipe, name: "safe" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXNotificationComponent, decorators: [{
             type: Component,
@@ -488,8 +694,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         AsyncPipe,
                         AXTranslatorPipe,
                         AXSafePipe,
-                    ], 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\" [class.ax-mb-2]=\"config().title && config().content\">\n    {{ config().title | translate | async }}\n  </div>\n  @if (templateContent(); as template) {\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  } @else if (componentContent(); as component) {\n    <ng-container [ngComponentOutlet]=\"component\"></ng-container>\n  } @else if (stringContent()) {\n    <div class=\"ax-notification-body\" [innerHTML]=\"stringContent() | translate | async | safe: 'html'\"></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]=\"button.color || 'default'\"\n          [look]=\"button.look || 'solid'\"\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;@layer components{ax-notification{--ax-comp-notification-shadow-rest: var(--ax-sys-effect-prominent-floating);--ax-comp-notification-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-notification-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-notification-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-notification-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-notification-surface-overlay-rest: var(--ax-sys-surface-overlay-prominent-floating);position:relative;display:flex;width:98vw;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));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)));background-color:rgba(var(--ax-sys-color-lightest-surface));background-image:linear-gradient(var(--ax-comp-notification-contrast-surface-overlay-rest),var(--ax-comp-notification-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-notification-surface-overlay-rest),var(--ax-comp-notification-surface-overlay-rest));box-shadow:var(--ax-comp-notification-contrast-inner-border-rest),var(--ax-comp-notification-inner-border-rest),var(--ax-comp-notification-shadow-rest);backdrop-filter:var(--ax-comp-notification-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-notification-backdrop-filter-rest)}ax-notification:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}@media(min-width:768px){ax-notification{width:calc(var(--spacing, .25rem) * 96)}}ax-notification .ax-notification-icon{padding-inline-end:calc(var(--spacing, .25rem) * 3);color:var(--ax-comp-bg)}ax-notification .ax-notification-content{display:flex;flex:1;flex-direction:column;justify-content:center;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface))}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-body{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:calc(var(--spacing, .25rem) * 3);display:flex;gap:calc(var(--spacing, .25rem) * 3)}ax-notification .ax-notification-progress{position:absolute;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);width:100%;background-color:var(--ax-comp-bg);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;transition-duration:.3s;--tw-ease: linear;transition-timing-function:linear}ax-notification .ax-notification-icon{max-width:fit-content;align-items:flex-start!important;font-size:var(--text-xl, 1.25rem)!important;line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))!important}ax-notification ax-close-button{height:fit-content;max-width:fit-content;align-self:flex-start}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@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-font-weight: initial;--tw-leading: initial;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.1.16 | 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 }] }] } });
+                    ], template: "<span class=\"ax-notification-icon ax-icon-solid {{ _icon }} ax-{{ effectiveConfig().color }}\"></span>\n<div class=\"ax-notification-content\">\n  <div class=\"ax-notification-title\" [class.ax-mb-2]=\"effectiveConfig().title && effectiveConfig().content\">\n    {{ effectiveConfig().title | translate | async }}\n    @if (stepIndicator(); as indicator) {\n      <span class=\"ax-notification-step-indicator\">{{ indicator }}</span>\n    }\n  </div>\n  @if (templateContent(); as template) {\n    <ng-container [ngTemplateOutlet]=\"template\"></ng-container>\n  } @else if (componentContent(); as component) {\n    <ng-container [ngComponentOutlet]=\"component\"></ng-container>\n  } @else if (stringContent()) {\n    <div class=\"ax-notification-body\" [innerHTML]=\"stringContent() | translate | async | safe: 'html'\"></div>\n  }\n\n  @if (effectiveConfig().buttons?.length) {\n    <div class=\"ax-notification-buttons\">\n      @for (button of effectiveConfig().buttons; track $index) {\n        <ax-button\n          class=\"ax-xs\"\n          [text]=\"button.text | translate | async\"\n          [color]=\"button.color || 'default'\"\n          [look]=\"button.look || 'solid'\"\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 (effectiveConfig().closeButton) {\n  <ax-close-button></ax-close-button>\n}\n@if (showProgressBar()) {\n  <div\n    [class]=\"'ax-notification-progress ax-' + effectiveConfig().color\"\n    [style.transition-duration]=\"progressTransitionDuration() + 'ms'\"\n    [style.width]=\"progressWidthPercent() + '%'\"\n  ></div>\n}\n", styles: ["@layer properties;@layer components{ax-notification{--ax-comp-notification-shadow-rest: var(--ax-sys-effect-prominent-floating);--ax-comp-notification-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-notification-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-notification-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-notification-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-notification-surface-overlay-rest: var(--ax-sys-surface-overlay-prominent-floating);position:relative;display:flex;width:98vw;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));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)));background-color:rgba(var(--ax-sys-color-lightest-surface));background-image:linear-gradient(var(--ax-comp-notification-contrast-surface-overlay-rest),var(--ax-comp-notification-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-notification-surface-overlay-rest),var(--ax-comp-notification-surface-overlay-rest));box-shadow:var(--ax-comp-notification-contrast-inner-border-rest),var(--ax-comp-notification-inner-border-rest),var(--ax-comp-notification-shadow-rest);backdrop-filter:var(--ax-comp-notification-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-notification-backdrop-filter-rest)}ax-notification:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darker-surface))}@media(min-width:768px){ax-notification{width:calc(var(--spacing, .25rem) * 96)}}ax-notification .ax-notification-icon{padding-inline-end:calc(var(--spacing, .25rem) * 3);color:var(--ax-comp-bg)}ax-notification .ax-notification-content{display:flex;flex:1;flex-direction:column;justify-content:center;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface))}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-body{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}ax-notification .ax-notification-content .ax-notification-buttons{margin-top:calc(var(--spacing, .25rem) * 3);display:flex;gap:calc(var(--spacing, .25rem) * 3)}ax-notification .ax-notification-progress{position:absolute;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);width:100%;background-color:var(--ax-comp-bg);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;transition-duration:.3s;--tw-ease: linear;transition-timing-function:linear}ax-notification .ax-notification-icon{max-width:fit-content;align-items:flex-start!important;font-size:var(--text-xl, 1.25rem)!important;line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))!important}ax-notification ax-close-button{height:fit-content;max-width:fit-content;align-self:flex-start}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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;}@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-font-weight: initial;--tw-leading: initial;--tw-duration: initial;--tw-ease: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n", "@layer properties;@layer components{ax-notification.ax-notification-multi-step .ax-notification-title{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 2)}ax-notification.ax-notification-multi-step .ax-notification-step-indicator{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:rgba(var(--ax-sys-color-on-surface));--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}@supports (color: color-mix(in lab,red,red)){ax-notification.ax-notification-multi-step .ax-notification-step-indicator{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@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-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | 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 }] }], hostMultiStepClass: [{
+                type: HostBinding,
+                args: ['class.ax-notification-multi-step']
+            }] } });
 
 class AXNotificationModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }