@acorex/components 22.0.0-next.1 → 22.0.0-next.3

package/fesm2022/acorex-components-popup.mjs

@@ -1,18 +1,79 @@
-import { AXPlatform } from '@acorex/core/platform';
+import { AXComponent, MXBaseComponent, AXClosableComponent, AXComponentClosedPromise, NXComponent, AXCommonModule } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { inject, NgZone, DestroyRef, input, signal, TemplateRef, ViewContainerRef, HostListener, ViewChild, ViewEncapsulation, Component, Directive, ComponentRef, Injectable, NgModule } from '@angular/core';
+import { ViewEncapsulation, Component, input, Directive, inject, NgZone, DestroyRef, viewChild, signal, TemplateRef, ViewContainerRef, HostListener, ViewChild, ComponentRef, Injectable, NgModule } from '@angular/core';
+import { AXOverlayService } from '@acorex/cdk/overlay';
+import { Subject } from 'rxjs';
+import { AXPlatform } from '@acorex/core/platform';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationStart } from '@angular/router';
 import { filter } from 'rxjs/operators';
-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 { AXButtonComponent } from '@acorex/components/button';
+import { AXDecoratorCloseButtonComponent, AXDecoratorIconComponent, 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 { AsyncPipe, CommonModule } from '@angular/common';
-import { AXOverlayService } from '@acorex/cdk/overlay';
-import { Subject } from 'rxjs';
+
+class AXPopupFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPopupFooterComponent, isStandalone: true, selector: "ax-popup-footer", providers: [{ provide: AXComponent, useExisting: AXPopupFooterComponent }], ngImport: i0, template: "<ng-content select=\"ax-prefix\"></ng-content>\n<ng-content select=\"ax-suffix\"></ng-content>\n<ng-content></ng-content>\n", styles: ["@layer components{ax-popup-footer{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-popup-footer', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXPopupFooterComponent }], template: "<ng-content select=\"ax-prefix\"></ng-content>\n<ng-content select=\"ax-suffix\"></ng-content>\n<ng-content></ng-content>\n", styles: ["@layer components{ax-popup-footer{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class AXPopupComponentBase {
+    constructor() {
+        this.__popup__ = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "__popup__" }] : /* istanbul ignore next */ []));
+    }
+    close(data = null) {
+        this.__popup__()?.close(data);
+    }
+    setTitle(title) {
+        this.__popup__()?.setTitle(title);
+    }
+    minimize() {
+        this.__popup__()?.minimize();
+    }
+    maximize() {
+        this.__popup__()?.maximize();
+    }
+    restore() {
+        this.__popup__()?.restore();
+    }
+    bringToFront() {
+        this.__popup__()?.bringToFront();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", 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: "22.0.8", ngImport: i0, type: AXPopupComponentBase, decorators: [{
+            type: Directive
+        }], propDecorators: { __popup__: [{ type: i0.Input, args: [{ isSignal: true, alias: "__popup__", required: false }] }] } });
+/** Resolves whether the close header button is shown. `buttons.close` wins over `closeButton`. */
+function resolvePopupCloseButton(config) {
+    if (config?.buttons?.close !== undefined) {
+        return config.buttons.close;
+    }
+    return config?.closeButton ?? true;
+}
+/** Resolves whether maximize is enabled. `buttons.maximize` wins over `maximizable`. Default: false. */
+function resolvePopupMaximizable(config) {
+    if (config?.buttons?.maximize !== undefined) {
+        return config.buttons.maximize;
+    }
+    return config?.maximizable ?? false;
+}
+/** Resolves minimize button config. Default: disabled at bottom-right. */
+function resolvePopupMinimize(config) {
+    return {
+        enable: config?.buttons?.minimize?.enable ?? false,
+        position: config?.buttons?.minimize?.position ?? 'bottom-right',
+    };
+}
 
 /**
  * The Popup is a component which displays content in a dialog overlay
@@ -28,6 +89,8 @@ class AXPopupComponent extends MXBaseComponent {
         this.componentService = inject(AXComponentService);
         this._router = inject(Router, { optional: true });
         this._destroyRef = inject(DestroyRef);
+        this.popupEl = viewChild('popupEl', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupEl" }] : /* istanbul ignore next */ []));
         // Inputs from overlay service
         this.__content__ = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "__content__" }] : /* istanbul ignore next */ []));
@@ -57,13 +120,29 @@ class AXPopupComponent extends MXBaseComponent {
         this.dragStartPos = { x: 0, y: 0 };
         /** @ignore */
         this.elementStartPos = { x: 0, y: 0 };
+        this.popupSizeState = signal('normal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupSizeState" }] : /* istanbul ignore next */ []));
+        this.fullScreenState = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullScreenState" }] : /* istanbul ignore next */ []));
+        this.minimizeLeft = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minimizeLeft" }] : /* istanbul ignore next */ []));
+        this.minimizeRight = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minimizeRight" }] : /* istanbul ignore next */ []));
+        this.fullscreenChangeHandler = () => {
+            if (!document.fullscreenElement) {
+                this.fullScreenState.set(false);
+                this.cdr.markForCheck();
+            }
+        };
+        this.closeEnabled = () => resolvePopupCloseButton(this.__config__());
+        this.maximizeEnabled = () => resolvePopupMaximizable(this.__config__());
+        this.minimizeEnabled = () => resolvePopupMinimize(this.__config__()).enable;
     }
     /** @ignore */
     ngOnInit() {
         super.ngOnInit();
         const config = this.__config__();
         if (this._platform.is('SM')) {
-            // Disable dragging on small screens
             if (config) {
                 config.draggable = false;
             }
@@ -73,6 +152,7 @@ class AXPopupComponent extends MXBaseComponent {
             location: this.getHostElement(),
         });
         this._setupCloseOnNavigation();
+        document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
         this.renderContent();
     }
     /**
@@ -101,26 +181,26 @@ class AXPopupComponent extends MXBaseComponent {
             return;
         }
         if (content instanceof TemplateRef) {
-            // Render template using ViewContainerRef (supports context)
             this.contentContainerRef.createEmbeddedView(content, {
                 $implicit: config?.data,
                 ref: this,
+                ...(typeof config?.inputs === 'object' && config.inputs ? config.inputs : {}),
             });
             this.handleContentRendered();
         }
+        else if (content instanceof HTMLElement) {
+            this.contentContainerEl.nativeElement.appendChild(content.cloneNode(true));
+            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;
@@ -133,14 +213,11 @@ class AXPopupComponent extends MXBaseComponent {
                     }
                 });
             }
-            // 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) => {
@@ -155,12 +232,16 @@ class AXPopupComponent extends MXBaseComponent {
         this._zone.runOutsideAngular(() => {
             setTimeout(() => {
                 const body = this.getHostElement().querySelector('.ax-popup-body-container');
-                const content = body.children[0];
-                if (!content || !body)
+                const content = body?.children[0];
+                if (!content || !body) {
+                    this.focus();
                     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 footer = content.querySelector(':scope > ax-footer') ||
+                    content.querySelector(':scope > ax-popup-footer') ||
+                    this.getHostElement().querySelector('.ax-popup-body-container ax-popup-footer');
                 const header = content.querySelector(':scope > ax-header');
                 if (footer && popFooter) {
                     popFooter.append(footer);
@@ -177,8 +258,13 @@ class AXPopupComponent extends MXBaseComponent {
     }
     /** @ignore */
     onKeydownHandler() {
+        const config = this.__config__();
         const focusedOrHasFocused = this.getHostElement().matches(':focus-within');
-        if (this.__config__()?.closeButton && focusedOrHasFocused) {
+        if (!focusedOrHasFocused)
+            return;
+        if (config?.closeOnEscape === false)
+            return;
+        if (config?.closeOnEscape === true || this.closeEnabled()) {
             this.close();
         }
     }
@@ -188,6 +274,10 @@ class AXPopupComponent extends MXBaseComponent {
     }
     /** @ignore */
     ngOnDestroy() {
+        document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler);
+        if (this.fullScreenState() && document.fullscreenElement) {
+            document.exitFullscreen().catch(() => undefined);
+        }
         this.loadingService.hide(this._loadingId);
         if (this._componentRef) {
             this._componentRef.destroy();
@@ -202,7 +292,6 @@ class AXPopupComponent extends MXBaseComponent {
     }
     /**
      * Closes the popup, emitting component reference, host element, and optional data.
-     * @param {unknown} [data]
      */
     close(data) {
         const closeFn = () => {
@@ -232,9 +321,70 @@ class AXPopupComponent extends MXBaseComponent {
             closeFn();
         }
     }
+    /**
+     * Minimizes the popup to the bottom bar.
+     */
+    minimize() {
+        if (this.fullScreenState() && document.fullscreenElement) {
+            document.exitFullscreen().catch(() => undefined);
+        }
+        const el = this.popupEl()?.nativeElement;
+        if (!el)
+            return;
+        this.minimizeLeft.set(null);
+        this.minimizeRight.set(null);
+        this.popupSizeState.set('minimize');
+        this.cdr.markForCheck();
+        requestAnimationFrame(() => {
+            const width = el.offsetWidth;
+            const index = this.__popupRef__()?._getStackIndex?.() ?? 0;
+            const position = resolvePopupMinimize(this.__config__()).position;
+            if (position === 'bottom-right') {
+                this.minimizeLeft.set(null);
+                this.minimizeRight.set(`${index * (width + 10)}px`);
+            }
+            else {
+                this.minimizeRight.set(null);
+                this.minimizeLeft.set(`${index * (width + 10)}px`);
+            }
+            this.cdr.markForCheck();
+        });
+    }
+    /**
+     * Maximizes the popup using the Fullscreen API.
+     */
+    maximize() {
+        const el = this.popupEl()?.nativeElement;
+        if (!el)
+            return;
+        if (this.popupSizeState() === 'minimize') {
+            this.restore();
+        }
+        if (!document.fullscreenElement) {
+            el.requestFullscreen().then(() => {
+                this.fullScreenState.set(true);
+                this.cdr.markForCheck();
+            });
+        }
+        else {
+            document.exitFullscreen().catch(() => undefined);
+        }
+    }
+    /**
+     * Restores the popup from minimized or fullscreen state.
+     */
+    restore() {
+        if (this.fullScreenState() && document.fullscreenElement) {
+            document.exitFullscreen().catch(() => undefined);
+            return;
+        }
+        this.minimizeLeft.set(null);
+        this.minimizeRight.set(null);
+        this.popupSizeState.set('normal');
+        this.cdr.markForCheck();
+    }
     /**
      * Sets inputs on the content component.
-     * @param values - Object containing input values to set
      */
     setContentInputs(values) {
         const componentRef = this._componentRef;
@@ -246,7 +396,6 @@ class AXPopupComponent extends MXBaseComponent {
     }
     /**
      * Sets the popup title.
-     * @param title - The new title
      */
     setTitle(title) {
         this.title.set(title);
@@ -257,6 +406,8 @@ class AXPopupComponent extends MXBaseComponent {
         const config = this.__config__();
         if (!config?.draggable)
             return;
+        if (this.popupSizeState() === 'minimize' || this.fullScreenState())
+            return;
         this.isDragging.set(true);
         this.dragStartPos = { x: event.clientX, y: event.clientY };
         const popup = this.getHostElement().querySelector('.ax-popup');
@@ -283,7 +434,7 @@ class AXPopupComponent extends MXBaseComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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()" }, styleAttribute: "display: block; max-width: 100%;", classAttribute: "ax-popup-host" }, providers: [
             { provide: AXClosableComponent, useExisting: AXPopupComponent },
             { provide: AXComponent, useExisting: AXPopupComponent },
-        ], 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;@layer components{.ax-popup-overlay.ax-overlay-centered .ax-overlay-content{display:flex;max-height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:auto;max-width:100%;flex-direction:column;align-items:center;overflow:hidden}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host{width:fit-content;flex-shrink:0;align-self:center}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-full){width:100%;max-width:100vw}.ax-popup-wrapper{display:block;width:fit-content;max-width:100%}.ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup{box-sizing:border-box;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 0);outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius);border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));--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 #0000),var(--ax-ring-shadow, 0 0 #0000),var(--ax-shadow);color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{flex-shrink:0;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-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-comp-popup-header-border-color))}.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)))}}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7)}}.ax-popup ax-footer{display:flex;align-items:center;justify-content:space-between;border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 3);box-shadow:0 2px 10px #0000004d;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{flex-shrink:0;background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{height:calc(100 * var(--ax-vh));max-height:calc(100 * var(--ax-vh));width:100vw;border-radius:0!important}.ax-popup.ax-popup-fit{width:fit-content!important}.ax-popup.ax-popup-fit .ax-popup-body-container{max-height:calc(100 * var(--ax-vh))}.ax-popup.ax-popup-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}.ax-popup.ax-popup-xs{width:18vw!important;max-width:100vw}.ax-popup.ax-popup-sm{width:25vw!important;max-width:100vw}.ax-popup.ax-popup-md{width:40vw!important;max-width:100vw}.ax-popup.ax-popup-lg{width:65vw!important;max-width:100vw}.ax-popup.ax-popup-xl{width:75vw!important;max-width:100vw}.ax-popup.ax-popup-2xl{width:85vw!important;max-width:100vw}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit){width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important;border-radius:var(--ax-comp-popup-border-radius)}.ax-popup:not(.ax-popup-fit):not(.ax-popup-full) .ax-popup-body-container>ng-component>div{width:100%}.ax-popup:not(.ax-popup-fit).ax-popup-full{height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius)!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)}}: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)}@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;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]", inputs: ["axFocusTrapArrowNavigation"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true, isSignal: true }, { 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\n  class=\"ax-popup-wrapper\"\n  aria-modal=\"true\"\n  axFocusTrap\n  [class.ax-popup-minimized-host]=\"popupSizeState() === 'minimize'\"\n>\n  <div\n    #popupEl\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [class.ax-popup-dragging]=\"isDragging()\"\n    [class.ax-popup-minimized]=\"popupSizeState() === 'minimize'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.position]=\"dragOffset().x || dragOffset().y || popupSizeState() === 'minimize' ? 'fixed' : null\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : dragOffset().x ? dragOffset().x + 'px' : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : null\"\n    [style.top]=\"popupSizeState() === 'minimize' ? 'auto' : dragOffset().y ? dragOffset().y + 'px' : null\"\n    [style.bottom]=\"popupSizeState() === 'minimize' ? '0' : null\"\n    [style.transform]=\"dragOffset().x || dragOffset().y || popupSizeState() === 'minimize' ? 'none' : null\"\n  >\n    <div\n      class=\"ax-popup-header-container\"\n      [class.ax-popup-draggable]=\"__config__()?.draggable && popupSizeState() !== 'minimize' && !fullScreenState()\"\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          <div class=\"ax-popup-header-actions\">\n            @if (minimizeEnabled()) {\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" (onClick)=\"minimize()\">\n                <ax-icon class=\"ax-icon ax-icon-minimize\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (popupSizeState() !== 'normal' || fullScreenState()) {\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" (onClick)=\"restore()\">\n                <ax-icon class=\"ax-icon ax-icon-maximize\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (maximizeEnabled()) {\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" (onClick)=\"maximize()\">\n                <ax-icon class=\"ax-icon ax-icon-full-screen\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (closeEnabled()) {\n              <ax-close-button tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n            }\n          </div>\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\" [class.ax-popup-footer-visible]=\"__config__()?.footer\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{.ax-popup-overlay.ax-overlay-centered{pointer-events:none}.ax-popup-overlay.ax-overlay-centered .ax-overlay-content{display:flex;max-height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:auto;max-width:100%;flex-direction:column;align-items:center;overflow:hidden;pointer-events:none}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host{width:fit-content;flex-shrink:0;align-self:center;pointer-events:auto}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-full){width:100%;max-width:100vw}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-minimized){width:fit-content!important}.ax-popup-wrapper{display:block;width:fit-content;max-width:100%}.ax-popup-wrapper.ax-popup-minimized-host{width:fit-content!important}.ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup.ax-popup-fullscreen{max-height:100vh!important;width:100vw!important;border-radius:0!important}.ax-popup-header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ax-popup{box-sizing:border-box;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 0);outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius);border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));--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 #0000),var(--ax-ring-shadow, 0 0 #0000),var(--ax-shadow);color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{flex-shrink:0;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-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-comp-popup-header-border-color))}.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)))}}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7)}}.ax-popup ax-footer{display:flex;align-items:center;justify-content:space-between;border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 3);box-shadow:0 2px 10px #0000004d;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{flex-shrink:0;background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{height:calc(100 * var(--ax-vh));max-height:calc(100 * var(--ax-vh));width:100vw;border-radius:0!important}.ax-popup.ax-popup-fit{width:fit-content!important}.ax-popup.ax-popup-fit .ax-popup-body-container{max-height:calc(100 * var(--ax-vh))}.ax-popup.ax-popup-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}.ax-popup.ax-popup-xs{width:18vw!important;max-width:100vw}.ax-popup.ax-popup-sm{width:25vw!important;max-width:100vw}.ax-popup.ax-popup-md{width:40vw!important;max-width:100vw}.ax-popup.ax-popup-lg{width:65vw!important;max-width:100vw}.ax-popup.ax-popup-xl{width:75vw!important;max-width:100vw}.ax-popup.ax-popup-2xl{width:85vw!important;max-width:100vw}.ax-popup.ax-popup-minimized{z-index:55;width:fit-content!important;max-width:min(90vw,24rem)!important;min-width:0;max-height:none}.ax-popup.ax-popup-minimized .ax-popup-main-container{display:none}.ax-popup.ax-popup-minimized .ax-popup-header{width:max-content;max-width:100%;gap:calc(var(--spacing, .25rem) * 2)}.ax-popup.ax-popup-minimized .ax-popup-title{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized){width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important;border-radius:var(--ax-comp-popup-border-radius)}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-full) .ax-popup-body-container>ng-component>div{width:100%}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized).ax-popup-full{height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius)!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)}}: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)}@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;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]", inputs: ["axFocusTrapArrowNavigation"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
@@ -293,14 +444,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     }, providers: [
                         { provide: AXClosableComponent, useExisting: AXPopupComponent },
                         { provide: AXComponent, useExisting: AXPopupComponent },
-                    ], 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;@layer components{.ax-popup-overlay.ax-overlay-centered .ax-overlay-content{display:flex;max-height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:auto;max-width:100%;flex-direction:column;align-items:center;overflow:hidden}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host{width:fit-content;flex-shrink:0;align-self:center}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-full){width:100%;max-width:100vw}.ax-popup-wrapper{display:block;width:fit-content;max-width:100%}.ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup{box-sizing:border-box;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 0);outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius);border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));--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 #0000),var(--ax-ring-shadow, 0 0 #0000),var(--ax-shadow);color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{flex-shrink:0;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-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-comp-popup-header-border-color))}.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)))}}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7)}}.ax-popup ax-footer{display:flex;align-items:center;justify-content:space-between;border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 3);box-shadow:0 2px 10px #0000004d;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{flex-shrink:0;background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{height:calc(100 * var(--ax-vh));max-height:calc(100 * var(--ax-vh));width:100vw;border-radius:0!important}.ax-popup.ax-popup-fit{width:fit-content!important}.ax-popup.ax-popup-fit .ax-popup-body-container{max-height:calc(100 * var(--ax-vh))}.ax-popup.ax-popup-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}.ax-popup.ax-popup-xs{width:18vw!important;max-width:100vw}.ax-popup.ax-popup-sm{width:25vw!important;max-width:100vw}.ax-popup.ax-popup-md{width:40vw!important;max-width:100vw}.ax-popup.ax-popup-lg{width:65vw!important;max-width:100vw}.ax-popup.ax-popup-xl{width:75vw!important;max-width:100vw}.ax-popup.ax-popup-2xl{width:85vw!important;max-width:100vw}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit){width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important;border-radius:var(--ax-comp-popup-border-radius)}.ax-popup:not(.ax-popup-fit):not(.ax-popup-full) .ax-popup-body-container>ng-component>div{width:100%}.ax-popup:not(.ax-popup-fit).ax-popup-full{height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius)!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)}}: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)}@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;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [
+                        AXDecoratorCloseButtonComponent,
+                        AXDecoratorIconComponent,
+                        AXButtonComponent,
+                        AsyncPipe,
+                        AXTranslatorPipe,
+                        AXFocusTrapDirective,
+                    ], template: "<div\n  class=\"ax-popup-wrapper\"\n  aria-modal=\"true\"\n  axFocusTrap\n  [class.ax-popup-minimized-host]=\"popupSizeState() === 'minimize'\"\n>\n  <div\n    #popupEl\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [class.ax-popup-dragging]=\"isDragging()\"\n    [class.ax-popup-minimized]=\"popupSizeState() === 'minimize'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.position]=\"dragOffset().x || dragOffset().y || popupSizeState() === 'minimize' ? 'fixed' : null\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : dragOffset().x ? dragOffset().x + 'px' : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : null\"\n    [style.top]=\"popupSizeState() === 'minimize' ? 'auto' : dragOffset().y ? dragOffset().y + 'px' : null\"\n    [style.bottom]=\"popupSizeState() === 'minimize' ? '0' : null\"\n    [style.transform]=\"dragOffset().x || dragOffset().y || popupSizeState() === 'minimize' ? 'none' : null\"\n  >\n    <div\n      class=\"ax-popup-header-container\"\n      [class.ax-popup-draggable]=\"__config__()?.draggable && popupSizeState() !== 'minimize' && !fullScreenState()\"\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          <div class=\"ax-popup-header-actions\">\n            @if (minimizeEnabled()) {\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" (onClick)=\"minimize()\">\n                <ax-icon class=\"ax-icon ax-icon-minimize\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (popupSizeState() !== 'normal' || fullScreenState()) {\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" (onClick)=\"restore()\">\n                <ax-icon class=\"ax-icon ax-icon-maximize\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (maximizeEnabled()) {\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" (onClick)=\"maximize()\">\n                <ax-icon class=\"ax-icon ax-icon-full-screen\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (closeEnabled()) {\n              <ax-close-button tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n            }\n          </div>\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\" [class.ax-popup-footer-visible]=\"__config__()?.footer\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{.ax-popup-overlay.ax-overlay-centered{pointer-events:none}.ax-popup-overlay.ax-overlay-centered .ax-overlay-content{display:flex;max-height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:auto;max-width:100%;flex-direction:column;align-items:center;overflow:hidden;pointer-events:none}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host{width:fit-content;flex-shrink:0;align-self:center;pointer-events:auto}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-full){width:100%;max-width:100vw}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-minimized){width:fit-content!important}.ax-popup-wrapper{display:block;width:fit-content;max-width:100%}.ax-popup-wrapper.ax-popup-minimized-host{width:fit-content!important}.ax-popup-header-container.ax-popup-draggable{cursor:move}.ax-popup.ax-popup-dragging{-webkit-user-select:none;user-select:none}.ax-popup.ax-popup-fullscreen{max-height:100vh!important;width:100vw!important;border-radius:0!important}.ax-popup-header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ax-popup{box-sizing:border-box;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 0);outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius);border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));--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 #0000),var(--ax-ring-shadow, 0 0 #0000),var(--ax-shadow);color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{flex-shrink:0;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-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-comp-popup-header-border-color))}.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)))}}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7)}}.ax-popup ax-footer{display:flex;align-items:center;justify-content:space-between;border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 3);box-shadow:0 2px 10px #0000004d;border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-footer-container{flex-shrink:0;background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{height:calc(100 * var(--ax-vh));max-height:calc(100 * var(--ax-vh));width:100vw;border-radius:0!important}.ax-popup.ax-popup-fit{width:fit-content!important}.ax-popup.ax-popup-fit .ax-popup-body-container{max-height:calc(100 * var(--ax-vh))}.ax-popup.ax-popup-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}.ax-popup.ax-popup-xs{width:18vw!important;max-width:100vw}.ax-popup.ax-popup-sm{width:25vw!important;max-width:100vw}.ax-popup.ax-popup-md{width:40vw!important;max-width:100vw}.ax-popup.ax-popup-lg{width:65vw!important;max-width:100vw}.ax-popup.ax-popup-xl{width:75vw!important;max-width:100vw}.ax-popup.ax-popup-2xl{width:85vw!important;max-width:100vw}.ax-popup.ax-popup-minimized{z-index:55;width:fit-content!important;max-width:min(90vw,24rem)!important;min-width:0;max-height:none}.ax-popup.ax-popup-minimized .ax-popup-main-container{display:none}.ax-popup.ax-popup-minimized .ax-popup-header{width:max-content;max-width:100%;gap:calc(var(--spacing, .25rem) * 2)}.ax-popup.ax-popup-minimized .ax-popup-title{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized){width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important;border-radius:var(--ax-comp-popup-border-radius)}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-full) .ax-popup-body-container>ng-component>div{width:100%}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized).ax-popup-full{height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius)!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)}}: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)}@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;}@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}}}\n/*! tailwindcss v4.1.16 | 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: [{
+            }], popupEl: [{ type: i0.ViewChild, args: ['popupEl', { isSignal: 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: [{
@@ -311,27 +469,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['document:mouseup']
             }] } });
 
-class AXPopupComponentBase {
-    constructor() {
-        this.__popup__ = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "__popup__" }] : /* istanbul ignore next */ []));
-    }
-    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: "22.0.8", ngImport: i0, type: AXPopupComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", 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: "22.0.8", 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
  *
@@ -346,9 +483,32 @@ class AXPopupService {
      *  @ignore
      */
     open(arg1, arg2) {
-        let config = {
+        const config = this.mergeConfig(arg2);
+        const promise = new AXComponentClosedPromise((resolve) => {
+            this.openRef(arg1, config).then((ref) => {
+                ref.onClose.subscribe((data) => {
+                    if (resolve) {
+                        resolve({
+                            sender: ref.componentInstance,
+                            data: data,
+                        });
+                    }
+                });
+            });
+        });
+        return promise;
+    }
+    /**
+     * Opens a popup and returns a mutable reference (for host components and advanced control).
+     */
+    async openRef(content, config) {
+        return this.openInternal(content, this.mergeConfig(config));
+    }
+    mergeConfig(arg2) {
+        const config = {
             closeButton: true,
             header: true,
+            footer: false,
             size: 'md',
             maximizable: false,
             draggable: true,
@@ -357,32 +517,38 @@ class AXPopupService {
             data: {},
             closeOnNavigation: true,
             panelClass: ['animate-fadeIn', 'animate-fast'],
+            buttons: {
+                close: true,
+                maximize: false,
+                minimize: {
+                    enable: false,
+                    position: 'bottom-right',
+                },
+            },
         };
         if (typeof arg2 === 'string') {
             config.title = arg2;
         }
-        else {
-            config = Object.assign(config, arg2);
+        else if (arg2) {
+            const { buttons, ...rest } = arg2;
+            Object.assign(config, rest);
+            if (buttons) {
+                config.buttons = {
+                    ...config.buttons,
+                    ...buttons,
+                    minimize: {
+                        enable: false,
+                        position: 'bottom-right',
+                        ...config.buttons?.minimize,
+                        ...buttons.minimize,
+                    },
+                };
+            }
         }
-        const promise = new AXComponentClosedPromise((resolve) => {
-            this.openInternal(arg1, config).then((ref) => {
-                ref.onClose.subscribe((data) => {
-                    if (resolve) {
-                        resolve({
-                            sender: ref.componentInstance,
-                            data: data,
-                        });
-                    }
-                });
-            });
-        });
-        return promise;
+        return config;
     }
     /**
      * 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);
@@ -397,12 +563,27 @@ class AXPopupService {
             setTitle: (title) => {
                 this.setTitle(randomId, title);
             },
+            minimize: () => {
+                this.minimize(randomId);
+            },
+            maximize: () => {
+                this.maximize(randomId);
+            },
+            restore: () => {
+                this.restore(randomId);
+            },
             bringToFront: () => {
                 this.bringToFront(randomId);
             },
             onClose,
+            _getStackIndex: () => this.getMapIndexOf(randomId),
         };
-        // Build panel classes
+        if (config._bindContentInputs) {
+            config.inputs = {
+                ...(config.inputs ?? {}),
+                ...config._bindContentInputs(returnRef),
+            };
+        }
         const panelClasses = ['ax-popup-overlay'];
         if (config.panelClass) {
             panelClasses.push(...config.panelClass);
@@ -411,7 +592,9 @@ class AXPopupService {
             backdrop: {
                 enabled: config.hasBackdrop ?? true,
                 background: true,
+                // Dispose is handled via onDispose so close goes through onClose.
                 closeOnClick: config.closeOnBackdropClick ?? false,
+                backdropClass: config.backdropClass,
             },
             panelClass: panelClasses,
             inputs: {
@@ -420,28 +603,33 @@ class AXPopupService {
                 __popupRef__: returnRef,
                 __id__: randomId,
             },
+            onDispose: () => {
+                // Backdrop click (or external dispose) — complete close pipeline if still open.
+                const entry = this.popupList.get(randomId);
+                if (!entry)
+                    return;
+                this.popupList.delete(randomId);
+                entry.popup.onClose.next(undefined);
+                entry.popup.onClose.complete();
+            },
         });
         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;
+        this.popupList.delete(id);
         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;
@@ -454,8 +642,6 @@ class AXPopupService {
     }
     /**
      * 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;
@@ -466,9 +652,33 @@ class AXPopupService {
             componentInstance.setTitle(title);
         }
     }
+    minimize(id) {
+        const instance = this.getPopupInstance(id);
+        instance?.minimize();
+    }
+    maximize(id) {
+        const instance = this.getPopupInstance(id);
+        instance?.maximize();
+    }
+    restore(id) {
+        const instance = this.getPopupInstance(id);
+        instance?.restore();
+    }
+    /**
+     * Gets the index of a popup in the open stack (used for minimized bar positioning).
+     */
+    getMapIndexOf(targetKey) {
+        let index = 0;
+        for (const key of this.popupList.keys()) {
+            if (key === targetKey) {
+                return index;
+            }
+            index++;
+        }
+        return -1;
+    }
     /**
      * 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);
@@ -476,6 +686,15 @@ class AXPopupService {
             return;
         ref.overlay.bringToFront();
     }
+    getPopupInstance(id) {
+        const ref = this.popupList.get(id)?.overlay.instance;
+        if (!ref)
+            return null;
+        if (ref instanceof ComponentRef) {
+            return ref.instance;
+        }
+        return null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupService, providedIn: 'root' }); }
 }
@@ -486,12 +705,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
-const COMPONENT = [AXPopupComponent];
+/**
+ * Declarative popup host. Project content and call `open()` / `close()` on the component instance.
+ *
+ * @example
+ * ```html
+ * <ax-popup-host #popup>
+ *   <p>Content</p>
+ * </ax-popup-host>
+ * <ax-button (onClick)="popup.open({ title: 'Hello', header: true })"></ax-button>
+ * ```
+ */
+class AXPopupHostComponent extends NXComponent {
+    constructor() {
+        super(...arguments);
+        this.popupService = inject(AXPopupService);
+        this.template = viewChild(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+        this.ref = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ref" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Opens the projected content in a popup overlay.
+     */
+    async open(options) {
+        const template = this.template();
+        if (!template) {
+            throw new Error('AXPopupHostComponent: content template is not ready.');
+        }
+        const ref = await this.popupService.openRef(template, options);
+        this.ref.set(ref);
+        ref.onClose.subscribe(() => {
+            if (this.ref() === ref) {
+                this.ref.set(null);
+            }
+        });
+        return ref;
+    }
+    /**
+     * Closes the currently open popup hosted by this component.
+     */
+    async close(data) {
+        const current = this.ref();
+        if (!current)
+            return;
+        current.close(data);
+    }
+    /**
+     * Sets input values for the popup content component.
+     */
+    async setInputs(values) {
+        this.ref()?.setInputs(values);
+    }
+    /**
+     * Minimizes the hosted popup.
+     */
+    async minimize() {
+        this.ref()?.minimize();
+    }
+    /**
+     * Maximizes the hosted popup.
+     */
+    async maximize() {
+        this.ref()?.maximize();
+    }
+    /**
+     * Restores the hosted popup.
+     */
+    async restore() {
+        this.ref()?.restore();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupHostComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXPopupHostComponent, isStandalone: true, selector: "ax-popup-host", providers: [{ provide: AXComponent, useExisting: AXPopupHostComponent }], viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-template #contentTemplate>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-popup-host',
+                    template: `
+    <ng-template #contentTemplate>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    providers: [{ provide: AXComponent, useExisting: AXPopupHostComponent }],
+                }]
+        }], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+const COMPONENT = [AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent];
 const MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXTranslationModule];
 class AXPopupModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXPopupModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXTranslationModule, AXPopupComponent], exports: [AXPopupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, COMPONENT] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXPopupModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXTranslationModule, AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent], exports: [AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, AXPopupComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
@@ -506,5 +816,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPopupComponent, AXPopupComponentBase, AXPopupModule, AXPopupService };
+export { AXPopupComponent, AXPopupComponentBase, AXPopupFooterComponent, AXPopupHostComponent, AXPopupModule, AXPopupService, resolvePopupCloseButton, resolvePopupMaximizable, resolvePopupMinimize };
 //# sourceMappingURL=acorex-components-popup.mjs.map