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

package/fesm2022/acorex-components-loading-dialog.mjs

@@ -4,10 +4,10 @@ import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
 import { AXLoadingComponent } from '@acorex/components/loading';
 import { AXProgressBarComponent } from '@acorex/components/progress-bar';
 import { AXTranslatorPipe } from '@acorex/core/translation';
-import { DIALOG_DATA, DialogRef, Dialog } from '@angular/cdk/dialog';
 import { AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, Injectable } from '@angular/core';
+import { input, signal, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, inject, ComponentRef, Injectable } from '@angular/core';
+import { AXOverlayService } from '@acorex/cdk/overlay';
 
 /**
  * Represents a loading dialog component with custom styles and encapsulation.
@@ -16,18 +16,30 @@ import { inject, signal, ViewEncapsulation, ChangeDetectionStrategy, Component,
 class AXLoadingDialogComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.data = inject(DIALOG_DATA);
-        this.dialogRef = inject(DialogRef);
+        /** Loading dialog configuration data */
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+        /** @internal Callback function to close the dialog */
+        this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
         /** @ignore */
-        this.progressText = signal(this.data.text, ...(ngDevMode ? [{ debugName: "progressText" }] : []));
+        this.progressText = signal('', ...(ngDevMode ? [{ debugName: "progressText" }] : []));
         /** @ignore */
-        this.progressStatus = signal(this.data.status, ...(ngDevMode ? [{ debugName: "progressStatus" }] : []));
+        this.progressStatus = signal('', ...(ngDevMode ? [{ debugName: "progressStatus" }] : []));
         /** @ignore */
-        this.progressColor = signal(this.data.progressColor, ...(ngDevMode ? [{ debugName: "progressColor" }] : []));
+        this.progressColor = signal('primary', ...(ngDevMode ? [{ debugName: "progressColor" }] : []));
         /** @ignore */
-        this.dialogTitle = signal(this.data.title, ...(ngDevMode ? [{ debugName: "dialogTitle" }] : []));
+        this.dialogTitle = signal('', ...(ngDevMode ? [{ debugName: "dialogTitle" }] : []));
         /** @ignore */
-        this.progressValue = signal(this.data.progressValue, ...(ngDevMode ? [{ debugName: "progressValue" }] : []));
+        this.progressValue = signal(0, ...(ngDevMode ? [{ debugName: "progressValue" }] : []));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // Initialize signals from input data
+        const config = this.data();
+        this.progressText.set(config.text ?? '');
+        this.progressStatus.set(config.status ?? '');
+        this.progressColor.set(config.progressColor ?? 'primary');
+        this.dialogTitle.set(config.title ?? '');
+        this.progressValue.set(config.progressValue ?? 0);
     }
     /**
      * Closes the loading dialog.
@@ -35,7 +47,10 @@ class AXLoadingDialogComponent extends MXBaseComponent {
      * @returns void - No return value. The dialog is closed and control returns to the caller.
      */
     close() {
-        this.dialogRef.close();
+        const closeCallback = this.onClose();
+        if (closeCallback) {
+            closeCallback();
+        }
     }
     /**
      * Sets the displayed progress text inside the dialog.
@@ -90,22 +105,25 @@ class AXLoadingDialogComponent extends MXBaseComponent {
     }
     /** @ignore */
     _hasAutoFocus(button) {
-        const autoFocusItem = this.data.buttons.find((item) => item.autofocus === true);
+        const buttons = this.data().buttons;
+        if (!buttons || buttons.length === 0)
+            return false;
+        const autoFocusItem = buttons.find((item) => item.autofocus === true);
         if (autoFocusItem && autoFocusItem.text === button.text) {
             return true;
         }
         if (!autoFocusItem) {
-            if (this.data.buttons.length > 0) {
-                this.data.buttons[0].autofocus = true;
-                return this.data.buttons[0].text === button.text;
+            if (buttons.length > 0) {
+                buttons[0].autofocus = true;
+                return buttons[0].text === button.text;
             }
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXLoadingDialogComponent, isStandalone: true, selector: "ax-loading-dialog", providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }], usesInheritance: true, ngImport: i0, template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data.mode\" [progress]=\"this.progressValue()\" [color]=\"progressColor()\"></ax-progress-bar>\n<div class=\"progress-decorators\">\n  <div>{{ progressText() }}</div>\n  <div>{{ progressStatus() }}</div>\n</div>\n<ax-footer>\n  @for (button of data.buttons; track $index) {\n    <ax-button\n      [text]=\"button.text | translate | async\"\n      [tabindex]=\"$index\"\n      [axHotkey]=\"button.hotkey\"\n      [axAutoFocus]=\"_hasAutoFocus(button)\"\n      (onClick)=\"_handleButtonClick(button)\"\n      [look]=\"button.look\"\n      [disabled]=\"button.disabled\"\n      [color]=\"button.color\"\n    >\n      @if (button.loading) {\n        <ax-loading></ax-loading>\n      }\n    </ax-button>\n  }\n</ax-footer>\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-font-weight:initial}}}@layer components{ax-loading-dialog{gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-lg,.5rem);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:93vw;padding:calc(var(--spacing,.25rem)*4);flex-direction:column;display:flex}@media (min-width:40rem){ax-loading-dialog{width:80vw}}@media (min-width:48rem){ax-loading-dialog{width:55vw}}@media (min-width:64rem){ax-loading-dialog{width:30vw}}@media (min-width:80rem){ax-loading-dialog{width:25vw}}ax-loading-dialog ax-title{margin-bottom:calc(var(--spacing,.25rem)*2);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-loading-dialog .progress-decorators{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));justify-content:space-between;display:flex}ax-loading-dialog ax-footer{padding-top:calc(var(--spacing,.25rem)*3);justify-content:flex-end}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { 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: "directive", type: AXHotkeyDirective, selector: "[axHotkey]", inputs: ["axHotkey"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXLoadingDialogComponent, isStandalone: true, selector: "ax-loading-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }], usesInheritance: true, ngImport: i0, template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data().mode\" [progress]=\"progressValue()\" [color]=\"progressColor()\"></ax-progress-bar>\n<div class=\"progress-decorators\">\n  <div>{{ progressText() }}</div>\n  <div>{{ progressStatus() }}</div>\n</div>\n<ax-footer>\n  @for (button of data().buttons; track $index) {\n    <ax-button\n      [text]=\"button.text | translate | async\"\n      [tabindex]=\"$index\"\n      [axHotkey]=\"button.hotkey\"\n      [axAutoFocus]=\"_hasAutoFocus(button)\"\n      (onClick)=\"_handleButtonClick(button)\"\n      [look]=\"button.look\"\n      [disabled]=\"button.disabled\"\n      [color]=\"button.color\"\n    >\n      @if (button.loading) {\n        <ax-loading></ax-loading>\n      }\n    </ax-button>\n  }\n</ax-footer>\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-font-weight:initial}}}@layer components{ax-loading-dialog{gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:93vw;padding:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}@media(min-width:40rem){ax-loading-dialog{width:80vw}}@media(min-width:48rem){ax-loading-dialog{width:55vw}}@media(min-width:64rem){ax-loading-dialog{width:30vw}}@media(min-width:80rem){ax-loading-dialog{width:25vw}}ax-loading-dialog ax-title{margin-bottom:calc(var(--spacing,.25rem) * 2);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-loading-dialog .progress-decorators{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));justify-content:space-between;display:flex}ax-loading-dialog ax-footer{padding-top:calc(var(--spacing,.25rem) * 3);justify-content:flex-end}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXProgressBarComponent, selector: "ax-progress-bar", inputs: ["color", "mode", "progress", "height"], outputs: ["ValueChange", "sizeChange"] }, { 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: "directive", type: AXHotkeyDirective, selector: "[axHotkey]", inputs: ["axHotkey"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-loading-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         AXDecoratorGenericComponent,
@@ -116,15 +134,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXLoadingComponent,
                         AXTranslatorPipe,
                         AsyncPipe,
-                    ], providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }], template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data.mode\" [progress]=\"this.progressValue()\" [color]=\"progressColor()\"></ax-progress-bar>\n<div class=\"progress-decorators\">\n  <div>{{ progressText() }}</div>\n  <div>{{ progressStatus() }}</div>\n</div>\n<ax-footer>\n  @for (button of data.buttons; track $index) {\n    <ax-button\n      [text]=\"button.text | translate | async\"\n      [tabindex]=\"$index\"\n      [axHotkey]=\"button.hotkey\"\n      [axAutoFocus]=\"_hasAutoFocus(button)\"\n      (onClick)=\"_handleButtonClick(button)\"\n      [look]=\"button.look\"\n      [disabled]=\"button.disabled\"\n      [color]=\"button.color\"\n    >\n      @if (button.loading) {\n        <ax-loading></ax-loading>\n      }\n    </ax-button>\n  }\n</ax-footer>\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-font-weight:initial}}}@layer components{ax-loading-dialog{gap:calc(var(--spacing,.25rem)*2);border-radius:var(--radius-lg,.5rem);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:93vw;padding:calc(var(--spacing,.25rem)*4);flex-direction:column;display:flex}@media (min-width:40rem){ax-loading-dialog{width:80vw}}@media (min-width:48rem){ax-loading-dialog{width:55vw}}@media (min-width:64rem){ax-loading-dialog{width:30vw}}@media (min-width:80rem){ax-loading-dialog{width:25vw}}ax-loading-dialog ax-title{margin-bottom:calc(var(--spacing,.25rem)*2);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-loading-dialog .progress-decorators{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));justify-content:space-between;display:flex}ax-loading-dialog ax-footer{padding-top:calc(var(--spacing,.25rem)*3);justify-content:flex-end}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
-        }] });
+                    ], providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }], template: "<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data().mode\" [progress]=\"progressValue()\" [color]=\"progressColor()\"></ax-progress-bar>\n<div class=\"progress-decorators\">\n  <div>{{ progressText() }}</div>\n  <div>{{ progressStatus() }}</div>\n</div>\n<ax-footer>\n  @for (button of data().buttons; track $index) {\n    <ax-button\n      [text]=\"button.text | translate | async\"\n      [tabindex]=\"$index\"\n      [axHotkey]=\"button.hotkey\"\n      [axAutoFocus]=\"_hasAutoFocus(button)\"\n      (onClick)=\"_handleButtonClick(button)\"\n      [look]=\"button.look\"\n      [disabled]=\"button.disabled\"\n      [color]=\"button.color\"\n    >\n      @if (button.loading) {\n        <ax-loading></ax-loading>\n      }\n    </ax-button>\n  }\n</ax-footer>\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-font-weight:initial}}}@layer components{ax-loading-dialog{gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));width:93vw;padding:calc(var(--spacing,.25rem) * 4);flex-direction:column;display:flex}@media(min-width:40rem){ax-loading-dialog{width:80vw}}@media(min-width:48rem){ax-loading-dialog{width:55vw}}@media(min-width:64rem){ax-loading-dialog{width:30vw}}@media(min-width:80rem){ax-loading-dialog{width:25vw}}ax-loading-dialog ax-title{margin-bottom:calc(var(--spacing,.25rem) * 2);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-loading-dialog .progress-decorators{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));justify-content:space-between;display:flex}ax-loading-dialog ax-footer{padding-top:calc(var(--spacing,.25rem) * 3);justify-content:flex-end}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }] } });
 
 class AXLoadingDialogModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogModule, imports: [AXLoadingDialogComponent], exports: [AXLoadingDialogComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogModule, imports: [AXLoadingDialogComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogModule, imports: [AXLoadingDialogComponent], exports: [AXLoadingDialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogModule, imports: [AXLoadingDialogComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXLoadingDialogComponent],
@@ -134,40 +152,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class AXLoadingDialogService {
     constructor() {
-        this.dialog = inject(Dialog);
+        this.overlayService = inject(AXOverlayService);
     }
-    // private data$: BehaviorSubject<AXLoadingDialogConfig> = new BehaviorSubject<AXLoadingDialogConfig>(null);
     /**
      * Opens a loading dialog with the specified configuration.
      *
      * @param options Configuration for the loading dialog, including title, progress mode, and optional initial values.
-     * @returns AXDialogRef - A reference with helper methods to control the dialog lifecycle and UI (close, setProgressValue, setProgressText, setDialogTitle, setProgressColor, setProgressStatus).
+     * @returns AXLoadingDialogRef - A reference with helper methods to control the dialog lifecycle and UI (close, setProgressValue, setProgressText, setDialogTitle, setProgressColor, setProgressStatus).
      */
     show(options) {
-        const dialogRef = this.dialog.open(AXLoadingDialogComponent, {
-            hasBackdrop: true,
-            disableClose: true,
-            restoreFocus: true,
-            closeOnDestroy: true,
-            closeOnNavigation: true,
-            ariaModal: true,
-            role: 'alertdialog',
-            panelClass: ['animate-fadeIn'],
-            data: options,
+        let internalRef;
+        let componentInstance = null;
+        const closeDialog = () => {
+            if (internalRef) {
+                internalRef.overlayRef.dispose();
+            }
+        };
+        this.overlayService
+            .create(AXLoadingDialogComponent, {
+            inputs: {
+                data: options,
+                onClose: closeDialog,
+            },
+            backdrop: {
+                enabled: true,
+                background: true,
+                closeOnClick: false, // disableClose: true equivalent
+            },
+            panelClass: ['ax-loading-dialog-panel', 'ax-animate-fadeIn'],
+        })
+            .then((overlayRef) => {
+            internalRef = {
+                overlayRef,
+                close: closeDialog,
+            };
+            // Get the component instance for method calls
+            if (overlayRef.instance instanceof ComponentRef) {
+                componentInstance = overlayRef.instance.instance;
+            }
         });
+        // Return the dialog ref with methods that will work once the component is created
         return {
-            close: () => dialogRef.componentInstance?.close(),
-            setProgressValue: (value) => dialogRef.componentInstance?.setProgressValue(value),
-            setDialogTitle: (text) => dialogRef.componentInstance?.setDialogTitle(text),
-            setProgressText: (text) => dialogRef.componentInstance?.setProgressText(text),
-            setProgressStatus: (status) => dialogRef.componentInstance?.setProgressStatus(status),
-            setProgressColor: (color) => dialogRef.componentInstance?.setProgressColor(color),
+            close: () => closeDialog(),
+            setProgressValue: (value) => componentInstance?.setProgressValue(value),
+            setDialogTitle: (text) => componentInstance?.setDialogTitle(text),
+            setProgressText: (text) => componentInstance?.setProgressText(text),
+            setProgressStatus: (status) => componentInstance?.setProgressStatus(status),
+            setProgressColor: (color) => componentInstance?.setProgressColor(color),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/fesm2022/acorex-components-loading-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-loading-dialog.mjs","sources":["../../../../packages/components/loading-dialog/src/lib/loading-dialog.component.ts","../../../../packages/components/loading-dialog/src/lib/loading-dialog.component.html","../../../../packages/components/loading-dialog/src/lib/loading-dialog.module.ts","../../../../packages/components/loading-dialog/src/lib/loading-dialog.service.ts","../../../../packages/components/loading-dialog/src/acorex-components-loading-dialog.ts"],"sourcesContent":["import {\n  AXAutoFocusDirective,\n  AXComponent,\n  AXComponentCloseEvent,\n  AXHotkeyDirective,\n  AXStyleColorType,\n  MXBaseComponent,\n} from '@acorex/cdk/common';\nimport { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorGenericComponent } from '@acorex/components/decorators';\nimport { AXLoadingComponent } from '@acorex/components/loading';\nimport { AXProgressBarComponent } from '@acorex/components/progress-bar';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation, WritableSignal, inject, signal } from '@angular/core';\nimport { AXLoadingDialogButtonItem, AXLoadingDialogConfig } from './loading-dialog.class';\n\n/**\n * Represents a loading dialog component with custom styles and encapsulation.\n * @category components\n */\n@Component({\n  selector: 'ax-loading-dialog',\n  templateUrl: './loading-dialog.component.html',\n  styleUrls: ['./loading-dialog.component.compiled.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    AXDecoratorGenericComponent,\n    AXProgressBarComponent,\n    AXButtonComponent,\n    AXHotkeyDirective,\n    AXAutoFocusDirective,\n    AXLoadingComponent,\n    AXTranslatorPipe,\n    AsyncPipe,\n  ],\n  providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }],\n})\nexport class AXLoadingDialogComponent extends MXBaseComponent {\n  data = inject<AXLoadingDialogConfig>(DIALOG_DATA);\n  private dialogRef = inject<DialogRef<AXComponentCloseEvent>>(DialogRef);\n\n  /** @ignore */\n  protected progressText: WritableSignal<string> = signal(this.data.text);\n\n  /** @ignore */\n  protected progressStatus: WritableSignal<string> = signal(this.data.status);\n\n  /** @ignore */\n  protected progressColor: WritableSignal<AXStyleColorType> = signal(this.data.progressColor);\n\n  /** @ignore */\n  protected dialogTitle: WritableSignal<string> = signal(this.data.title);\n\n  /** @ignore */\n  protected progressValue: WritableSignal<number> = signal(this.data.progressValue);\n\n  /**\n   * Closes the loading dialog.\n   *\n   * @returns void - No return value. The dialog is closed and control returns to the caller.\n   */\n  close() {\n    this.dialogRef.close();\n  }\n\n  /**\n   * Sets the displayed progress text inside the dialog.\n   *\n   * @param text The text to display under the progress bar.\n   * @returns void\n   */\n  setProgressText(text: string) {\n    this.progressText.set(text);\n  }\n\n  /**\n   * Sets the status text, typically representing the current step out of total steps (e.g., \"5/10\").\n   *\n   * @param status The status text to display.\n   * @returns void\n   */\n  setProgressStatus(status: string) {\n    this.progressStatus.set(status);\n  }\n\n  /**\n   * Sets the color used by the progress indicator.\n   *\n   * @param color The color token to apply to the progress UI.\n   * @returns void\n   */\n  setProgressColor(color: AXStyleColorType) {\n    this.progressColor.set(color);\n  }\n\n  /**\n   * Sets the dialog title text.\n   *\n   * @param text The title text to display at the top of the dialog.\n   * @returns void\n   */\n  setDialogTitle(text: string) {\n    this.dialogTitle.set(text);\n  }\n\n  /**\n   * Sets the numeric progress value.\n   *\n   * @param value A number in the range 0–100 representing the current progress.\n   * @returns void\n   */\n  setProgressValue(value: number) {\n    this.progressValue.set(value);\n  }\n\n  /** @ignore */\n  protected _handleButtonClick(button: AXLoadingDialogButtonItem) {\n    if (button.onClick) {\n      button.onClick({ source: button });\n    }\n  }\n\n  /** @ignore */\n  protected _hasAutoFocus(button: AXLoadingDialogButtonItem) {\n    const autoFocusItem = this.data.buttons.find((item) => item.autofocus === true);\n    if (autoFocusItem && autoFocusItem.text === button.text) {\n      return true;\n    }\n    if (!autoFocusItem) {\n      if (this.data.buttons.length > 0) {\n        this.data.buttons[0].autofocus = true;\n        return this.data.buttons[0].text === button.text;\n      }\n    }\n    return false;\n  }\n}\n","<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data.mode\" [progress]=\"this.progressValue()\" [color]=\"progressColor()\"></ax-progress-bar>\n<div class=\"progress-decorators\">\n  <div>{{ progressText() }}</div>\n  <div>{{ progressStatus() }}</div>\n</div>\n<ax-footer>\n  @for (button of data.buttons; track $index) {\n    <ax-button\n      [text]=\"button.text | translate | async\"\n      [tabindex]=\"$index\"\n      [axHotkey]=\"button.hotkey\"\n      [axAutoFocus]=\"_hasAutoFocus(button)\"\n      (onClick)=\"_handleButtonClick(button)\"\n      [look]=\"button.look\"\n      [disabled]=\"button.disabled\"\n      [color]=\"button.color\"\n    >\n      @if (button.loading) {\n        <ax-loading></ax-loading>\n      }\n    </ax-button>\n  }\n</ax-footer>\n","import { NgModule } from '@angular/core';\nimport { AXLoadingDialogComponent } from './loading-dialog.component';\n\n@NgModule({\n  imports: [AXLoadingDialogComponent],\n  exports: [AXLoadingDialogComponent],\n})\nexport class AXLoadingDialogModule {}\n","import { AXStyleColorType } from '@acorex/cdk/common';\nimport { Dialog } from '@angular/cdk/dialog';\nimport { Injectable, inject } from '@angular/core';\nimport { AXDialogRef, AXLoadingDialogConfig } from './loading-dialog.class';\nimport { AXLoadingDialogComponent } from './loading-dialog.component';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class AXLoadingDialogService {\n  private dialog = inject(Dialog);\n\n  // private data$: BehaviorSubject<AXLoadingDialogConfig> = new BehaviorSubject<AXLoadingDialogConfig>(null);\n\n  /**\n   * Opens a loading dialog with the specified configuration.\n   *\n   * @param options Configuration for the loading dialog, including title, progress mode, and optional initial values.\n   * @returns AXDialogRef - A reference with helper methods to control the dialog lifecycle and UI (close, setProgressValue, setProgressText, setDialogTitle, setProgressColor, setProgressStatus).\n   */\n  show(options: AXLoadingDialogConfig): AXDialogRef {\n    const dialogRef = this.dialog.open(AXLoadingDialogComponent, {\n      hasBackdrop: true,\n      disableClose: true,\n      restoreFocus: true,\n      closeOnDestroy: true,\n      closeOnNavigation: true,\n      ariaModal: true,\n      role: 'alertdialog',\n      panelClass: ['animate-fadeIn'],\n      data: options,\n    });\n    return {\n      close: () => dialogRef.componentInstance?.close(),\n      setProgressValue: (value: number) => dialogRef.componentInstance?.setProgressValue(value),\n      setDialogTitle: (text: string) => dialogRef.componentInstance?.setDialogTitle(text),\n      setProgressText: (text: string) => dialogRef.componentInstance?.setProgressText(text),\n      setProgressStatus: (status: string) => dialogRef.componentInstance?.setProgressStatus(status),\n      setProgressColor: (color: AXStyleColorType) => dialogRef.componentInstance?.setProgressColor(color),\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-loading-dialog.mjs","sources":["../../../../packages/components/loading-dialog/src/lib/loading-dialog.component.ts","../../../../packages/components/loading-dialog/src/lib/loading-dialog.component.html","../../../../packages/components/loading-dialog/src/lib/loading-dialog.module.ts","../../../../packages/components/loading-dialog/src/lib/loading-dialog.service.ts","../../../../packages/components/loading-dialog/src/acorex-components-loading-dialog.ts"],"sourcesContent":["import {\n  AXAutoFocusDirective,\n  AXComponent,\n  AXHotkeyDirective,\n  AXStyleColorType,\n  MXBaseComponent,\n} from '@acorex/cdk/common';\nimport { AXButtonComponent } from '@acorex/components/button';\nimport { AXDecoratorGenericComponent } from '@acorex/components/decorators';\nimport { AXLoadingComponent } from '@acorex/components/loading';\nimport { AXProgressBarComponent } from '@acorex/components/progress-bar';\nimport { AXTranslatorPipe } from '@acorex/core/translation';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, WritableSignal, input, signal } from '@angular/core';\nimport { AXLoadingDialogButtonItem, AXLoadingDialogConfig } from './loading-dialog.class';\n\n/**\n * Represents a loading dialog component with custom styles and encapsulation.\n * @category components\n */\n@Component({\n  selector: 'ax-loading-dialog',\n  templateUrl: './loading-dialog.component.html',\n  styleUrls: ['./loading-dialog.component.compiled.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    AXDecoratorGenericComponent,\n    AXProgressBarComponent,\n    AXButtonComponent,\n    AXHotkeyDirective,\n    AXAutoFocusDirective,\n    AXLoadingComponent,\n    AXTranslatorPipe,\n    AsyncPipe,\n  ],\n  providers: [{ provide: AXComponent, useExisting: AXLoadingDialogComponent }],\n})\nexport class AXLoadingDialogComponent extends MXBaseComponent implements OnInit {\n  /** Loading dialog configuration data */\n  data = input.required<AXLoadingDialogConfig>();\n\n  /** @internal Callback function to close the dialog */\n  onClose = input<() => void>();\n\n  /** @ignore */\n  protected progressText: WritableSignal<string> = signal('');\n\n  /** @ignore */\n  protected progressStatus: WritableSignal<string> = signal('');\n\n  /** @ignore */\n  protected progressColor: WritableSignal<AXStyleColorType> = signal('primary');\n\n  /** @ignore */\n  protected dialogTitle: WritableSignal<string> = signal('');\n\n  /** @ignore */\n  protected progressValue: WritableSignal<number> = signal(0);\n\n  override ngOnInit(): void {\n    super.ngOnInit();\n    // Initialize signals from input data\n    const config = this.data();\n    this.progressText.set(config.text ?? '');\n    this.progressStatus.set(config.status ?? '');\n    this.progressColor.set(config.progressColor ?? 'primary');\n    this.dialogTitle.set(config.title ?? '');\n    this.progressValue.set(config.progressValue ?? 0);\n  }\n\n  /**\n   * Closes the loading dialog.\n   *\n   * @returns void - No return value. The dialog is closed and control returns to the caller.\n   */\n  close() {\n    const closeCallback = this.onClose();\n    if (closeCallback) {\n      closeCallback();\n    }\n  }\n\n  /**\n   * Sets the displayed progress text inside the dialog.\n   *\n   * @param text The text to display under the progress bar.\n   * @returns void\n   */\n  setProgressText(text: string) {\n    this.progressText.set(text);\n  }\n\n  /**\n   * Sets the status text, typically representing the current step out of total steps (e.g., \"5/10\").\n   *\n   * @param status The status text to display.\n   * @returns void\n   */\n  setProgressStatus(status: string) {\n    this.progressStatus.set(status);\n  }\n\n  /**\n   * Sets the color used by the progress indicator.\n   *\n   * @param color The color token to apply to the progress UI.\n   * @returns void\n   */\n  setProgressColor(color: AXStyleColorType) {\n    this.progressColor.set(color);\n  }\n\n  /**\n   * Sets the dialog title text.\n   *\n   * @param text The title text to display at the top of the dialog.\n   * @returns void\n   */\n  setDialogTitle(text: string) {\n    this.dialogTitle.set(text);\n  }\n\n  /**\n   * Sets the numeric progress value.\n   *\n   * @param value A number in the range 0–100 representing the current progress.\n   * @returns void\n   */\n  setProgressValue(value: number) {\n    this.progressValue.set(value);\n  }\n\n  /** @ignore */\n  protected _handleButtonClick(button: AXLoadingDialogButtonItem) {\n    if (button.onClick) {\n      button.onClick({ source: button });\n    }\n  }\n\n  /** @ignore */\n  protected _hasAutoFocus(button: AXLoadingDialogButtonItem) {\n    const buttons = this.data().buttons;\n    if (!buttons || buttons.length === 0) return false;\n\n    const autoFocusItem = buttons.find((item) => item.autofocus === true);\n    if (autoFocusItem && autoFocusItem.text === button.text) {\n      return true;\n    }\n    if (!autoFocusItem) {\n      if (buttons.length > 0) {\n        buttons[0].autofocus = true;\n        return buttons[0].text === button.text;\n      }\n    }\n    return false;\n  }\n}\n","<ax-title>{{ dialogTitle() }}</ax-title>\n\n<ax-progress-bar [mode]=\"data().mode\" [progress]=\"progressValue()\" [color]=\"progressColor()\"></ax-progress-bar>\n<div class=\"progress-decorators\">\n  <div>{{ progressText() }}</div>\n  <div>{{ progressStatus() }}</div>\n</div>\n<ax-footer>\n  @for (button of data().buttons; track $index) {\n    <ax-button\n      [text]=\"button.text | translate | async\"\n      [tabindex]=\"$index\"\n      [axHotkey]=\"button.hotkey\"\n      [axAutoFocus]=\"_hasAutoFocus(button)\"\n      (onClick)=\"_handleButtonClick(button)\"\n      [look]=\"button.look\"\n      [disabled]=\"button.disabled\"\n      [color]=\"button.color\"\n    >\n      @if (button.loading) {\n        <ax-loading></ax-loading>\n      }\n    </ax-button>\n  }\n</ax-footer>\n","import { NgModule } from '@angular/core';\nimport { AXLoadingDialogComponent } from './loading-dialog.component';\n\n@NgModule({\n  imports: [AXLoadingDialogComponent],\n  exports: [AXLoadingDialogComponent],\n})\nexport class AXLoadingDialogModule {}\n","import { AXStyleColorType } from '@acorex/cdk/common';\nimport { AXOverlayService } from '@acorex/cdk/overlay';\nimport { ComponentRef, Injectable, inject } from '@angular/core';\nimport { AXLoadingDialogConfig, AXLoadingDialogInternalRef, AXLoadingDialogRef } from './loading-dialog.class';\nimport { AXLoadingDialogComponent } from './loading-dialog.component';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class AXLoadingDialogService {\n  private overlayService = inject(AXOverlayService);\n\n  /**\n   * Opens a loading dialog with the specified configuration.\n   *\n   * @param options Configuration for the loading dialog, including title, progress mode, and optional initial values.\n   * @returns AXLoadingDialogRef - A reference with helper methods to control the dialog lifecycle and UI (close, setProgressValue, setProgressText, setDialogTitle, setProgressColor, setProgressStatus).\n   */\n  show(options: AXLoadingDialogConfig): AXLoadingDialogRef {\n    let internalRef: AXLoadingDialogInternalRef;\n    let componentInstance: AXLoadingDialogComponent | null = null;\n\n    const closeDialog = () => {\n      if (internalRef) {\n        internalRef.overlayRef.dispose();\n      }\n    };\n\n    this.overlayService\n      .create<AXLoadingDialogComponent>(AXLoadingDialogComponent, {\n        inputs: {\n          data: options,\n          onClose: closeDialog,\n        },\n        backdrop: {\n          enabled: true,\n          background: true,\n          closeOnClick: false, // disableClose: true equivalent\n        },\n        panelClass: ['ax-loading-dialog-panel', 'ax-animate-fadeIn'],\n      })\n      .then((overlayRef) => {\n        internalRef = {\n          overlayRef,\n          close: closeDialog,\n        };\n\n        // Get the component instance for method calls\n        if (overlayRef.instance instanceof ComponentRef) {\n          componentInstance = overlayRef.instance.instance as AXLoadingDialogComponent;\n        }\n      });\n\n    // Return the dialog ref with methods that will work once the component is created\n    return {\n      close: () => closeDialog(),\n      setProgressValue: (value: number) => componentInstance?.setProgressValue(value),\n      setDialogTitle: (text: string) => componentInstance?.setDialogTitle(text),\n      setProgressText: (text: string) => componentInstance?.setProgressText(text),\n      setProgressStatus: (status: string) => componentInstance?.setProgressStatus(status),\n      setProgressColor: (color: AXStyleColorType) => componentInstance?.setProgressColor(color),\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-loading.mjs

@@ -1,8 +1,9 @@
 import { AXComponent, MXBaseComponent } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { HostBinding, Input, ViewEncapsulation, Component, InjectionToken, inject, EventEmitter, Output, ChangeDetectionStrategy, Injectable, ElementRef, Directive, NgModule } from '@angular/core';
+import { HostBinding, Input, ViewEncapsulation, Component, InjectionToken, inject, EventEmitter, Output, ChangeDetectionStrategy, ComponentRef, Injectable, ElementRef, Directive, NgModule } from '@angular/core';
 import { ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { Dialog } from '@angular/cdk/dialog';
+import { AXOverlayService } from '@acorex/cdk/overlay';
+import { DOCUMENT } from '@angular/common';
 import { asyncScheduler, BehaviorSubject } from 'rxjs';
 import { observeOn, finalize } from 'rxjs/operators';
 
@@ -34,8 +35,8 @@ class AXLoadingSpinnerComponent {
     get __hostClass() {
         return `ax-${this.color}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXLoadingSpinnerComponent, isStandalone: true, selector: "ax-loading-spinner", inputs: { text: "text", color: "color", size: "size", stroke: "stroke" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXLoadingSpinnerComponent }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXLoadingSpinnerComponent, isStandalone: true, selector: "ax-loading-spinner", inputs: { text: "text", color: "color", size: "size", stroke: "stroke" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXLoadingSpinnerComponent }], ngImport: i0, template: `
     <span
       class="ax-loader"
       [style.width.px]="size"
@@ -46,9 +47,9 @@ class AXLoadingSpinnerComponent {
     @if (text) {
       <span> {{ text }} </span>
     }
-  `, isInline: true, styles: ["@layer components{ax-loading-spinner .ax-loader{box-sizing:border-box;animation:var(--animate-spin,spin 1s linear infinite);border-color:var(--ax-comp-bg);border-radius:3.40282e38px;margin:auto;display:inline-block;border-bottom-color:#0000!important}ax-loading-spinner.ax-white .ax-loader{border-color:var(--color-white,#fff)}ax-loading-spinner.ax-default .ax-loader{border-color:var(--color-black,#000)}ax-loading-spinner.ax-default .ax-loader:where(.dark,.dark *){border-color:var(--color-white,#fff)}ax-loading-spinner.ax-black .ax-loader{border-color:var(--color-black,#000)}}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{ax-loading-spinner .ax-loader{box-sizing:border-box;animation:var(--animate-spin,spin 1s linear infinite);border-color:var(--ax-comp-bg);border-radius:3.40282e38px;margin:auto;display:inline-block;border-bottom-color:#0000!important}ax-loading-spinner.ax-white .ax-loader{border-color:var(--color-white,#fff)}ax-loading-spinner.ax-default .ax-loader{border-color:var(--color-black,#000)}ax-loading-spinner.ax-default .ax-loader:where(.dark,.dark *){border-color:var(--color-white,#fff)}ax-loading-spinner.ax-black .ax-loader{border-color:var(--color-black,#000)}}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-loading-spinner', template: `
     <span
@@ -61,7 +62,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     @if (text) {
       <span> {{ text }} </span>
     }
-  `, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXLoadingSpinnerComponent }], styles: ["@layer components{ax-loading-spinner .ax-loader{box-sizing:border-box;animation:var(--animate-spin,spin 1s linear infinite);border-color:var(--ax-comp-bg);border-radius:3.40282e38px;margin:auto;display:inline-block;border-bottom-color:#0000!important}ax-loading-spinner.ax-white .ax-loader{border-color:var(--color-white,#fff)}ax-loading-spinner.ax-default .ax-loader{border-color:var(--color-black,#000)}ax-loading-spinner.ax-default .ax-loader:where(.dark,.dark *){border-color:var(--color-white,#fff)}ax-loading-spinner.ax-black .ax-loader{border-color:var(--color-black,#000)}}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+  `, encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXLoadingSpinnerComponent }], styles: ["@layer components{ax-loading-spinner .ax-loader{box-sizing:border-box;animation:var(--animate-spin,spin 1s linear infinite);border-color:var(--ax-comp-bg);border-radius:3.40282e38px;margin:auto;display:inline-block;border-bottom-color:#0000!important}ax-loading-spinner.ax-white .ax-loader{border-color:var(--color-white,#fff)}ax-loading-spinner.ax-default .ax-loader{border-color:var(--color-black,#000)}ax-loading-spinner.ax-default .ax-loader:where(.dark,.dark *){border-color:var(--color-white,#fff)}ax-loading-spinner.ax-black .ax-loader{border-color:var(--color-black,#000)}}@keyframes spin{to{transform:rotate(360deg)}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], color: [{
@@ -144,12 +145,12 @@ class AXLoadingComponent extends MXBaseComponent {
             Object.assign(ref.instance, this.context);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXLoadingComponent, isStandalone: true, selector: "ax-loading", inputs: { visible: "visible", type: "type", context: "context" }, outputs: { visibleChange: "visibleChange" }, providers: [{ provide: AXComponent, useExisting: AXLoadingComponent }], usesInheritance: true, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttached($event)"></ng-template> `, isInline: true, 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-content:\"\";--tw-outline-style:solid}}}@layer components{ax-loading{padding-inline:calc(var(--spacing,.25rem)*2);position:relative}ax-loading:before,ax-loading:after{--tw-translate-x:-50%;--tw-translate-y:-50%;width:100%;height:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,);animation:var(--animate-pulse,1s ease-in-out both pulse);--tw-content:\"\";content:var(--tw-content);inset-inline-start:50%;background-color:#0000;border-radius:3.40282e38px;animation-iteration-count:infinite;position:absolute;top:50%}ax-loading ax-loading-spinner{gap:calc(var(--spacing,.25rem)*3);display:flex}.ax-loading-overlay-backdrop{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));opacity:.6!important}.ax-loading-pane{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{justify-content:center;align-items:center;display:flex!important}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline-style:var(--tw-outline-style);outline-offset:2px;--tw-outline-style:solid;outline:2px solid #0000}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXLoadingComponent, isStandalone: true, selector: "ax-loading", inputs: { visible: "visible", type: "type", context: "context" }, outputs: { visibleChange: "visibleChange" }, providers: [{ provide: AXComponent, useExisting: AXLoadingComponent }], usesInheritance: true, ngImport: i0, template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttached($event)"></ng-template> `, isInline: true, 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-content:\"\";--tw-outline-style:solid}}}@layer components{ax-loading{padding-inline:calc(var(--spacing,.25rem) * 2);position:relative}ax-loading:before,ax-loading:after{--tw-translate-x:-50%;--tw-translate-y:-50%;width:100%;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);animation:var(--animate-pulse,1s ease-in-out both pulse);--tw-content:\"\";content:var(--tw-content);inset-inline-start:50%;background-color:#0000;border-radius:3.40282e38px;animation-iteration-count:infinite;position:absolute;top:50%}ax-loading ax-loading-spinner{gap:calc(var(--spacing,.25rem) * 3);display:flex}.ax-loading-overlay-backdrop{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));opacity:.6!important}.ax-loading-pane{inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{justify-content:center;align-items:center;display:flex!important}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline-style:var(--tw-outline-style);outline-offset:2px;--tw-outline-style:solid;outline:2px solid #0000}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-loading', template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttached($event)"></ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkPortalOutlet], providers: [{ provide: AXComponent, useExisting: AXLoadingComponent }], 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-content:\"\";--tw-outline-style:solid}}}@layer components{ax-loading{padding-inline:calc(var(--spacing,.25rem)*2);position:relative}ax-loading:before,ax-loading:after{--tw-translate-x:-50%;--tw-translate-y:-50%;width:100%;height:100%;translate:var(--tw-translate-x)var(--tw-translate-y);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,);animation:var(--animate-pulse,1s ease-in-out both pulse);--tw-content:\"\";content:var(--tw-content);inset-inline-start:50%;background-color:#0000;border-radius:3.40282e38px;animation-iteration-count:infinite;position:absolute;top:50%}ax-loading ax-loading-spinner{gap:calc(var(--spacing,.25rem)*3);display:flex}.ax-loading-overlay-backdrop{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));opacity:.6!important}.ax-loading-pane{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{justify-content:center;align-items:center;display:flex!important}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline-style:var(--tw-outline-style);outline-offset:2px;--tw-outline-style:solid;outline:2px solid #0000}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-loading', template: ` <ng-template [cdkPortalOutlet]="_selectedPortal" (attached)="_handleAttached($event)"></ng-template> `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CdkPortalOutlet], providers: [{ provide: AXComponent, useExisting: AXLoadingComponent }], 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-content:\"\";--tw-outline-style:solid}}}@layer components{ax-loading{padding-inline:calc(var(--spacing,.25rem) * 2);position:relative}ax-loading:before,ax-loading:after{--tw-translate-x:-50%;--tw-translate-y:-50%;width:100%;height:100%;translate:var(--tw-translate-x) var(--tw-translate-y);transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);animation:var(--animate-pulse,1s ease-in-out both pulse);--tw-content:\"\";content:var(--tw-content);inset-inline-start:50%;background-color:#0000;border-radius:3.40282e38px;animation-iteration-count:infinite;position:absolute;top:50%}ax-loading ax-loading-spinner{gap:calc(var(--spacing,.25rem) * 3);display:flex}.ax-loading-overlay-backdrop{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));opacity:.6!important}.ax-loading-pane{inset-inline-start:calc(var(--spacing,.25rem) * 0);inset-inline-end:calc(var(--spacing,.25rem) * 0);top:calc(var(--spacing,.25rem) * 0);bottom:calc(var(--spacing,.25rem) * 0);width:100%!important;height:100%!important}.ax-loading-pane .cdk-dialog-container{justify-content:center;align-items:center;display:flex!important}.ax-loading-pane .cdk-dialog-container:focus,.ax-loading-pane .cdk-dialog-container:focus-visible,.ax-loading-pane .cdk-dialog-container:focus-within{outline-style:var(--tw-outline-style);outline-offset:2px;--tw-outline-style:solid;outline:2px solid #0000}}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { visibleChange: [{
                 type: Output
             }], visible: [{
@@ -169,7 +170,9 @@ class AXLoadingService {
         // Both loading state maps are kept in-sync such that
         // they can be used by both sync and async methods.
         this.loadingStates$ = new WeakMap();
-        this.dialog = inject(Dialog);
+        this.overlayService = inject(AXOverlayService);
+        this.document = inject(DOCUMENT);
+        this.activeOverlays = new Map();
     }
     /**
      * Shows a modal loading overlay.
@@ -181,34 +184,70 @@ class AXLoadingService {
      * @returns number Unique loading reference id to be used with {@link hide}.
      */
     show(config) {
-        const ce = (config?.location ?? document.body);
-        const dialogRef = this.dialog.open(AXLoadingComponent, {
-            hasBackdrop: true,
-            disableClose: true,
-            restoreFocus: true,
-            closeOnDestroy: true,
-            closeOnNavigation: true,
-            ariaModal: true,
-            role: 'alertdialog',
-            panelClass: ['ax-loading-pane', 'animate-fadeIn'],
-            backdropClass: ['ax-loading-overlay-backdrop', 'animate-fadeIn'],
-        });
+        const ce = (config?.location ?? this.document.body);
         const id = new Date().getTime();
-        dialogRef.componentInstance.visible = true;
-        dialogRef.componentInstance.id = id.toString();
-        if (ce != document.body) {
-            const bg = dialogRef.overlayRef.backdropElement;
-            const ov = dialogRef.overlayRef.overlayElement;
-            ce.style.position = 'relative';
-            ov.style.position = 'absolute';
-            ce.appendChild(bg);
-            ce.appendChild(ov);
-            setTimeout(() => {
-                ov.style.position = 'absolute';
-            });
-        }
+        const isElementLevel = ce !== this.document.body;
+        const inputs = {};
+        if (config?.type)
+            inputs['type'] = config.type;
+        if (config?.context)
+            inputs['context'] = config.context;
+        const entry = {
+            dispose: () => {
+                /* noop until overlay is created */
+            },
+        };
+        this.activeOverlays.set(id, entry);
+        this.overlayService
+            .create(AXLoadingComponent, {
+            inputs,
+            backdrop: isElementLevel
+                ? { enabled: false }
+                : {
+                    enabled: true,
+                    background: true,
+                    closeOnClick: false,
+                    backdropClass: 'ax-loading-overlay-backdrop',
+                },
+            panelClass: ['ax-loading-pane', 'ax-animate-fadeIn'],
+        })
+            .then((overlayRef) => {
+            if (overlayRef.instance instanceof ComponentRef) {
+                const instance = overlayRef.instance.instance;
+                instance.visible = true;
+                instance.id = id.toString();
+            }
+            if (isElementLevel) {
+                const backdrop = this.document.createElement('div');
+                backdrop.classList.add('ax-loading-overlay-backdrop', 'ax-animate-fadeIn');
+                backdrop.style.position = 'absolute';
+                backdrop.style.top = '0';
+                backdrop.style.left = '0';
+                backdrop.style.width = '100%';
+                backdrop.style.height = '100%';
+                ce.style.position = 'relative';
+                const ov = overlayRef.overlayElement;
+                if (ov) {
+                    ov.style.position = 'absolute';
+                    ce.appendChild(backdrop);
+                    ce.appendChild(ov);
+                    setTimeout(() => {
+                        ov.style.position = 'absolute';
+                    });
+                }
+                entry.dispose = () => {
+                    backdrop.remove();
+                    overlayRef.dispose();
+                };
+            }
+            else {
+                entry.dispose = () => overlayRef.dispose();
+            }
+            if (!this.activeOverlays.has(id)) {
+                entry.dispose();
+            }
+        });
         return id;
-        // TODO: diabled focus and click, maybe we need a service and directive for it
     }
     /**
      * Hides a previously shown modal loading overlay.
@@ -216,9 +255,10 @@ class AXLoadingService {
      * @param id Loading reference id returned by {@link show}.
      */
     hide(id) {
-        const f = this.dialog.openDialogs.find((c) => c.componentInstance.id === id.toString());
-        if (f) {
-            f.close();
+        const entry = this.activeOverlays.get(id);
+        if (entry) {
+            entry.dispose();
+            this.activeOverlays.delete(id);
         }
     }
     /**
@@ -328,10 +368,10 @@ class AXLoadingService {
     getLoaderId(loaderId) {
         return loaderId ?? DEFAULT_LOADER_ID;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -360,10 +400,10 @@ class AXLoadingDirective {
         this.loadingService = inject(AXLoadingService);
         this._hostElement = this.elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: AXLoadingDirective, isStandalone: true, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: AXLoadingDirective, isStandalone: true, selector: "[axIsLoading]", inputs: { isLoading: ["axIsLoading", "isLoading"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axIsLoading]' }]
         }], ctorParameters: () => [], propDecorators: { isLoading: [{
@@ -372,11 +412,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class AXLoadingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingModule, imports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingModule, imports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent], exports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXLoadingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXLoadingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXLoadingComponent, AXLoadingDirective, AXLoadingSpinnerComponent],