ngx-kit 7.2.0 → 7.3.0

package/fesm2022/ngx-kit-dialog.mjs

@@ -1,409 +1,508 @@
-import * as i1 from '@angular/common';
-import { DOCUMENT, isPlatformServer, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Directive, Input, Inject, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, Component, Injector, runInInjectionContext, createComponent, Injectable, PLATFORM_ID, Optional, SkipSelf, NgModule } from '@angular/core';
+import { signal, InjectionToken, input, inject, ElementRef, Directive, computed, ChangeDetectionStrategy, Component, Injector, Injectable, makeEnvironmentProviders, provideEnvironmentInitializer, PLATFORM_ID, Renderer2, DestroyRef, effect, NgModule } from '@angular/core';
+import { DOCUMENT, NgComponentOutlet, isPlatformServer } from '@angular/common';
+import { DIALOG_OVERLAY_CLASSNAME, OverlayService } from 'ngx-kit/core';
 import { Subject } from 'rxjs';
-import { randomStrnig } from 'ngx-kit/shared';
+import * as i1 from 'ngx-kit/drag-resize';
+import { NgxDraggable } from 'ngx-kit/drag-resize';
 
-const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
-const DIALOG_REF = new InjectionToken('DIALOG_REF');
-
-class NgxDialogBodyDirective {
-    _el;
-    _renderer;
-    height;
-    _dialogRef = inject(DIALOG_REF);
-    constructor(_el, _renderer) {
-        this._el = _el;
-        this._renderer = _renderer;
-        this._dialogRef.body = this._el;
+let uniqueId = 0;
+function nextDialogId() {
+    uniqueId += 1;
+    return `ngx-dialog-${Date.now().toString(36)}-${uniqueId}`;
+}
+class NgxDialogRef {
+    id = nextDialogId();
+    /** true from the moment `close()` is called, even before teardown finishes. */
+    closing = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closing" }] : /* istanbul ignore next */ []));
+    /** true once the dialog has been fully removed from the DOM. */
+    closed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closed" }] : /* istanbul ignore next */ []));
+    _afterClosed = new Subject();
+    /** Emits the result exactly once, after the dialog has been fully torn down. */
+    afterClosed = this._afterClosed.asObservable();
+    /** @internal set by the layout directives; read by NgxDialogBody to size itself. */
+    headerEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerEl" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    footerEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerEl" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    bodyEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyEl" }] : /* istanbul ignore next */ []));
+    /** @internal the dialog panel's own host element. */
+    panelEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelEl" }] : /* istanbul ignore next */ []));
+    /** Optional synchronous guard - return `false` to prevent Escape/outside-click from closing. */
+    beforeClose;
+    overlayRef;
+    result;
+    /** @internal used by NgxDialogService right after creating the overlay. */
+    _attachOverlayRef(ref) {
+        this.overlayRef = ref;
     }
-    ngAfterViewInit() {
-        this.onWindowResize();
-        if (this._dialogRef.dialog && this._dialogRef.dialog.nativeElement) {
-            new ResizeObserver(() => {
-                this.onWindowResize();
-            }).observe(this._dialogRef.dialog.nativeElement);
-        }
+    /** @internal used by the header/footer/body directives and the panel component. */
+    _setHeaderElement(el) {
+        this.headerEl.set(el);
     }
-    // @HostListener('window:resize', ['$event'])
-    onWindowResize(ev) {
-        if (!window)
+    /** @internal */
+    _setFooterElement(el) {
+        this.footerEl.set(el);
+    }
+    /** @internal */
+    _setBodyElement(el) {
+        this.bodyEl.set(el);
+    }
+    /** @internal */
+    _setPanelElement(el) {
+        this.panelEl.set(el);
+    }
+    /** Closes the dialog and emits `result` on `afterClosed` once torn down. Idempotent. */
+    close(result) {
+        if (this.closing() || this.closed()) {
             return;
-        let headerH = 0;
-        let footerH = 0;
-        let dialogH = window.innerHeight;
-        if (this._dialogRef.header) {
-            headerH = this._dialogRef.header.nativeElement.offsetHeight;
         }
-        if (this._dialogRef.footer) {
-            footerH = this._dialogRef.footer.nativeElement.offsetHeight;
-        }
-        if (this._dialogRef.dialog && this._dialogRef.dialog.nativeElement.offsetHeight < dialogH) {
-            dialogH = this._dialogRef.dialog.nativeElement.offsetHeight;
+        this.closing.set(true);
+        this.result = result;
+        this.overlayRef?.close();
+    }
+    /** @internal called by NgxDialogService's `onClosed` callback once the overlay is fully torn down. */
+    _finalizeClose() {
+        if (this.closed()) {
+            return;
         }
-        this.height = dialogH - headerH - footerH;
-        this._renderer.setStyle(this._el.nativeElement, 'max-height', this.height + 'px');
-        // console.log(this.height, ':', 'windowHeight', dialogH, 'h', headerH, 'f', footerH);
+        this.closed.set(true);
+        this._afterClosed.next(this.result);
+        this._afterClosed.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogBodyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDialogBodyDirective, isStandalone: false, selector: "ngx-dialog-body,[ngxDialogBody]", host: { classAttribute: "dialog-body" }, exportAs: ["ngxDialogBody"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogBodyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: 'ngx-dialog-body,[ngxDialogBody]',
-                    host: {
-                        class: 'dialog-body',
-                    },
-                    exportAs: 'ngxDialogBody',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
 
-class NgxDialogFooterDirective {
-    _el;
-    align = 'end';
-    _dialogRef = inject(DIALOG_REF);
-    constructor(_el) {
-        this._el = _el;
+/**
+ * BREAKING CHANGE from the previous version of this config:
+ * - `allowCloseOnOutsideClick` -> `closeOnOutsideClick` (naming now matches
+ *   `ngx-kit/overlay`'s options, which this service is built directly on).
+ * - `header`/`footer` are now actually wired up (previously declared but
+ *   unused) - set `enable: true` to get an automatic header/footer without
+ *   having to place the `ngxDialogHeader`/`ngxDialogFooter` directives
+ *   yourself inside the content component.
+ */
+class NgxDialogConfig {
+    /** Data made available to the content component (and to `ngx-dialog-panel`
+     * itself) via the `DIALOG_DATA` injection token. */
+    data = {};
+    /** Named size preset - sets sensible min/max width bounds. Combine with
+     * `width`/`maxWidth`/... for full manual control. */
+    size;
+    width;
+    minWidth;
+    maxWidth;
+    height;
+    minHeight;
+    maxHeight;
+    /** Extra class(es) on the dialog panel (the `ngx-dialog-panel` host). */
+    panelClass = 'ngx-kit';
+    /** Extra class(es) on the backdrop element behind the panel. */
+    backdropClass = 'ngx-dialog-backdrop';
+    header = {
+        enable: false,
+        showCloseButton: true,
+        showMaximizeButton: true,
+    };
+    footer = { enable: false, align: 'end' };
+    /** Close when clicking outside the panel. Default: false (modal by default). */
+    closeOnOutsideClick = false;
+    /** Close on Escape. Default: true. */
+    closeOnEscape = true;
+    /** Shorthand for `closeOnOutsideClick: false, closeOnEscape: false` - the
+     * dialog can then only be closed programmatically (e.g. via its own
+     * buttons calling `dialogRef.close()`). */
+    disableClose = false;
+    /** Synchronous guard consulted before Escape/outside-click would close the
+     * dialog - return `false` to block it (e.g. unsaved changes). Does not
+     * affect a programmatic `dialogRef.close()` call. */
+    beforeClose;
+    /** Prevent the page behind the dialog from scrolling while it's open. Default: true. */
+    lockBodyScroll = true;
+    /** Move focus into the dialog on open. Default: true. */
+    autoFocus = true;
+    /** Restore focus to the previously focused element on close. Default: true. */
+    restoreFocus = true;
+    /** Render via the native Popover API when supported. Default: true. */
+    usePopover = true;
+    role = 'dialog';
+    ariaLabel;
+    ariaLabelledby;
+    ariaDescribedby;
+    /** Entry animation for the panel. Default: 'zoom'. */
+    animation = 'zoom';
+    /** Parent injector for the content component (and `ngx-dialog-panel`
+     * itself). Defaults to the root injector. */
+    injector;
+    constructor(init) {
+        Object.assign(this, init);
     }
+}
+
+const DIALOG_DATA = new InjectionToken('NGX_DIALOG_DATA');
+const DIALOG_REF = new InjectionToken('NGX_DIALOG_REF');
+/** The resolved config for the dialog currently being rendered. */
+const NGX_DIALOG_DEFAULT_CONFIG = new NgxDialogConfig();
+const NGX_DIALOG_CONFIG = new InjectionToken('NGX_NGX_DIALOG_CONFIG');
+/** The arbitrary content component passed to `open()`, projected via `*ngComponentOutlet`. */
+const DIALOG_CONTENT = new InjectionToken('NGX_DIALOG_CONTENT');
+
+class NgxDialogFooter {
+    align = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    el = inject((ElementRef));
+    dialogRef = inject(DIALOG_REF);
     ngOnInit() {
-        this._dialogRef.footer = this._el;
+        this.dialogRef._setFooterElement(this.el.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogFooterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDialogFooterDirective, isStandalone: false, selector: "ngx-dialog-footer,[ngxDialogFooter]", inputs: { align: "align" }, host: { properties: { "class.align-start": "align===\"start\"", "class.align-end": "align===\"end\"", "class.align-space-between": "align===\"space-between\"", "class.align-center": "align===\"center\"", "class.align-space-around": "align===\"space-around\"" }, classAttribute: "dialog-footer" }, exportAs: ["ngxDialogFooter"], ngImport: i0 });
+    ngOnDestroy() {
+        this.dialogRef._setFooterElement(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDialogFooter, isStandalone: true, selector: "ngx-dialog-footer,[ngxDialogFooter]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.align-start": "align() === \"start\"", "class.align-end": "align() === \"end\"", "class.align-space-between": "align() === \"space-between\"", "class.align-center": "align() === \"center\"", "class.align-space-around": "align() === \"space-around\"" }, classAttribute: "dialog-footer" }, exportAs: ["ngxDialogFooter"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogFooter, decorators: [{
             type: Directive,
             args: [{
-                    standalone: false,
                     selector: 'ngx-dialog-footer,[ngxDialogFooter]',
+                    standalone: true,
                     host: {
                         class: 'dialog-footer',
-                        '[class.align-start]': 'align==="start"',
-                        '[class.align-end]': 'align==="end"',
-                        '[class.align-space-between]': 'align==="space-between"',
-                        '[class.align-center]': 'align==="center"',
-                        '[class.align-space-around]': 'align==="space-around"',
+                        '[class.align-start]': 'align() === "start"',
+                        '[class.align-end]': 'align() === "end"',
+                        '[class.align-space-between]': 'align() === "space-between"',
+                        '[class.align-center]': 'align() === "center"',
+                        '[class.align-space-around]': 'align() === "space-around"',
                     },
                     exportAs: 'ngxDialogFooter',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { align: [{
-                type: Input
-            }] } });
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
 
-class NgxDialogHeaderDirective {
-    _el;
-    _document;
-    showCloseButton = true;
-    _dialogRef = inject(DIALOG_REF);
-    constructor(_el, _document) {
-        this._el = _el;
-        this._document = _document;
-    }
+const CLOSE_ICON_SVG = `<svg width="16" height="16" fill="currentColor" viewBox="0 0 320 512" aria-hidden="true">
+  <path d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/>
+  </svg>`;
+const MAXIMIZE_ICON_SVG = `<svg name="maximize" stroke="currentColor"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.4852 16.5149C6.9104 15.9401 7.00595 13.4982 7.00595 13.4982M7.4852 16.5149C8.06001 17.0897 10.5019 16.994 10.5019 16.994M7.4852 16.5149L11 13M16.5149 7.48512C15.9401 6.91031 13.4982 7.00596 13.4982 7.00596M16.5149 7.48512C17.0897 8.05993 16.994 10.5018 16.994 10.5018M16.5149 7.48512L13 11"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"  stroke-width="1.5"/>
+</svg>`;
+const RESTORE_ICON_SVG = `<svg name="restore" stroke="currentColor"   width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z"  stroke-width="1.5"/>
+<path d="M12.9833 11.0167C12.4085 10.4419 12.5041 8 12.5041 8M12.9833 11.0167C13.5581 11.5915 16 11.4958 16 11.4958M12.9833 11.0167L17 7M11.0131 12.9868C10.4383 12.412 7.99641 12.5077 7.99641 12.5077M11.0131 12.9868C11.5879 13.5616 11.4922 16.0035 11.4922 16.0035M11.0131 12.9868L7 16.9999"  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+class NgxDialogHeader {
+    config = inject(NGX_DIALOG_CONFIG);
+    showCloseButton = input(this.config.header?.showCloseButton ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCloseButton" }] : /* istanbul ignore next */ []));
+    showMaximizeButton = input(this.config.header?.showMaximizeButton ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showMaximizeButton" }] : /* istanbul ignore next */ []));
+    el = inject((ElementRef));
+    document = inject(DOCUMENT);
+    dialogRef = inject(DIALOG_REF);
+    drag = inject(NgxDraggable);
+    isMaximized = false;
     ngOnInit() {
-        this._el.nativeElement.innerHTML = '<span>' + this._el.nativeElement.innerHTML + '</span>';
-        if (this.showCloseButton) {
-            let closeBtn = this._document.createElement('button');
-            closeBtn.className = 'close-btn';
-            closeBtn.innerHTML =
-                '<svg width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M312.1 375c9.369 9.369 9.369 24.57 0 33.94s-24.57 9.369-33.94 0L160 289.9l-119 119c-9.369 9.369-24.57 9.369-33.94 0s-9.369-24.57 0-33.94L126.1 256L7.027 136.1c-9.369-9.369-9.369-24.57 0-33.94s24.57-9.369 33.94 0L160 222.1l119-119c9.369-9.369 24.57-9.369 33.94 0s9.369 24.57 0 33.94L193.9 256L312.1 375z"/></svg>';
-            closeBtn.onclick = closeBtn.ontouchend = () => {
-                this._dialogRef.close();
-            };
-            this._el.nativeElement.appendChild(closeBtn);
+        this.drag.dragRootElement.set('.ngx-ui-overlay');
+        this.drag.dragHandle.set('.dialog-header-title');
+        // Wrap the existing (Angular-rendered) header content in a title span by
+        // MOVING the actual DOM nodes, not by re-serializing/re-parsing
+        // `innerHTML`. The original implementation did
+        // `el.innerHTML = '<span>' + el.innerHTML + '</span>'`, which silently
+        // destroys any event listeners or component state living inside the
+        // header content (anything beyond static text) because the browser
+        // throws away and re-parses the whole subtree.
+        const titleWrapper = this.document.createElement('span');
+        titleWrapper.className = 'dialog-header-title';
+        while (this.el.nativeElement.firstChild) {
+            titleWrapper.appendChild(this.el.nativeElement.firstChild);
+        }
+        this.el.nativeElement.appendChild(titleWrapper);
+        if (this.showMaximizeButton()) {
+            const fullScreenBtn = this.document.createElement('button');
+            fullScreenBtn.type = 'button';
+            fullScreenBtn.className = 'ngx-dialog-action-btn';
+            fullScreenBtn.setAttribute('aria-label', 'Maximaize');
+            fullScreenBtn.setAttribute('title', 'Maximaize');
+            fullScreenBtn.innerHTML = MAXIMIZE_ICON_SVG;
+            fullScreenBtn.addEventListener('click', (ev) => this.fullScreen(ev));
+            this.el.nativeElement.appendChild(fullScreenBtn);
+        }
+        if (this.showCloseButton()) {
+            const closeBtn = this.document.createElement('button');
+            closeBtn.type = 'button';
+            closeBtn.className = 'ngx-dialog-action-btn';
+            closeBtn.setAttribute('aria-label', 'Close');
+            closeBtn.setAttribute('title', 'Close');
+            closeBtn.innerHTML = CLOSE_ICON_SVG;
+            closeBtn.addEventListener('click', () => this.dialogRef.close());
+            this.el.nativeElement.appendChild(closeBtn);
+        }
+        this.dialogRef._setHeaderElement(this.el.nativeElement);
+    }
+    fullScreen(ev) {
+        const overlay = this.el.nativeElement.closest(`.${DIALOG_OVERLAY_CLASSNAME}`);
+        this.isMaximized = !this.isMaximized;
+        this.drag.disabled.set(this.isMaximized);
+        if (overlay) {
+            overlay.classList.toggle('ngx-dialog-fullscreen');
+            const btn = ev.currentTarget;
+            btn.innerHTML = this.isMaximized ? RESTORE_ICON_SVG : MAXIMIZE_ICON_SVG;
+            btn.setAttribute('aria-label', this.isMaximized ? 'Restore' : 'Maximaize');
+            btn.setAttribute('title', this.isMaximized ? 'Restore' : 'Maximaize');
         }
-        this._dialogRef.header = this._el;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogHeaderDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDialogHeaderDirective, isStandalone: false, selector: "ngx-dialog-header,[ngxDialogHeader]", inputs: { showCloseButton: "showCloseButton" }, host: { classAttribute: "dialog-header" }, exportAs: ["ngxDialogHeader"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: NgxDialogHeader, isStandalone: true, selector: "ngx-dialog-header,[ngxDialogHeader]", inputs: { showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, showMaximizeButton: { classPropertyName: "showMaximizeButton", publicName: "showMaximizeButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "dialog-header" }, exportAs: ["ngxDialogHeader"], hostDirectives: [{ directive: i1.NgxDraggable }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogHeader, decorators: [{
             type: Directive,
             args: [{
-                    standalone: false,
                     selector: 'ngx-dialog-header,[ngxDialogHeader]',
-                    host: {
-                        class: 'dialog-header',
-                    },
+                    standalone: true,
+                    hostDirectives: [NgxDraggable],
+                    host: { class: 'dialog-header' },
                     exportAs: 'ngxDialogHeader',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { showCloseButton: [{
-                type: Input
-            }] } });
+        }], propDecorators: { showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], showMaximizeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMaximizeButton", required: false }] }] } });
 
+/**
+ * The dialog "panel" shell. It no longer owns the backdrop, centering,
+ * focus trap, Escape handling or outside-click handling - all of that now
+ * lives in `OverlayService`, which this component is rendered inside of.
+ * This is intentionally a thin, fully signal-driven shell: no
+ * `AfterViewInit`, no manual `ChangeDetectorRef.detectChanges()`, no
+ * imperative style writes. Angular schedules change detection automatically
+ * whenever a signal read from the template changes, including in zoneless
+ * apps.
+ */
 class NgxDialogComponent {
-    config;
-    component;
-    _onClose = new Subject();
-    onClose = this._onClose.asObservable();
-    ngxDialog;
-    _dialogRef = inject(DIALOG_REF);
-    cd = inject(ChangeDetectorRef);
-    constructor() { }
-    ngOnInit() { }
-    ngAfterViewInit() {
-        this._dialogRef.dialog = this.ngxDialog;
-        this.setStyle();
-        this.cd.detectChanges();
-    }
-    ngOnDestroy() { }
-    onOverlayClicked(evt) {
-        if (this.config?.allowCloseOnOutsideClick) {
-            this._dialogRef.close();
-        }
-    }
-    onDialogClicked(evt) {
-        evt.stopPropagation();
-    }
-    close() {
-        this._onClose.next();
-    }
-    setStyle() {
-        if (this.ngxDialog) {
-            if (this.config?.width) {
-                this.ngxDialog.nativeElement.style.width = this.config.width;
-            }
-            if (this.config?.maxWidth) {
-                this.ngxDialog.nativeElement.style.maxWidth = this.config.maxWidth;
-            }
-            else {
-                this.ngxDialog.nativeElement.style.maxWidth = '100%';
-            }
-            if (this.config?.minWidth) {
-                this.ngxDialog.nativeElement.style.minWidth = this.config.minWidth;
-            }
-            if (this.config?.height) {
-                this.ngxDialog.nativeElement.style.height = this.config.height;
-            }
-            if (this.config?.maxHeight) {
-                this.ngxDialog.nativeElement.style.maxHeight = this.config.maxHeight;
-            }
-            else {
-                this.ngxDialog.nativeElement.style.maxHeight = '100%';
-            }
-            if (this.config?.minHeight) {
-                this.ngxDialog.nativeElement.style.minHeight = this.config.minHeight;
-            }
-        }
+    dialogRef = inject(DIALOG_REF);
+    config = inject(NGX_DIALOG_CONFIG);
+    content = inject(DIALOG_CONTENT);
+    sizeClass = computed(() => this.config.size ? `ngx-dialog-size-${this.config.size}` : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.dialogRef._setPanelElement(inject((ElementRef)).nativeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: NgxDialogComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "ngxDialog", first: true, predicate: ["ngxDialog"], descendants: true }], ngImport: i0, template: "<div class=\"ngx-dialog-overlay\" (click)=\"onOverlayClicked($event)\">\n  <div class=\"ngx-dialog\" (click)=\"onDialogClicked($event)\" #ngxDialog>\n    <ng-container *ngComponentOutlet=\"component\"></ng-container>\n  </div>\n</div>\n", styles: [":host{--ngx-dialog-bg: light-dark(#ffffff, #1c1c22);--ngx-dialog-fg: light-dark(#000000, #f0f0f5);--ngx-dialog-header-bg: light-dark(#ffffff, #1c1c22);--ngx-dialog-header-fg: light-dark(#1c1c22, #ffffff);--ngx-dialog-corner-radius: 1rem;--ngx-dialog-min-width: 50rem}.ngx-dialog-overlay{display:flex;flex-direction:column;position:fixed;inset:0;background:#0000004d;align-items:center;justify-content:center;transition:opacity .4s cubic-bezier(.25,.8,.25,1);z-index:999}::ng-deep .ngx-dialog{box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));display:flex;flex-direction:column;min-width:var(--ngx-dialog-min-width);border-radius:var(--ngx-dialog-corner-radius);overflow:hidden;background-color:var(--panel-bg, var(--ngx-dialog-bg));color:var(--side-config-fg, var(--ngx-dialog-fg));box-sizing:border-box;animation:ShowDialog .2s cubic-bezier(.25,.8,.25,1)}::ng-deep .ngx-dialog .dialog-header{display:block;background:var(--ngx-dialog-header-bg);display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:var(--ngx-dialog-header-fg);font-size:.8rem;box-sizing:border-box;height:50px;border-bottom:1px rgba(107,107,107,.2) solid}::ng-deep .ngx-dialog .dialog-header .close-btn{background:none;cursor:pointer;border:none;color:var(--ngx-dialog-header-fg)}::ng-deep .ngx-dialog .dialog-body{display:block;overflow:auto;padding:20px;box-sizing:border-box}::ng-deep .ngx-dialog .dialog-footer{display:block;box-shadow:0 0 10px #72727252;padding:0 15px;display:flex;align-items:center;min-height:44px}::ng-deep .ngx-dialog .dialog-footer.align-start{justify-content:flex-start}::ng-deep .ngx-dialog .dialog-footer.align-end{justify-content:flex-end}::ng-deep .ngx-dialog .dialog-footer.align-space-between{justify-content:space-between}::ng-deep .ngx-dialog .dialog-footer.align-center{justify-content:center}::ng-deep .ngx-dialog .dialog-footer.align-space-around{justify-content:space-around}@keyframes ShowDialog{0%{transform:translate(0) scale(0)}to{transform:translate(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDialogComponent, isStandalone: true, selector: "ngx-dialog-panel", host: { properties: { "class": "sizeClass()" }, classAttribute: "ngx-dialog-panel" }, ngImport: i0, template: "@if (config.header?.enable) {\n  <div\n    ngxDialogHeader\n    [showCloseButton]=\"config.header?.showCloseButton ?? true\"\n    [showMaximizeButton]=\"config.header?.showMaximizeButton ?? true\">\n    {{ config.header?.title }}\n  </div>\n}\n\n<ng-container *ngComponentOutlet=\"content\" />\n\n@if (config.footer?.enable) {\n  <div ngxDialogFooter [align]=\"config.footer?.align ?? 'end'\">\n    <button type=\"button\" class=\"ngx-dialog-default-close-btn\" (click)=\"dialogRef.close()\">\n      {{ config.footer?.closeText ?? 'Close' }}\n    </button>\n  </div>\n}\n", styles: [":host{--ngx-dialog-bg: light-dark(#ffffff, #1c1c22);--ngx-dialog-fg: light-dark(#000000, #f0f0f5);--ngx-dialog-header-bg: light-dark(#ffffff, #1c1c22);--ngx-dialog-header-fg: light-dark(#1c1c22, #ffffff);display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow:hidden;background-color:var(--panel-bg, var(--ngx-dialog-bg));color:var(--side-config-fg, var(--ngx-dialog-fg));animation:ngxDialogZoomIn .18s cubic-bezier(.25,.8,.25,1);max-height:100dvh}:host(.ngx-dialog-size-sm){--ngx-dialog-min-width: 20rem;max-width:24rem}:host(.ngx-dialog-size-md){--ngx-dialog-min-width: 28rem;max-width:36rem}:host(.ngx-dialog-size-lg){--ngx-dialog-min-width: 36rem;max-width:56rem}:host(.ngx-dialog-size-xl){--ngx-dialog-min-width: 44rem;max-width:72rem}:host(.ngx-dialog-size-full){width:100%;height:100%;max-width:none;border-radius:0}::ng-deep .dialog-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;padding:0 15px;height:50px;box-sizing:border-box;color:var(--ngx-dialog-header-fg);background:var(--ngx-dialog-header-bg);font-size:.95rem;font-weight:600;border-bottom:1px solid rgba(107,107,107,.2)}::ng-deep .dialog-header .dialog-header-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%;display:flex;align-items:center}::ng-deep .dialog-header:not(.disable-drag) .dialog-header-title{cursor:move}::ng-deep .dialog-header .ngx-dialog-action-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:inherit;padding:1px;border-radius:6px;width:24px;height:24px;background:light-dark(#efeff1,#2b2b33)}::ng-deep .dialog-header .ngx-dialog-action-btn svg{width:100%}::ng-deep .dialog-header .ngx-dialog-action-btn:hover{background:light-dark(#e2e2e6,#34343d)}::ng-deep .dialog-body{display:block;overflow:auto;padding:20px;box-sizing:border-box}::ng-deep .dialog-footer{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 15px;box-shadow:0 -1px #72727233}::ng-deep .dialog-footer.align-start{justify-content:flex-start}::ng-deep .dialog-footer.align-end{justify-content:flex-end}::ng-deep .dialog-footer.align-center{justify-content:center}::ng-deep .dialog-footer.align-space-between{justify-content:space-between}::ng-deep .dialog-footer.align-space-around{justify-content:space-around}::ng-deep .ngx-dialog-backdrop{background:light-dark(rgba(71,71,71,.5490196078),rgba(39,38,38,.4509803922))!important;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}::ng-deep .ngx-dialog-fullscreen{width:100dvw!important;height:100dvh!important;max-height:unset!important;max-width:unset!important;transform:none!important;inset:0!important}@keyframes ngxDialogZoomIn{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){:host{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgxDialogHeader, selector: "ngx-dialog-header,[ngxDialogHeader]", inputs: ["showCloseButton", "showMaximizeButton"], exportAs: ["ngxDialogHeader"] }, { kind: "directive", type: NgxDialogFooter, selector: "ngx-dialog-footer,[ngxDialogFooter]", inputs: ["align"], exportAs: ["ngxDialogFooter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-dialog-overlay\" (click)=\"onOverlayClicked($event)\">\n  <div class=\"ngx-dialog\" (click)=\"onDialogClicked($event)\" #ngxDialog>\n    <ng-container *ngComponentOutlet=\"component\"></ng-container>\n  </div>\n</div>\n", styles: [":host{--ngx-dialog-bg: light-dark(#ffffff, #1c1c22);--ngx-dialog-fg: light-dark(#000000, #f0f0f5);--ngx-dialog-header-bg: light-dark(#ffffff, #1c1c22);--ngx-dialog-header-fg: light-dark(#1c1c22, #ffffff);--ngx-dialog-corner-radius: 1rem;--ngx-dialog-min-width: 50rem}.ngx-dialog-overlay{display:flex;flex-direction:column;position:fixed;inset:0;background:#0000004d;align-items:center;justify-content:center;transition:opacity .4s cubic-bezier(.25,.8,.25,1);z-index:999}::ng-deep .ngx-dialog{box-shadow:0 0 20px light-dark(#797979,rgba(2,2,2,.7411764706));display:flex;flex-direction:column;min-width:var(--ngx-dialog-min-width);border-radius:var(--ngx-dialog-corner-radius);overflow:hidden;background-color:var(--panel-bg, var(--ngx-dialog-bg));color:var(--side-config-fg, var(--ngx-dialog-fg));box-sizing:border-box;animation:ShowDialog .2s cubic-bezier(.25,.8,.25,1)}::ng-deep .ngx-dialog .dialog-header{display:block;background:var(--ngx-dialog-header-bg);display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:var(--ngx-dialog-header-fg);font-size:.8rem;box-sizing:border-box;height:50px;border-bottom:1px rgba(107,107,107,.2) solid}::ng-deep .ngx-dialog .dialog-header .close-btn{background:none;cursor:pointer;border:none;color:var(--ngx-dialog-header-fg)}::ng-deep .ngx-dialog .dialog-body{display:block;overflow:auto;padding:20px;box-sizing:border-box}::ng-deep .ngx-dialog .dialog-footer{display:block;box-shadow:0 0 10px #72727252;padding:0 15px;display:flex;align-items:center;min-height:44px}::ng-deep .ngx-dialog .dialog-footer.align-start{justify-content:flex-start}::ng-deep .ngx-dialog .dialog-footer.align-end{justify-content:flex-end}::ng-deep .ngx-dialog .dialog-footer.align-space-between{justify-content:space-between}::ng-deep .ngx-dialog .dialog-footer.align-center{justify-content:center}::ng-deep .ngx-dialog .dialog-footer.align-space-around{justify-content:space-around}@keyframes ShowDialog{0%{transform:translate(0) scale(0)}to{transform:translate(0) scale(1)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { ngxDialog: [{
-                type: ViewChild,
-                args: ['ngxDialog']
-            }] } });
+            args: [{ selector: 'ngx-dialog-panel', standalone: true, imports: [NgComponentOutlet, NgxDialogHeader, NgxDialogFooter], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ngx-dialog-panel',
+                        '[class]': 'sizeClass()',
+                    }, template: "@if (config.header?.enable) {\n  <div\n    ngxDialogHeader\n    [showCloseButton]=\"config.header?.showCloseButton ?? true\"\n    [showMaximizeButton]=\"config.header?.showMaximizeButton ?? true\">\n    {{ config.header?.title }}\n  </div>\n}\n\n<ng-container *ngComponentOutlet=\"content\" />\n\n@if (config.footer?.enable) {\n  <div ngxDialogFooter [align]=\"config.footer?.align ?? 'end'\">\n    <button type=\"button\" class=\"ngx-dialog-default-close-btn\" (click)=\"dialogRef.close()\">\n      {{ config.footer?.closeText ?? 'Close' }}\n    </button>\n  </div>\n}\n", styles: [":host{--ngx-dialog-bg: light-dark(#ffffff, #1c1c22);--ngx-dialog-fg: light-dark(#000000, #f0f0f5);--ngx-dialog-header-bg: light-dark(#ffffff, #1c1c22);--ngx-dialog-header-fg: light-dark(#1c1c22, #ffffff);display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow:hidden;background-color:var(--panel-bg, var(--ngx-dialog-bg));color:var(--side-config-fg, var(--ngx-dialog-fg));animation:ngxDialogZoomIn .18s cubic-bezier(.25,.8,.25,1);max-height:100dvh}:host(.ngx-dialog-size-sm){--ngx-dialog-min-width: 20rem;max-width:24rem}:host(.ngx-dialog-size-md){--ngx-dialog-min-width: 28rem;max-width:36rem}:host(.ngx-dialog-size-lg){--ngx-dialog-min-width: 36rem;max-width:56rem}:host(.ngx-dialog-size-xl){--ngx-dialog-min-width: 44rem;max-width:72rem}:host(.ngx-dialog-size-full){width:100%;height:100%;max-width:none;border-radius:0}::ng-deep .dialog-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;padding:0 15px;height:50px;box-sizing:border-box;color:var(--ngx-dialog-header-fg);background:var(--ngx-dialog-header-bg);font-size:.95rem;font-weight:600;border-bottom:1px solid rgba(107,107,107,.2)}::ng-deep .dialog-header .dialog-header-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%;display:flex;align-items:center}::ng-deep .dialog-header:not(.disable-drag) .dialog-header-title{cursor:move}::ng-deep .dialog-header .ngx-dialog-action-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:inherit;padding:1px;border-radius:6px;width:24px;height:24px;background:light-dark(#efeff1,#2b2b33)}::ng-deep .dialog-header .ngx-dialog-action-btn svg{width:100%}::ng-deep .dialog-header .ngx-dialog-action-btn:hover{background:light-dark(#e2e2e6,#34343d)}::ng-deep .dialog-body{display:block;overflow:auto;padding:20px;box-sizing:border-box}::ng-deep .dialog-footer{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 15px;box-shadow:0 -1px #72727233}::ng-deep .dialog-footer.align-start{justify-content:flex-start}::ng-deep .dialog-footer.align-end{justify-content:flex-end}::ng-deep .dialog-footer.align-center{justify-content:center}::ng-deep .dialog-footer.align-space-between{justify-content:space-between}::ng-deep .dialog-footer.align-space-around{justify-content:space-around}::ng-deep .ngx-dialog-backdrop{background:light-dark(rgba(71,71,71,.5490196078),rgba(39,38,38,.4509803922))!important;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}::ng-deep .ngx-dialog-fullscreen{width:100dvw!important;height:100dvh!important;max-height:unset!important;max-width:unset!important;transform:none!important;inset:0!important}@keyframes ngxDialogZoomIn{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){:host{animation:none}}\n"] }]
+        }], ctorParameters: () => [] });
 
-class NgxDialogConfig {
+class NgxDialogService {
+    overlay = inject(OverlayService);
+    injector = inject(Injector);
+    _openRefs = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_openRefs" }] : /* istanbul ignore next */ []));
+    /** Every currently open dialog, oldest first. */
+    openDialogs = this._openRefs.asReadonly();
+    /** How many dialogs are currently open. */
+    openCount = computed(() => this._openRefs().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openCount" }] : /* istanbul ignore next */ []));
+    defaultConfig = inject(NGX_DIALOG_CONFIG);
     /**
-     * pass data to dialog
+     * Opens `content` inside a dialog panel and returns a ref you can use to
+     * close it and read the result back (`afterClosed`).
      */
-    data = {};
-    /** close dialog on outside click
-     * - default false */
-    allowCloseOnOutsideClick = false;
-    /**
-     * container class
-     * - You can separate the list of classes with a space
-     * - for example:"`my class one two three ...`"
-     *
-     * TODO: must set with public config setter
-     */
-    containerClass = 'ngx-kit';
-    header;
-    footer;
-    width = '';
-    minWidth = '';
-    maxWidth = '';
-    height = '';
-    minHeight = '';
-    maxHeight = '';
-    /** parent injector */
-    injector;
-    constructor() { }
-}
-
-class NgxDialogRef {
-    dialog;
-    header;
-    footer;
-    body;
-    _afterClosed = new Subject();
-    afterClosed = this._afterClosed.asObservable();
-    id;
-    close(result) {
-        this._afterClosed.next(result);
-    }
-}
-
-class NgxOverlayService {
-    appRef;
-    injector;
-    envInjector;
-    dialogComponentRefs = [];
-    _defaultOptions;
-    constructor(appRef, injector, envInjector) {
-        this.appRef = appRef;
-        this.injector = injector;
-        this.envInjector = envInjector;
-    }
-    open(component, config) {
-        const dialogRef = this._open(component, config);
-        return dialogRef;
-    }
-    _open(component, config) {
-        config = { ...(this._defaultOptions || new NgxDialogConfig()), ...config };
-        const map = new WeakMap();
-        map.set(NgxDialogConfig, config);
+    open(content, config) {
+        const resolvedConfig = { ...this.defaultConfig, ...config };
         const dialogRef = new NgxDialogRef();
-        dialogRef.id = this.getDialogId;
-        map.set(NgxDialogRef, dialogRef);
-        const sub = dialogRef.afterClosed.subscribe(() => {
-            // close the dialog
-            this.removeDialogComponentFromBody(dialogRef.id);
-            sub.unsubscribe();
-        });
-        // ✅ ساخت Injector اختصاصی با DestroyRef
+        dialogRef.beforeClose = resolvedConfig.beforeClose;
         const componentInjector = Injector.create({
             providers: [
-                NgxDialogRef,
-                { provide: DIALOG_DATA, useValue: config.data },
-                { provide: DIALOG_REF, useValue: dialogRef, multi: false },
+                { provide: DIALOG_DATA, useValue: resolvedConfig.data },
+                { provide: DIALOG_REF, useValue: dialogRef },
+                { provide: NGX_DIALOG_CONFIG, useValue: resolvedConfig },
+                { provide: DIALOG_CONTENT, useValue: content },
             ],
-            parent: config?.injector ? config.injector : this.envInjector,
+            parent: resolvedConfig.injector ?? this.injector,
         });
-        const componentRef = runInInjectionContext(componentInjector, () => createComponent(NgxDialogComponent, {
-            elementInjector: componentInjector,
-            environmentInjector: this.envInjector,
-        }));
-        this.appRef.attachView(componentRef.hostView);
-        this.appendDialogComponentToBody(componentRef, config);
-        componentRef.instance.config = config;
-        componentRef.instance.component = component;
-        //componentRef.instance._dialogRef = dialogRef;
-        this.dialogComponentRefs.push(componentRef);
+        const disableClose = resolvedConfig.disableClose ?? false;
+        const overlayRef = this.overlay.open({
+            component: NgxDialogComponent,
+            injector: componentInjector,
+            placement: 'center',
+            alignment: 'center',
+            margin: 0,
+            role: resolvedConfig.role ?? 'dialog',
+            ariaModal: true,
+            ariaLabel: resolvedConfig.ariaLabel,
+            ariaLabelledby: resolvedConfig.ariaLabelledby,
+            ariaDescribedby: resolvedConfig.ariaDescribedby,
+            usePopover: resolvedConfig.usePopover ?? true,
+            closeOnEscape: disableClose ? false : (resolvedConfig.closeOnEscape ?? true),
+            closeOnOutsideClick: disableClose ? false : (resolvedConfig.closeOnOutsideClick ?? false),
+            canClose: () => dialogRef.beforeClose?.() ?? true,
+            restoreFocus: resolvedConfig.restoreFocus ?? true,
+            autoFocus: resolvedConfig.autoFocus ?? true,
+            lockBodyScroll: resolvedConfig.lockBodyScroll ?? true,
+            backdropClass: resolvedConfig.backdropClass,
+            panelClass: resolvedConfig.panelClass,
+            configure: (_instance, ref) => this.applySizing(ref.nativeElement, resolvedConfig),
+            onClosed: () => {
+                this._openRefs.update((refs) => refs.filter((r) => r !== dialogRef));
+                dialogRef._finalizeClose();
+            },
+        });
+        dialogRef._attachOverlayRef(overlayRef);
+        this._openRefs.update((refs) => [...refs, dialogRef]);
         return dialogRef;
     }
-    removeDialogComponentFromBody(id) {
-        if (!id) {
-            return;
-        }
-        const index = this.dialogComponentRefs.findIndex((x) => x.instance._dialogRef.id == id);
-        if (index > -1 && this.dialogComponentRefs[index]) {
-            this.appRef.detachView(this.dialogComponentRefs[index].hostView);
-            this.dialogComponentRefs[index].destroy();
-            this.dialogComponentRefs.splice(index, 1);
-        }
-    }
-    appendDialogComponentToBody(componentRef, config) {
-        const domElem = componentRef.hostView.rootNodes[0];
-        if (config.containerClass) {
-            for (let c of config.containerClass.split(' ')) {
-                if (c.trim())
-                    domElem.classList.add(c);
-            }
-        }
-        document.body.appendChild(domElem);
-    }
+    /** Closes every currently open dialog (ignores `disableClose`/guards - use sparingly, e.g. on logout). */
     closeAll() {
-        for (let index = 0; index < this.dialogComponentRefs.length; index++) {
-            if (this.dialogComponentRefs[index]) {
-                this.appRef.detachView(this.dialogComponentRefs[index].hostView);
-                this.dialogComponentRefs[index].destroy();
-            }
-        }
-        this.dialogComponentRefs = [];
+        [...this._openRefs()].forEach((ref) => ref.close());
     }
-    get getDialogId() {
-        return randomStrnig(10, true);
+    applySizing(el, config) {
+        if (!el)
+            return;
+        if (config.width)
+            el.style.width = config.width;
+        if (config.minWidth)
+            el.style.minWidth = config.minWidth;
+        if (config.maxWidth)
+            el.style.maxWidth = config.maxWidth;
+        if (config.height)
+            el.style.height = config.height;
+        if (config.minHeight)
+            el.style.minHeight = config.minHeight;
+        if (config.maxHeight)
+            el.style.maxHeight = config.maxHeight;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxOverlayService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxOverlayService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.EnvironmentInjector }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
+const NOT_INITIALIZED_MESSAGE = '[ngx-kit/dialog] Dialog.* was called before provideNgxDialog() ran. ' +
+    'Add provideNgxDialog() to your app providers, or inject NgxDialogService directly instead of using the static Dialog API.';
+/**
+ * Static convenience API over `NgxDialogService`, so you can call
+ * `Dialog.open(...)` from anywhere without injecting the service manually.
+ *
+ * SSR note: the instance backing this static class is process-wide, not
+ * per-request, so it is deliberately left unset on the server (see
+ * `provideNgxDialog()`). Inject `NgxDialogService` directly in SSR code paths.
+ */
 class Dialog {
     static serviceInstance = null;
+    /** @internal set by `provideNgxDialog()`'s environment initializer. */
     static _setService(svc) {
         this.serviceInstance = svc;
     }
-    static open(component, config) {
+    static get service() {
         if (!this.serviceInstance) {
-            throw Error('ngx-dialog: service not initialized. Ensure NgxDialogModule is imported.');
+            throw new Error(NOT_INITIALIZED_MESSAGE);
         }
-        return this.serviceInstance.open(component, config);
+        return this.serviceInstance;
+    }
+    static open(component, config) {
+        return this.service.open(component, config);
+    }
+    static closeAll() {
+        this.service.closeAll();
     }
 }
 
-class NgxDialogModule {
-    platformId = inject(PLATFORM_ID);
-    constructor(parentModule, service) {
-        if (parentModule) {
-            return;
-        }
-        // API استاتیک Dialog.open(...) روی یک static field کلاسی پیاده شده تا
-        // بدون تزریق دستی سرویس هم قابل استفاده باشه. این static field برای کل
-        // پروسه‌ی Node.js مشترکه، نه به‌ازای هر درخواست — پس در Angular SSR،
-        // چند درخواست هم‌زمان می‌تونستن instance همدیگه رو overwrite کنن و
-        // دیالوگ یک کاربر با ApplicationRef اشتباه (کاربر دیگه) کار کنه.
-        // به‌جای این‌که این باگ به‌صورت خاموش رخ بده، روی سرور اصلاً static
-        // instance رو ست نمی‌کنیم؛ Dialog.open() روی سرور با همون خطای
-        // «service not initialized» که از قبل وجود داشت fail می‌کنه (fail-loud
-        // به‌جای corrupt خاموش). برای SSR باید NgxOverlayService رو مستقیم
-        // inject کرد (که per-request/per-injector امنه)، نه از API استاتیک
-        // استفاده کرد. رفتار کلاینت (که ۹۹٪ کاربردهاست) کاملاً بدون تغییره.
-        if (isPlatformServer(this.platformId)) {
-            return;
+function provideNgxDialog(config) {
+    return makeEnvironmentProviders([
+        {
+            provide: NGX_DIALOG_CONFIG,
+            useValue: { ...NGX_DIALOG_DEFAULT_CONFIG, ...(config || {}) },
+        },
+        NgxDialogService,
+        provideEnvironmentInitializer(() => {
+            if (isPlatformServer(inject(PLATFORM_ID))) {
+                return;
+            }
+            Dialog._setService(inject(NgxDialogService));
+        }),
+    ]);
+}
+
+/**
+ * Why this can't be pure CSS flexbox: the header/body/footer elements are
+ * *grandchildren* of the dialog panel (panel -> `*ngComponentOutlet`'s host
+ * element -> header/body/footer), not direct children, because the content
+ * component that hosts them is arbitrary and we don't control its own host
+ * styling. `display:flex;flex-direction:column` on the panel therefore can't
+ * size the body against the header/footer through that extra layer, so we
+ * measure and set an explicit `max-height` instead, driven by a
+ * `ResizeObserver` on the panel (not a `window:resize` listener, so it also
+ * reacts to the dialog itself changing size, e.g. via `config.size`).
+ */
+class NgxDialogBody {
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    dialogRef = inject(DIALOG_REF);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        this.dialogRef._setBodyElement(this.el.nativeElement);
+        this.destroyRef.onDestroy(() => this.dialogRef._setBodyElement(null));
+        effect((onCleanup) => {
+            const panel = this.dialogRef.panelEl();
+            if (!panel || typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const recompute = () => this.recomputeHeight(panel);
+            const observer = new ResizeObserver(recompute);
+            observer.observe(panel);
+            recompute();
+            onCleanup(() => observer.disconnect());
+        });
+    }
+    recomputeHeight(panel) {
+        const headerHeight = this.dialogRef.headerEl()?.offsetHeight ?? 0;
+        const footerHeight = this.dialogRef.footerEl()?.offsetHeight ?? 0;
+        const panelHeight = Math.min(panel.clientHeight, window.innerHeight);
+        const available = panelHeight - headerHeight - footerHeight;
+        console.log('available', available);
+        if (available > 0) {
+            this.renderer.setStyle(this.el.nativeElement, 'max-height', `${available}px`);
         }
-        Dialog._setService(service);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogModule, deps: [{ token: NgxDialogModule, optional: true, skipSelf: true }, { token: NgxOverlayService }], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogModule, declarations: [NgxDialogComponent,
-            NgxDialogHeaderDirective,
-            NgxDialogFooterDirective,
-            NgxDialogBodyDirective], imports: [CommonModule], exports: [NgxDialogComponent,
-            NgxDialogHeaderDirective,
-            NgxDialogFooterDirective,
-            NgxDialogBodyDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogModule, providers: [NgxOverlayService], imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: NgxDialogBody, isStandalone: true, selector: "ngx-dialog-body,[ngxDialogBody]", host: { classAttribute: "dialog-body" }, exportAs: ["ngxDialogBody"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ngx-dialog-body,[ngxDialogBody]',
+                    standalone: true,
+                    host: { class: 'dialog-body' },
+                    exportAs: 'ngxDialogBody',
+                }]
+        }], ctorParameters: () => [] });
+
+class NgxDialogModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogModule, imports: [NgxDialogComponent, NgxDialogHeader, NgxDialogFooter, NgxDialogBody], exports: [NgxDialogComponent, NgxDialogHeader, NgxDialogFooter, NgxDialogBody] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        NgxDialogComponent,
-                        NgxDialogHeaderDirective,
-                        NgxDialogFooterDirective,
-                        NgxDialogBodyDirective,
-                    ],
-                    imports: [CommonModule],
-                    exports: [
-                        NgxDialogComponent,
-                        NgxDialogHeaderDirective,
-                        NgxDialogFooterDirective,
-                        NgxDialogBodyDirective,
-                    ],
-                    providers: [NgxOverlayService],
+                    declarations: [],
+                    imports: [NgxDialogComponent, NgxDialogHeader, NgxDialogFooter, NgxDialogBody],
+                    exports: [NgxDialogComponent, NgxDialogHeader, NgxDialogFooter, NgxDialogBody],
                 }]
-        }], ctorParameters: () => [{ type: NgxDialogModule, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: NgxOverlayService }] });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DIALOG_DATA, DIALOG_REF, Dialog, NgxDialogBodyDirective, NgxDialogComponent, NgxDialogConfig, NgxDialogFooterDirective, NgxDialogHeaderDirective, NgxDialogModule };
+export { DIALOG_CONTENT, DIALOG_DATA, DIALOG_REF, Dialog, NGX_DIALOG_CONFIG, NGX_DIALOG_DEFAULT_CONFIG, NgxDialogBody, NgxDialogComponent, NgxDialogConfig, NgxDialogFooter, NgxDialogHeader, NgxDialogModule, NgxDialogService, provideNgxDialog };
 //# sourceMappingURL=ngx-kit-dialog.mjs.map