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

package/fesm2022/acorex-components-dialog.mjs

@@ -3,12 +3,12 @@ import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
 import { AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { DIALOG_DATA, DialogRef, Dialog, DialogModule } from '@angular/cdk/dialog';
 import { CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
 import { AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, Injectable, NgModule } from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, inject, Injectable, NgModule } from '@angular/core';
 import { A11yModule } from '@angular/cdk/a11y';
+import { AXOverlayService } from '@acorex/cdk/overlay';
 import { AXHtmlUtil } from '@acorex/core/utils';
 import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
 import { set } from 'lodash-es';
@@ -20,8 +20,10 @@ import { set } from 'lodash-es';
 class AXDialogComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.data = inject(DIALOG_DATA);
-        this.dialogRef = inject(DialogRef);
+        /** 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
@@ -35,14 +37,15 @@ class AXDialogComponent extends MXBaseComponent {
      *  @ignore
      */
     _hasAutoFocus(button) {
-        const autoFocusItem = this.data.buttons.find((item) => item.autofocus === true);
+        const buttons = this.data().buttons;
+        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;
@@ -53,20 +56,13 @@ class AXDialogComponent extends MXBaseComponent {
      * @returns void - No return value. The dialog is closed and removed from the DOM.
      */
     close() {
-        this.dialogRef.close();
-    }
-    /**
-     *  @ignore
-     */
-    get tabIndex() {
-        return '-1';
-    }
-    /** @ignore */
-    get __hostClass() {
-        return `ax-${this.data.type}`;
+        const closeCallback = this.onClose();
+        if (closeCallback) {
+            closeCallback();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXDialogComponent, isStandalone: true, selector: "ax-dialog", host: { properties: { "attr.tabIndex": "this.tabIndex", "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXDialogComponent, isStandalone: true, selector: "ax-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabIndex": "\"-1\"", "class": "\"ax-\" + data().type" } }, providers: [
             {
                 provide: AXClosableComponent,
                 useExisting: AXDialogComponent,
@@ -75,11 +71,14 @@ class AXDialogComponent extends MXBaseComponent {
                 provide: AXComponent,
                 useExisting: AXDialogComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-dialog ax-orientation-{{ data.orientation }}\"\n  tabindex=\"-1\"\n  cdkDrag\n  cdkDragHandle\n  [cdkDragDisabled]=\"!data.draggable\"\n>\n  <div class=\"ax-dialog-content-wrapper\">\n    @if (data.icon !== 'none') {\n      <div class=\"ax-dialog-icon-side\">\n        <i class=\"ax-dialog-icon {{ data.icon }}\"></i>\n      </div>\n    }\n    <div class=\"ax-dialog-content-side\">\n      <div class=\"ax-dialog-title\">{{ data.title | translate | async }}</div>\n      <div class=\"ax-dialog-content\">{{ data.content | translate | async }}</div>\n    </div>\n    <div class=\"ax-dialog-dismiss-icon\">\n      @if (data.closeButton) {\n        <i class=\"ax-icon ax-icon-close\"></i>\n      }\n    </div>\n  </div>\n\n  <ax-footer>\n    @for (button of data.buttons; let i = $index; track i) {\n      <ax-button\n        [text]=\"button.text | translate | async\"\n        [tabindex]=\"i\"\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</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-primary-surface)}ax-dialog.ax-secondary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-secondary-surface)}ax-dialog.ax-success{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-success-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-success-surface)}ax-dialog.ax-warning{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-warning-surface)}ax-dialog.ax-danger{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-danger-surface)}ax-dialog.ax-accent1{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent1-surface)}ax-dialog.ax-accent2{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent2-surface)}ax-dialog.ax-accent3{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent3-surface)}ax-dialog.ax-accent4{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent4-surface)}ax-dialog.ax-accent5{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent5-surface)}ax-dialog.ax-accent6{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent6-surface)}ax-dialog.ax-accent7{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent7-surface)}.ax-dialog{position:relative;display:flex;width:93vw;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface));outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.ax-dialog{width:75vw}}@media (min-width: 1024px){.ax-dialog{width:50vw}}@media (min-width: 1280px){.ax-dialog{width:35vw}}@media (min-width: 1536px){.ax-dialog{width:25vw}}.ax-dialog.ax-orientation-horizontal .ax-dialog-content-wrapper{flex-direction:row}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper{flex-direction:column;align-items:center}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-icon-side{margin-bottom:1rem}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-content-side{margin:0;text-align:center}.ax-dialog.ax-orientation-vertical ax-footer ax-button{flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-icon-side .ax-dialog-icon{background-color:rgba(var(--ax-comp-dialog-icon-bg-color));color:rgba(var(--ax-comp-dialog-icon-text-color));border-width:1px;border-color:rgba(var(--ax-comp-dialog-border-color));border-style:solid;display:flex;height:3rem;width:3rem;cursor:move;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side{margin-inline-start:1rem;flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:500}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-content{font-size:.875rem;line-height:1.25rem}.ax-dialog ax-footer{justify-content:flex-end;padding:.75rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: 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: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-dialog ax-orientation-{{ data().orientation }}\"\n  tabindex=\"-1\"\n  cdkDrag\n  cdkDragHandle\n  [cdkDragDisabled]=\"!data().draggable\"\n>\n  <div class=\"ax-dialog-content-wrapper\">\n    @if (data().icon !== 'none') {\n      <div class=\"ax-dialog-icon-side\">\n        <i class=\"ax-dialog-icon {{ data().icon }}\"></i>\n      </div>\n    }\n    <div class=\"ax-dialog-content-side\">\n      <div class=\"ax-dialog-title\">{{ data().title | translate | async }}</div>\n      <div class=\"ax-dialog-content\">{{ data().content | translate | async }}</div>\n    </div>\n    <div class=\"ax-dialog-dismiss-icon\">\n      @if (data().closeButton) {\n        <i class=\"ax-icon ax-icon-close\"></i>\n      }\n    </div>\n  </div>\n\n  <ax-footer>\n    @for (button of data().buttons; let i = $index; track i) {\n      <ax-button\n        [text]=\"button.text | translate | async\"\n        [tabindex]=\"i\"\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</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-primary-surface)}ax-dialog.ax-secondary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-secondary-surface)}ax-dialog.ax-success{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-success-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-success-surface)}ax-dialog.ax-warning{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-warning-surface)}ax-dialog.ax-danger{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-danger-surface)}ax-dialog.ax-accent1{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent1-surface)}ax-dialog.ax-accent2{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent2-surface)}ax-dialog.ax-accent3{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent3-surface)}ax-dialog.ax-accent4{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent4-surface)}ax-dialog.ax-accent5{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent5-surface)}ax-dialog.ax-accent6{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent6-surface)}ax-dialog.ax-accent7{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent7-surface)}.ax-dialog{position:relative;display:flex;width:93vw;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface));outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.ax-dialog{width:75vw}}@media (min-width: 1024px){.ax-dialog{width:50vw}}@media (min-width: 1280px){.ax-dialog{width:35vw}}@media (min-width: 1536px){.ax-dialog{width:25vw}}.ax-dialog.ax-orientation-horizontal .ax-dialog-content-wrapper{flex-direction:row}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper{flex-direction:column;align-items:center}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-icon-side{margin-bottom:1rem}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-content-side{margin:0;text-align:center}.ax-dialog.ax-orientation-vertical ax-footer ax-button{flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-icon-side .ax-dialog-icon{background-color:rgba(var(--ax-comp-dialog-icon-bg-color));color:rgba(var(--ax-comp-dialog-icon-text-color));border-width:1px;border-color:rgba(var(--ax-comp-dialog-border-color));border-style:solid;display:flex;height:3rem;width:3rem;cursor:move;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side{margin-inline-start:1rem;flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:500}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-content{font-size:.875rem;line-height:1.25rem}.ax-dialog ax-footer{justify-content:flex-end;padding:.75rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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: 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: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[attr.tabIndex]': '"-1"',
+                        '[class]': '"ax-" + data().type',
+                    }, providers: [
                         {
                             provide: AXClosableComponent,
                             useExisting: AXDialogComponent,
@@ -98,14 +97,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         AXLoadingComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], template: "<div\n  class=\"ax-dialog ax-orientation-{{ data.orientation }}\"\n  tabindex=\"-1\"\n  cdkDrag\n  cdkDragHandle\n  [cdkDragDisabled]=\"!data.draggable\"\n>\n  <div class=\"ax-dialog-content-wrapper\">\n    @if (data.icon !== 'none') {\n      <div class=\"ax-dialog-icon-side\">\n        <i class=\"ax-dialog-icon {{ data.icon }}\"></i>\n      </div>\n    }\n    <div class=\"ax-dialog-content-side\">\n      <div class=\"ax-dialog-title\">{{ data.title | translate | async }}</div>\n      <div class=\"ax-dialog-content\">{{ data.content | translate | async }}</div>\n    </div>\n    <div class=\"ax-dialog-dismiss-icon\">\n      @if (data.closeButton) {\n        <i class=\"ax-icon ax-icon-close\"></i>\n      }\n    </div>\n  </div>\n\n  <ax-footer>\n    @for (button of data.buttons; let i = $index; track i) {\n      <ax-button\n        [text]=\"button.text | translate | async\"\n        [tabindex]=\"i\"\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</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-primary-surface)}ax-dialog.ax-secondary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-secondary-surface)}ax-dialog.ax-success{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-success-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-success-surface)}ax-dialog.ax-warning{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-warning-surface)}ax-dialog.ax-danger{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-danger-surface)}ax-dialog.ax-accent1{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent1-surface)}ax-dialog.ax-accent2{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent2-surface)}ax-dialog.ax-accent3{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent3-surface)}ax-dialog.ax-accent4{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent4-surface)}ax-dialog.ax-accent5{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent5-surface)}ax-dialog.ax-accent6{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent6-surface)}ax-dialog.ax-accent7{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent7-surface)}.ax-dialog{position:relative;display:flex;width:93vw;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface));outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.ax-dialog{width:75vw}}@media (min-width: 1024px){.ax-dialog{width:50vw}}@media (min-width: 1280px){.ax-dialog{width:35vw}}@media (min-width: 1536px){.ax-dialog{width:25vw}}.ax-dialog.ax-orientation-horizontal .ax-dialog-content-wrapper{flex-direction:row}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper{flex-direction:column;align-items:center}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-icon-side{margin-bottom:1rem}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-content-side{margin:0;text-align:center}.ax-dialog.ax-orientation-vertical ax-footer ax-button{flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-icon-side .ax-dialog-icon{background-color:rgba(var(--ax-comp-dialog-icon-bg-color));color:rgba(var(--ax-comp-dialog-icon-text-color));border-width:1px;border-color:rgba(var(--ax-comp-dialog-border-color));border-style:solid;display:flex;height:3rem;width:3rem;cursor:move;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side{margin-inline-start:1rem;flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:500}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-content{font-size:.875rem;line-height:1.25rem}.ax-dialog ax-footer{justify-content:flex-end;padding:.75rem 1.5rem}\n"] }]
-        }], propDecorators: { tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabIndex']
-            }], __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                    ], template: "<div\n  class=\"ax-dialog ax-orientation-{{ data().orientation }}\"\n  tabindex=\"-1\"\n  cdkDrag\n  cdkDragHandle\n  [cdkDragDisabled]=\"!data().draggable\"\n>\n  <div class=\"ax-dialog-content-wrapper\">\n    @if (data().icon !== 'none') {\n      <div class=\"ax-dialog-icon-side\">\n        <i class=\"ax-dialog-icon {{ data().icon }}\"></i>\n      </div>\n    }\n    <div class=\"ax-dialog-content-side\">\n      <div class=\"ax-dialog-title\">{{ data().title | translate | async }}</div>\n      <div class=\"ax-dialog-content\">{{ data().content | translate | async }}</div>\n    </div>\n    <div class=\"ax-dialog-dismiss-icon\">\n      @if (data().closeButton) {\n        <i class=\"ax-icon ax-icon-close\"></i>\n      }\n    </div>\n  </div>\n\n  <ax-footer>\n    @for (button of data().buttons; let i = $index; track i) {\n      <ax-button\n        [text]=\"button.text | translate | async\"\n        [tabindex]=\"i\"\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</div>\n", styles: ["ax-dialog.ax-primary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-primary-surface)}ax-dialog.ax-secondary{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-secondary-surface)}ax-dialog.ax-success{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-success-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-success-surface)}ax-dialog.ax-warning{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-warning-surface)}ax-dialog.ax-danger{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-danger-surface)}ax-dialog.ax-accent1{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent1-surface)}ax-dialog.ax-accent2{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent2-surface)}ax-dialog.ax-accent3{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent3-surface)}ax-dialog.ax-accent4{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent4-surface)}ax-dialog.ax-accent5{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent5-surface)}ax-dialog.ax-accent6{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent6-surface)}ax-dialog.ax-accent7{--ax-comp-dialog-icon-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-dialog-icon-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-dialog-border-color: var(--ax-sys-color-border-accent7-surface)}.ax-dialog{position:relative;display:flex;width:93vw;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface));outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.ax-dialog{width:75vw}}@media (min-width: 1024px){.ax-dialog{width:50vw}}@media (min-width: 1280px){.ax-dialog{width:35vw}}@media (min-width: 1536px){.ax-dialog{width:25vw}}.ax-dialog.ax-orientation-horizontal .ax-dialog-content-wrapper{flex-direction:row}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper{flex-direction:column;align-items:center}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-icon-side{margin-bottom:1rem}.ax-dialog.ax-orientation-vertical .ax-dialog-content-wrapper .ax-dialog-content-side{margin:0;text-align:center}.ax-dialog.ax-orientation-vertical ax-footer ax-button{flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper{display:flex;gap:.5rem;padding:1.5rem 1.5rem 1rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-icon-side .ax-dialog-icon{background-color:rgba(var(--ax-comp-dialog-icon-bg-color));color:rgba(var(--ax-comp-dialog-icon-text-color));border-width:1px;border-color:rgba(var(--ax-comp-dialog-border-color));border-style:solid;display:flex;height:3rem;width:3rem;cursor:move;align-items:center;justify-content:center;border-radius:9999px;font-size:1.5rem;line-height:2rem}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side{margin-inline-start:1rem;flex:1 1 0%}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:500}.ax-dialog .ax-dialog-content-wrapper .ax-dialog-content-side .ax-dialog-content{font-size:.875rem;line-height:1.25rem}.ax-dialog ax-footer{justify-content:flex-end;padding:.75rem 1.5rem}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }] } });
 
 const AX_DIALOG_CONFIG = new InjectionToken('AX_DIALOG_CONFIG', {
     providedIn: 'root',
@@ -133,7 +126,7 @@ function dialogConfig(config = {}) {
  */
 class AXDialogService {
     constructor() {
-        this.dialog = inject(Dialog);
+        this.overlayService = inject(AXOverlayService);
         this.defaultConfig = inject(AX_DIALOG_CONFIG);
     }
     detectIcon(type) {
@@ -294,21 +287,51 @@ class AXDialogService {
     open(config) {
         config.orientation = config.orientation || 'horizontal';
         config.icon = config.icon ?? this.detectIcon(config.type);
-        const dialogRef = this.dialog.open(AXDialogComponent, {
-            data: config,
-            role: 'alertdialog',
-            ariaModal: true,
-            restoreFocus: true,
-            closeOnNavigation: true,
-            closeOnDestroy: true,
-            hasBackdrop: true,
-            disableClose: true,
-            panelClass: ['ax-animate-bounceIn', 'ax-animate-faster'],
-            direction: config.direction ? config.direction : AXHtmlUtil.isRtl() ? 'rtl' : 'ltr',
+        const dialogData = {
+            title: config.title,
+            content: config.content,
+            type: config.type,
+            buttons: config.buttons,
+            closeButton: config.closeButton ?? false,
+            orientation: config.orientation,
+            icon: config.icon,
+            draggable: config.draggable,
+        };
+        let internalRef;
+        const closeDialog = () => {
+            if (internalRef) {
+                internalRef.overlayRef.dispose();
+            }
+        };
+        this.overlayService
+            .create(AXDialogComponent, {
+            inputs: {
+                data: dialogData,
+                onClose: closeDialog,
+            },
+            backdrop: {
+                enabled: true,
+                background: true,
+                closeOnClick: false, // disableClose: true equivalent
+            },
+            panelClass: ['ax-dialog-panel', 'ax-animate-bounceIn', 'ax-animate-faster'],
+        })
+            .then((overlayRef) => {
+            internalRef = {
+                overlayRef,
+                close: closeDialog,
+            };
+            // Apply direction if specified
+            if (config.direction || AXHtmlUtil.isRtl()) {
+                const dir = config.direction ? config.direction : AXHtmlUtil.isRtl() ? 'rtl' : 'ltr';
+                if (overlayRef.overlayElement) {
+                    overlayRef.overlayElement.setAttribute('dir', dir);
+                }
+            }
         });
         return {
             close: () => {
-                dialogRef.componentInstance?.close();
+                closeDialog();
             },
         };
     }
@@ -328,7 +351,6 @@ const MODULES = [
     AXButtonModule,
     AXDecoratorModule,
     AXLoadingModule,
-    DialogModule,
     AXTranslationModule,
 ];
 class AXDialogModule {
@@ -340,7 +362,6 @@ class AXDialogModule {
             AXButtonModule,
             AXDecoratorModule,
             AXLoadingModule,
-            DialogModule,
             AXTranslationModule, AXDialogComponent], exports: [AXDialogComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDialogModule, providers: [AXDialogService, AXHotkeysService], imports: [MODULES, COMPONENT] }); }
 }