@acorex/components 21.0.1-next.8 → 21.0.1-next.81

package/fesm2022/acorex-components-popup.mjs

@@ -1,19 +1,18 @@
 import { AXPlatform } from '@acorex/core/platform';
-import { TemplatePortal, ComponentPortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { inject, NgZone, ViewContainerRef, TemplateRef, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, NgModule } from '@angular/core';
+import { inject, NgZone, input, signal, TemplateRef, ViewContainerRef, HostListener, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive, ComponentRef, Injectable, NgModule } from '@angular/core';
 import { MXBaseComponent, AXClosableComponent, AXComponent, AXComponentClosedPromise, AXCommonModule } from '@acorex/cdk/common';
+import { AXFocusTrapDirective } from '@acorex/cdk/focus-trap';
 import { AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXLoadingService } from '@acorex/components/loading';
+import { AXComponentService } from '@acorex/core/components';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
-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 { AXHtmlUtil } from '@acorex/core/utils';
+import { AXOverlayService } from '@acorex/cdk/overlay';
+import { Subject } from 'rxjs';
 
 /**
- * The Button is a component which detects user interaction and triggers a corresponding event
+ * The Popup is a component which displays content in a dialog overlay
  *
  * @category Components
  */
@@ -21,69 +20,122 @@ class AXPopupComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this._zone = inject(NgZone);
-        this._viewContainerRef = inject(ViewContainerRef);
         this.loadingService = inject(AXLoadingService);
         this._platform = inject(AXPlatform);
-        this.data = inject(DIALOG_DATA);
-        this.dialogRef = inject(DialogRef);
+        this.componentService = inject(AXComponentService);
+        // Inputs from overlay service
+        this.__content__ = input(...(ngDevMode ? [undefined, { debugName: "__content__" }] : []));
+        this.__config__ = input(...(ngDevMode ? [undefined, { debugName: "__config__" }] : []));
+        this.__popupRef__ = input(...(ngDevMode ? [undefined, { debugName: "__popupRef__" }] : []));
+        this.__id__ = input(...(ngDevMode ? [undefined, { debugName: "__id__" }] : []));
         /**
          * Indicates whether the component is loading.
          * @defaultValue true
          */
         this.isLoading = true;
+        /** @ignore */
+        this._componentRef = null;
+        /** Current title */
+        this.title = signal('', ...(ngDevMode ? [{ debugName: "title" }] : []));
+        /** @ignore */
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        /** @ignore */
+        this.dragOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragOffset" }] : []));
+        /** @ignore */
+        this.dragStartPos = { x: 0, y: 0 };
+        /** @ignore */
+        this.elementStartPos = { x: 0, y: 0 };
     }
     /** @ignore */
     ngOnInit() {
         super.ngOnInit();
+        const config = this.__config__();
         if (this._platform.is('SM')) {
-            this.data.draggable = false;
+            // Disable dragging on small screens
+            if (config) {
+                config.draggable = false;
+            }
         }
+        this.title.set(config?.title ?? '');
         this._loadingId = this.loadingService.show({
             location: this.getHostElement(),
         });
-        //
-        if (this.data.content instanceof TemplateRef) {
-            this._selectedPortal = new TemplatePortal(this.data.content, this._viewContainerRef, {
-                $implicit: this.data,
-                ref: this,
-            });
-            this.cdr.markForCheck();
-        }
-        else if (typeof this.data.content === 'function') {
-            this._selectedPortal = new ComponentPortal(this.data.content);
-            this.cdr.markForCheck();
-        }
+        this.renderContent();
     }
     /** @ignore */
-    _handleAttched(ref) {
-        ref = ref;
-        if (ref.instance) {
-            this._componentRef = ref.instance;
-            Object.assign(this._componentRef, this.data.data);
-            Object.assign(this._componentRef, { _isPopup: true });
-            Object.assign(this._componentRef, {
-                setTitle: (title) => {
-                    this.data.title = title;
-                },
+    async renderContent() {
+        const content = this.__content__();
+        const config = this.__config__();
+        if (!content) {
+            this.loadingService.hide(this._loadingId);
+            return;
+        }
+        if (content instanceof TemplateRef) {
+            // Render template using ViewContainerRef (supports context)
+            this.contentContainerRef.createEmbeddedView(content, {
+                $implicit: config?.data,
+                ref: this,
             });
-            if (ref.instance.onClosed) {
-                ref.instance.onClosed.subscribe((e) => {
+            this.handleContentRendered();
+        }
+        else if (typeof content === 'function') {
+            // Render component
+            const componentRef = this.componentService.createFromComponent(content);
+            this._componentRef = componentRef;
+            // Expose component instance to the popup ref
+            const popupRef = this.__popupRef__();
+            if (popupRef) {
+                popupRef.componentInstance = componentRef.instance;
+            }
+            // Get component input definitions to check before setting inputs
+            const inputDefs = componentRef.componentType?.ɵcmp
+                ?.inputs;
+            // Set data inputs (only if the component has the input defined)
+            if (config?.data && typeof config.data === 'object') {
+                Object.entries(config.data).forEach(([key, value]) => {
+                    componentRef.instance[key] = value;
+                });
+            }
+            if (config?.inputs && typeof config.inputs === 'object') {
+                Object.entries(config.inputs).forEach(([key, value]) => {
+                    if (inputDefs && key in inputDefs) {
+                        componentRef.setInput(key, value);
+                    }
+                });
+            }
+            // Set popup reference (only if the component has this input)
+            if (inputDefs && '__popup__' in inputDefs) {
+                componentRef.setInput('__popup__', this.__popupRef__());
+            }
+            // Move component to container
+            const hostElement = componentRef.location.nativeElement;
+            this.contentContainerEl.nativeElement.appendChild(hostElement);
+            // Subscribe to close event if available
+            const instance = componentRef.instance;
+            if (instance.onClosed) {
+                instance.onClosed.subscribe((e) => {
                     this.close(e.data);
                 });
             }
+            this.handleContentRendered();
         }
+    }
+    /** @ignore */
+    handleContentRendered() {
         this._zone.runOutsideAngular(() => {
             setTimeout(() => {
                 const body = this.getHostElement().querySelector('.ax-popup-body-container');
                 const content = body.children[0];
+                if (!content || !body)
+                    return;
                 const popHeader = this.getHostElement().querySelector('.ax-popup-header-container');
                 const popFooter = this.getHostElement().querySelector('.ax-popup-footer-container');
                 const footer = content.querySelector(':scope > ax-footer');
                 const header = content.querySelector(':scope > ax-header');
-                if (footer) {
-                    popFooter?.append(footer);
+                if (footer && popFooter) {
+                    popFooter.append(footer);
                 }
-                if (header) {
+                if (header && popHeader) {
                     popHeader.innerHTML = '';
                     popHeader.append(header);
                 }
@@ -94,9 +146,9 @@ class AXPopupComponent extends MXBaseComponent {
         this.cdr.markForCheck();
     }
     /** @ignore */
-    onKeydownHandler(event) {
+    onKeydownHandler() {
         const focusedOrHasFocused = this.getHostElement().matches(':focus-within');
-        if (this.data.closeButton && focusedOrHasFocused) {
+        if (this.__config__()?.closeButton && focusedOrHasFocused) {
             this.close();
         }
     }
@@ -107,6 +159,10 @@ class AXPopupComponent extends MXBaseComponent {
     /** @ignore */
     ngOnDestroy() {
         this.loadingService.hide(this._loadingId);
+        if (this._componentRef) {
+            this._componentRef.destroy();
+            this._componentRef = null;
+        }
     }
     /**
      * Sets focus on the `.ax-popup` element within the host element after a short delay.
@@ -115,23 +171,20 @@ class AXPopupComponent extends MXBaseComponent {
         setTimeout(() => this.getHostElement().querySelector('.ax-popup')?.focus());
     }
     /**
-     * Closes the dialog, emitting component reference, host element, and optional data.
+     * Closes the popup, emitting component reference, host element, and optional data.
      * @param {unknown} [data]
      */
     close(data) {
         const closeFn = () => {
-            this.dialogRef.close({
-                component: this._componentRef,
-                htmlElement: this.getHostElement(),
-                data: data,
-            });
+            this.__popupRef__()?.close(data);
         };
-        if (typeof this._componentRef?.onClosing === 'function') {
+        const componentInstance = this._componentRef?.instance;
+        if (typeof componentInstance?.onClosing === 'function') {
             const ee = {
                 cancel: false,
                 data,
             };
-            const closingResult = this._componentRef?.onClosing(ee);
+            const closingResult = componentInstance.onClosing(ee);
             if (closingResult instanceof Promise) {
                 closingResult.then(() => {
                     if (!ee.cancel) {
@@ -149,31 +202,102 @@ class AXPopupComponent extends MXBaseComponent {
             closeFn();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXPopupComponent, isStandalone: true, selector: "ax-popup", host: { listeners: { "keydown.escape": "onKeydownHandler($event)" } }, providers: [
+    /**
+     * Sets inputs on the content component.
+     * @param values - Object containing input values to set
+     */
+    setContentInputs(values) {
+        const componentRef = this._componentRef;
+        if (componentRef) {
+            Object.entries(values).forEach(([key, value]) => {
+                componentRef.setInput(key, value);
+            });
+        }
+    }
+    /**
+     * Sets the popup title.
+     * @param title - The new title
+     */
+    setTitle(title) {
+        this.title.set(title);
+        this.cdr.markForCheck();
+    }
+    // Drag functionality
+    onDragStart(event) {
+        const config = this.__config__();
+        if (!config?.draggable)
+            return;
+        this.isDragging.set(true);
+        this.dragStartPos = { x: event.clientX, y: event.clientY };
+        const popup = this.getHostElement().querySelector('.ax-popup');
+        if (popup) {
+            const rect = popup.getBoundingClientRect();
+            this.elementStartPos = { x: rect.left, y: rect.top };
+        }
+        event.preventDefault();
+    }
+    onDragMove(event) {
+        if (!this.isDragging())
+            return;
+        const deltaX = event.clientX - this.dragStartPos.x;
+        const deltaY = event.clientY - this.dragStartPos.y;
+        this.dragOffset.set({
+            x: this.elementStartPos.x + deltaX,
+            y: this.elementStartPos.y + deltaY,
+        });
+    }
+    onDragEnd() {
+        this.isDragging.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXPopupComponent, isStandalone: true, selector: "ax-popup", inputs: { __content__: { classPropertyName: "__content__", publicName: "__content__", isSignal: true, isRequired: false, transformFunction: null }, __config__: { classPropertyName: "__config__", publicName: "__config__", isSignal: true, isRequired: false, transformFunction: null }, __popupRef__: { classPropertyName: "__popupRef__", publicName: "__popupRef__", isSignal: true, isRequired: false, transformFunction: null }, __id__: { classPropertyName: "__id__", publicName: "__id__", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.escape": "onKeydownHandler()", "document:mousemove": "onDragMove($event)", "document:mouseup": "onDragEnd()" } }, providers: [
             { provide: AXClosableComponent, useExisting: AXPopupComponent },
             { provide: AXComponent, useExisting: AXPopupComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if (data.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n          @if (data.closeButton) {\n            <ax-close-button tabindex=\"1\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-comp-popup-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-comp-popup-header-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "contentContainerRef", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "contentContainerEl", first: true, predicate: ["contentContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" axFocusTrap>\n  <div\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [class.ax-popup-dragging]=\"isDragging()\"\n    [style.position]=\"dragOffset().x || dragOffset().y ? 'fixed' : null\"\n    [style.left.px]=\"dragOffset().x || null\"\n    [style.top.px]=\"dragOffset().y || null\"\n    [style.transform]=\"dragOffset().x || dragOffset().y ? 'none' : null\"\n  >\n    <div\n      class=\"ax-popup-header-container\"\n      [class.ax-popup-draggable]=\"__config__()?.draggable\"\n      (mousedown)=\"onDragStart($event)\"\n    >\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n          @if (__config__()?.closeButton) {\n            <ax-close-button tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\" #contentContainer></div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{.ax-popup{border-style:var(--tw-border-style);background-color:var(--color-lightest);width:auto;color:var(--color-on-lightest);border-width:1px;border-color:var(--color-border-lightest);padding:calc(var(--spacing,.25rem) * 0);outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000;flex-direction:column;margin-inline:auto;display:flex;overflow:hidden;border-radius:var(--ax-sys-border-radius)!important}.ax-popup:where(.ax-dark,.ax-dark *){background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));--ax-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--ax-shadow-colored:0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow,0 0 #0000),var(--ax-ring-shadow,0 0 #0000),var(--ax-shadow)}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-sys-color-lighter-surface))}.ax-popup .ax-popup-header-container:where(.ax-dark,.ax-dark *){background-color:rgba(var(--ax-sys-color-dark-surface))}.ax-popup .ax-popup-header-container .ax-popup-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lighter-surface));padding:calc(var(--spacing,.25rem) * 3);justify-content:space-between;align-items:center;display:flex}.ax-popup .ax-popup-header-container .ax-popup-header:where(.ax-dark,.ax-dark *){border-color:rgba(var(--ax-sys-color-border-dark-surface))}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 7);line-height:calc(var(--spacing,.25rem) * 7)}}.ax-popup .ax-popup-wrapper{display:contents}.ax-popup .ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup .ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lighter-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding:calc(var(--spacing,.25rem) * 3);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);justify-content:space-between;align-items:center;display:flex}.ax-popup ax-footer:where(.ax-dark,.ax-dark *){border-color:rgba(var(--ax-sys-color-border-dark-surface));background-color:rgba(var(--ax-sys-color-dark-surface))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{flex-direction:column;flex:1;display:flex;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{background-color:rgba(var(--ax-sys-color-lightest-surface));flex:1;overflow:auto}.ax-popup .ax-popup-main-container .ax-popup-body-container:where(.ax-dark,.ax-dark *){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-sys-color-lighter-surface))}.ax-popup .ax-popup-main-container .ax-popup-footer-container:where(.ax-dark,.ax-dark *){background-color:rgba(var(--ax-sys-color-dark-surface))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{height:fit-content;width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}:is(.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg) .ax-popup-body-container>ng-component>div{width:100%}}@media(min-width:768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media(min-width:1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media(min-width:1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]" }, { 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: AXPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popup', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         { provide: AXClosableComponent, useExisting: AXPopupComponent },
                         { provide: AXComponent, useExisting: AXPopupComponent },
-                    ], imports: [
-                        CdkTrapFocus,
-                        CdkDrag,
-                        CdkDragHandle,
-                        AXDecoratorCloseButtonComponent,
-                        CdkPortalOutlet,
-                        AsyncPipe,
-                        AXTranslatorPipe,
-                    ], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" [cdkTrapFocus]=\"true\">\n  <div class=\"ax-popup ax-popup-{{ data.size }}\" tabindex=\"0\" cdkDrag [cdkDragDisabled]=\"!data.draggable\">\n    <div cdkDragHandle class=\"ax-popup-header-container\">\n      @if (data.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ data.title | translate | async }}</span>\n          @if (data.closeButton) {\n            <ax-close-button tabindex=\"1\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\">\n        <ng-template [cdkPortalOutlet]=\"_selectedPortal\" (attached)=\"_handleAttched($event)\"></ng-template>\n      </div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));margin-left:auto;margin-right:auto;display:flex;width:auto;flex-direction:column;overflow:hidden;border-radius:var(--ax-comp-popup-border-radius);border-width:1px;border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));padding:0;--ax-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--ax-shadow-colored: 0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);outline:2px solid transparent;outline-offset:2px;color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-comp-popup-header-border-color));padding:.75rem}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1rem;font-weight:500}@media (min-width: 768px){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:1.125rem;line-height:1.75rem}}.ax-popup ax-footer{box-shadow:0 2px 10px #0000004d;display:flex;align-items:center;justify-content:space-between;border-top-width:1px;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color));padding:.75rem}.ax-popup:focus{outline:2px solid transparent;outline-offset:2px}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{flex:1 1 0%;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media (min-width: 320px) and (max-width: 640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{width:93vw!important;height:fit-content;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}.ax-popup.ax-popup-sm .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-md .ax-popup-body-container>ng-component>div,.ax-popup.ax-popup-lg .ax-popup-body-container>ng-component>div{width:100%}}@media (min-width: 768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media (min-width: 1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media (min-width: 1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}\n"] }]
-        }], propDecorators: { onKeydownHandler: [{
+                    ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe, AXFocusTrapDirective], template: "<div class=\"ax-popup-wrapper\" aria-modal=\"true\" axFocusTrap>\n  <div\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [class.ax-popup-dragging]=\"isDragging()\"\n    [style.position]=\"dragOffset().x || dragOffset().y ? 'fixed' : null\"\n    [style.left.px]=\"dragOffset().x || null\"\n    [style.top.px]=\"dragOffset().y || null\"\n    [style.transform]=\"dragOffset().x || dragOffset().y ? 'none' : null\"\n  >\n    <div\n      class=\"ax-popup-header-container\"\n      [class.ax-popup-draggable]=\"__config__()?.draggable\"\n      (mousedown)=\"onDragStart($event)\"\n    >\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\">\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n          @if (__config__()?.closeButton) {\n            <ax-close-button tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n          }\n        </div>\n      }\n    </div>\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\" #contentContainer></div>\n      <div class=\"ax-popup-footer-container\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-outline-style:solid;--tw-font-weight:initial;--tw-leading:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{.ax-popup{border-style:var(--tw-border-style);background-color:var(--color-lightest);width:auto;color:var(--color-on-lightest);border-width:1px;border-color:var(--color-border-lightest);padding:calc(var(--spacing,.25rem) * 0);outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000;flex-direction:column;margin-inline:auto;display:flex;overflow:hidden;border-radius:var(--ax-sys-border-radius)!important}.ax-popup:where(.ax-dark,.ax-dark *){background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest)}.ax-popup{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));--ax-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--ax-shadow-colored:0 10px 15px -3px var(--ax-shadow-color), 0 4px 6px -4px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow,0 0 #0000),var(--ax-ring-shadow,0 0 #0000),var(--ax-shadow)}.ax-popup .ax-popup-header-container{background-color:rgba(var(--ax-sys-color-lighter-surface))}.ax-popup .ax-popup-header-container:where(.ax-dark,.ax-dark *){background-color:rgba(var(--ax-sys-color-dark-surface))}.ax-popup .ax-popup-header-container .ax-popup-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lighter-surface));padding:calc(var(--spacing,.25rem) * 3);justify-content:space-between;align-items:center;display:flex}.ax-popup .ax-popup-header-container .ax-popup-header:where(.ax-dark,.ax-dark *){border-color:rgba(var(--ax-sys-color-border-dark-surface))}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-leading:calc(var(--spacing,.25rem) * 7);line-height:calc(var(--spacing,.25rem) * 7)}}.ax-popup .ax-popup-wrapper{display:contents}.ax-popup .ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup .ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-lighter-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding:calc(var(--spacing,.25rem) * 3);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);justify-content:space-between;align-items:center;display:flex}.ax-popup ax-footer:where(.ax-dark,.ax-dark *){border-color:rgba(var(--ax-sys-color-border-dark-surface));background-color:rgba(var(--ax-sys-color-dark-surface))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{flex-direction:column;flex:1;display:flex;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{background-color:rgba(var(--ax-sys-color-lightest-surface));flex:1;overflow:auto}.ax-popup .ax-popup-main-container .ax-popup-body-container:where(.ax-dark,.ax-dark *){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{background-color:rgba(var(--ax-sys-color-lighter-surface))}.ax-popup .ax-popup-main-container .ax-popup-footer-container:where(.ax-dark,.ax-dark *){background-color:rgba(var(--ax-sys-color-dark-surface))}.ax-popup.ax-popup-full{width:100vw;max-height:calc(100 * var(--ax-vh));height:calc(100 * var(--ax-vh));border-radius:0!important}.ax-popup.ax-fit{width:fit-content!important}.ax-popup.ax-fit .ax-popup-body-container{max-height:100vh}.ax-popup.ax-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg{height:fit-content;width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important}:is(.ax-popup.ax-popup-sm,.ax-popup.ax-popup-md,.ax-popup.ax-popup-lg) .ax-popup-body-container>ng-component>div{width:100%}}@media(min-width:768px){.ax-popup.ax-popup-sm{width:55vw!important}.ax-popup.ax-popup-md{width:65vw!important}.ax-popup.ax-popup-lg{width:75vw!important}}@media(min-width:1280px){.ax-popup.ax-popup-sm{width:30vw!important}.ax-popup.ax-popup-md{width:50vw!important}.ax-popup.ax-popup-lg{width:85vw!important}}@media(min-width:1536px){.ax-popup.ax-popup-sm{width:25vw!important}.ax-popup.ax-popup-md{width:40vw!important}.ax-popup.ax-popup-lg{width:65vw!important}}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { contentContainerRef: [{
+                type: ViewChild,
+                args: ['contentContainer', { read: ViewContainerRef, static: true }]
+            }], contentContainerEl: [{
+                type: ViewChild,
+                args: ['contentContainer', { static: true }]
+            }], __content__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__content__", required: false }] }], __config__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__config__", required: false }] }], __popupRef__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popupRef__", required: false }] }], __id__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__id__", required: false }] }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }], onDragMove: [{
                 type: HostListener,
-                args: ['keydown.escape', ['$event']]
+                args: ['document:mousemove', ['$event']]
+            }], onDragEnd: [{
+                type: HostListener,
+                args: ['document:mouseup']
             }] } });
 
+class AXPopupComponentBase {
+    constructor() {
+        this.__popup__ = input(...(ngDevMode ? [undefined, { debugName: "__popup__" }] : []));
+    }
+    close(data = null) {
+        this.__popup__().close(data);
+    }
+    setTitle(title) {
+        this.__popup__().setTitle(title);
+    }
+    bringToFront() {
+        this.__popup__().bringToFront();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: AXPopupComponentBase, isStandalone: true, inputs: { __popup__: { classPropertyName: "__popup__", publicName: "__popup__", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupComponentBase, decorators: [{
+            type: Directive
+        }], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }] } });
+
 /**
  * This is a service which you can create popup with it
  *
@@ -181,10 +305,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 class AXPopupService {
     constructor() {
-        this.dialog = inject(Dialog);
-        this.#platform = inject(AXPlatform);
+        this.popupList = new Map();
+        this.overlayService = inject(AXOverlayService);
     }
-    #platform;
     /**
      *  @ignore
      */
@@ -205,63 +328,136 @@ class AXPopupService {
         else {
             config = Object.assign(config, arg2);
         }
-        const dialogRef = this.dialog.open(AXPopupComponent, {
-            data: Object.assign(config, { content: arg1 }),
-            autoFocus: true,
-            restoreFocus: true,
-            closeOnNavigation: true,
-            closeOnDestroy: true,
-            hasBackdrop: config.hasBackdrop,
-            backdropClass: config.backdropClass,
-            disableClose: config.closeOnBackdropClick ? false : true,
-            viewContainerRef: config.viewContainerRef,
-            providers: config.providers,
-            panelClass: config.panelClass ? config.panelClass : [this.#platform.isDark() ? 'ax-dark' : ''],
-            direction: config.direction ? config.direction : AXHtmlUtil.isRtl() ? 'rtl' : 'ltr',
-        });
         const promise = new AXComponentClosedPromise((resolve) => {
-            dialogRef.closed.subscribe((d) => {
-                if (resolve) {
-                    resolve({
-                        sender: d?.component,
-                        data: d?.data,
-                    });
-                }
+            this.openInternal(arg1, config).then((ref) => {
+                ref.onClose.subscribe((data) => {
+                    if (resolve) {
+                        resolve({
+                            sender: ref.componentInstance,
+                            data: data,
+                        });
+                    }
+                });
             });
         });
         return promise;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupService }); }
+    /**
+     * Opens a popup with the specified content and configuration.
+     * @param content - Component or template to display
+     * @param config - Configuration options for the popup
+     * @returns Promise<AXPopupRef> - Reference to the opened popup
+     */
+    async openInternal(content, config) {
+        const randomId = Math.floor(Math.random() * 100000000000);
+        const onClose = new Subject();
+        const returnRef = {
+            close: (data) => {
+                this.close(randomId, data);
+            },
+            setInputs: (values) => {
+                this.setInputs(randomId, values);
+            },
+            setTitle: (title) => {
+                this.setTitle(randomId, title);
+            },
+            bringToFront: () => {
+                this.bringToFront(randomId);
+            },
+            onClose,
+        };
+        // Build panel classes
+        const panelClasses = ['ax-popup-overlay'];
+        if (config.panelClass) {
+            panelClasses.push(...config.panelClass);
+        }
+        const ref = await this.overlayService.create(AXPopupComponent, {
+            backdrop: {
+                enabled: config.hasBackdrop ?? true,
+                background: true,
+                closeOnClick: config.closeOnBackdropClick ?? false,
+            },
+            panelClass: panelClasses,
+            inputs: {
+                __content__: content,
+                __config__: config,
+                __popupRef__: returnRef,
+                __id__: randomId,
+            },
+        });
+        this.popupList.set(randomId, { overlay: ref, popup: returnRef });
+        return returnRef;
+    }
+    /**
+     * Closes a popup by its ID.
+     * @param id - The popup ID to close
+     * @param data - Optional data to pass to the close event
+     */
+    close(id, data) {
+        const ref = this.popupList.get(id);
+        if (!ref)
+            return;
+        ref.popup.onClose.next(data);
+        ref.popup.onClose.complete();
+        ref.overlay.dispose();
+        this.popupList.delete(id);
+    }
+    /**
+     * Sets input values for a popup by its ID.
+     * @param id - The popup ID
+     * @param values - Object containing input values to set
+     */
+    setInputs(id, values) {
+        const ref = this.popupList.get(id)?.overlay.instance;
+        if (!ref)
+            return;
+        if (ref instanceof ComponentRef) {
+            const componentInstance = ref.instance;
+            componentInstance.setContentInputs(values);
+        }
+    }
+    /**
+     * Sets the title for a popup by its ID.
+     * @param id - The popup ID
+     * @param title - The new title
+     */
+    setTitle(id, title) {
+        const ref = this.popupList.get(id)?.overlay.instance;
+        if (!ref)
+            return;
+        if (ref instanceof ComponentRef) {
+            const componentInstance = ref.instance;
+            componentInstance.setTitle(title);
+        }
+    }
+    /**
+     * Brings a popup to the front of all other overlays.
+     * @param id - The popup ID to bring to front
+     */
+    bringToFront(id) {
+        const ref = this.popupList.get(id);
+        if (!ref)
+            return;
+        ref.overlay.bringToFront();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
 const COMPONENT = [AXPopupComponent];
-const MODULES = [
-    CommonModule,
-    AXCommonModule,
-    DragDropModule,
-    A11yModule,
-    PortalModule,
-    AXDecoratorModule,
-    DialogModule,
-    AXTranslationModule,
-];
+const MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXTranslationModule];
 class AXPopupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, imports: [CommonModule,
-            AXCommonModule,
-            DragDropModule,
-            A11yModule,
-            PortalModule,
-            AXDecoratorModule,
-            DialogModule,
-            AXTranslationModule, AXPopupComponent], exports: [AXPopupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXPopupModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXTranslationModule, AXPopupComponent], exports: [AXPopupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPopupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],
@@ -274,5 +470,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXPopupComponent, AXPopupModule, AXPopupService };
+export { AXPopupComponent, AXPopupComponentBase, AXPopupModule, AXPopupService };
 //# sourceMappingURL=acorex-components-popup.mjs.map