@acorex/components 22.1.0-next.31 → 22.1.0-next.33

package/fesm2022/acorex-components-popup.mjs

@@ -1,29 +1,39 @@
 import { AXComponent, MXBaseComponent, AXClosableComponent, AXComponentClosedPromise, NXComponent, AXCommonModule } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, Component, input, Directive, inject, NgZone, DestroyRef, viewChild, signal, TemplateRef, ViewContainerRef, HostListener, ViewChild, ComponentRef, Injectable, NgModule } from '@angular/core';
+import { ViewEncapsulation, Component, input, Directive, inject, NgZone, viewChild, signal, computed, afterNextRender, 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 { AXDragDirective, AXDragHandleDirective } from '@acorex/cdk/drag-drop';
+import { AXResizableDirective } from '@acorex/cdk/resizable';
 import { AXFocusTrapDirective } from '@acorex/cdk/focus-trap';
 import { AXButtonComponent } from '@acorex/components/button';
 import { AXDecoratorCloseButtonComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXLoadingService } from '@acorex/components/loading';
+import { AXSkeletonComponent } from '@acorex/components/skeleton';
 import { AXComponentService } from '@acorex/core/components';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { AsyncPipe, CommonModule } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 
 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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"] }]
         }] });
 
+const AX_POPUP_DEFAULT_RESIZE_HANDLES = [
+    'top',
+    'bottom',
+    'start',
+    'end',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+];
 class AXPopupComponentBase {
     constructor() {
         this.__popup__ = input(/* @ts-ignore */
@@ -47,10 +57,10 @@ class AXPopupComponentBase {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupComponentBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", 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`. */
@@ -74,6 +84,37 @@ function resolvePopupMinimize(config) {
         position: config?.buttons?.minimize?.position ?? 'bottom-right',
     };
 }
+/** Resolves resize config. Disabled for `size: 'full'` and when `resizable` is false/omitted. */
+function resolvePopupResizable(config) {
+    const defaults = {
+        enable: false,
+        handles: AX_POPUP_DEFAULT_RESIZE_HANDLES,
+        minWidth: 240,
+        minHeight: 160,
+        maxWidth: null,
+        maxHeight: null,
+        lockAspectRatio: false,
+        dblClickAction: 'reset',
+    };
+    if (!config || config.size === 'full') {
+        return defaults;
+    }
+    const raw = config.resizable;
+    if (!raw) {
+        return defaults;
+    }
+    const options = raw === true ? {} : raw;
+    return {
+        enable: true,
+        handles: options.handles ?? AX_POPUP_DEFAULT_RESIZE_HANDLES,
+        minWidth: options.minWidth ?? defaults.minWidth,
+        minHeight: options.minHeight ?? defaults.minHeight,
+        maxWidth: options.maxWidth ?? null,
+        maxHeight: options.maxHeight ?? null,
+        lockAspectRatio: options.lockAspectRatio ?? false,
+        dblClickAction: options.dblClickAction ?? 'reset',
+    };
+}
 
 /**
  * The Popup is a component which displays content in a dialog overlay
@@ -82,13 +123,12 @@ function resolvePopupMinimize(config) {
  */
 class AXPopupComponent extends MXBaseComponent {
     constructor() {
-        super(...arguments);
+        super();
         this._zone = inject(NgZone);
         this.loadingService = inject(AXLoadingService);
         this._platform = inject(AXPlatform);
         this.componentService = inject(AXComponentService);
-        this._router = inject(Router, { optional: true });
-        this._destroyRef = inject(DestroyRef);
+        this.document = inject(DOCUMENT);
         this.popupEl = viewChild('popupEl', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupEl" }] : /* istanbul ignore next */ []));
         // Inputs from overlay service
@@ -106,20 +146,53 @@ class AXPopupComponent extends MXBaseComponent {
          */
         this.isLoading = true;
         /** @ignore */
+        this._delayTimer = null;
+        /** @ignore */
         this._componentRef = null;
+        this.showSkeleton = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSkeleton" }] : /* istanbul ignore next */ []));
+        this.skeletonTemplate = () => this.__config__()?.skeletonTemplate ?? null;
         /** Current title */
         this.title = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this.isDragging = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this.dragOffset = signal({ x: 0, y: 0 }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dragOffset" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this.dragStartPos = { x: 0, y: 0 };
-        /** @ignore */
-        this.elementStartPos = { x: 0, y: 0 };
+        /** Clamps dragging to the viewport (`document.documentElement`). */
+        this.dragBoundary = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragBoundary" }] : /* istanbul ignore next */ []));
+        this.dragDisabled = computed(() => !this.__config__()?.draggable || this.popupSizeState() === 'minimize' || this.fullScreenState(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragDisabled" }] : /* istanbul ignore next */ []));
+        this.resizeConfig = computed(() => resolvePopupResizable(this.__config__()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeConfig" }] : /* istanbul ignore next */ []));
+        this.resizeActive = computed(() => this.resizeConfig().enable, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeActive" }] : /* istanbul ignore next */ []));
+        this.resizeEnabled = computed(() => this.resizeConfig().enable && this.popupSizeState() !== 'minimize' && !this.fullScreenState(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeEnabled" }] : /* istanbul ignore next */ []));
+        this.viewportSize = signal({ width: 0, height: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
+        this.resizeMaxWidth = computed(() => {
+            const max = this.resizeConfig().maxWidth;
+            if (max != null) {
+                return max;
+            }
+            const viewport = this.viewportSize().width;
+            return viewport > 0 ? viewport : Infinity;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeMaxWidth" }] : /* istanbul ignore next */ []));
+        this.resizeMaxHeight = computed(() => {
+            const max = this.resizeConfig().maxHeight;
+            if (max != null) {
+                return max;
+            }
+            const viewport = this.viewportSize().height;
+            return viewport > 0 ? viewport : Infinity;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeMaxHeight" }] : /* istanbul ignore next */ []));
+        this.viewportResizeHandler = () => {
+            const win = this.document.defaultView;
+            if (!win) {
+                return;
+            }
+            this.viewportSize.set({ width: win.innerWidth, height: win.innerHeight });
+        };
         this.popupSizeState = signal('normal', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupSizeState" }] : /* istanbul ignore next */ []));
         this.fullScreenState = signal(false, /* @ts-ignore */
@@ -137,6 +210,12 @@ class AXPopupComponent extends MXBaseComponent {
         this.closeEnabled = () => resolvePopupCloseButton(this.__config__());
         this.maximizeEnabled = () => resolvePopupMaximizable(this.__config__());
         this.minimizeEnabled = () => resolvePopupMinimize(this.__config__()).enable;
+        afterNextRender(() => {
+            this.dragBoundary.set(this.document.documentElement);
+            this.viewportResizeHandler();
+            const win = this.document.defaultView;
+            win?.addEventListener('resize', this.viewportResizeHandler);
+        });
     }
     /** @ignore */
     ngOnInit() {
@@ -145,39 +224,39 @@ class AXPopupComponent extends MXBaseComponent {
         if (this._platform.is('SM')) {
             if (config) {
                 config.draggable = false;
+                config.resizable = false;
             }
         }
         this.title.set(config?.title ?? '');
-        this._loadingId = this.loadingService.show({
-            location: this.getHostElement(),
-        });
-        this._setupCloseOnNavigation();
         document.addEventListener('fullscreenchange', this.fullscreenChangeHandler);
-        this.renderContent();
-    }
-    /**
-     * Subscribes to router navigation events so the popup is closed automatically
-     * when the user navigates to another route. Enabled by default; disable via
-     * `closeOnNavigation: false` in the popup config.
-     * @ignore
-     */
-    _setupCloseOnNavigation() {
-        if (!this._router)
-            return;
-        if (this.__config__()?.closeOnNavigation === false)
-            return;
-        this._router.events
-            .pipe(filter((event) => event instanceof NavigationStart), takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
-            this.close();
-        });
+        const delay = config?.delay ?? 0;
+        if (delay > 0) {
+            this.showSkeleton.set(true);
+            this.cdr.markForCheck();
+            this._delayTimer = setTimeout(() => {
+                this._zone.run(() => {
+                    this._delayTimer = null;
+                    this.showSkeleton.set(false);
+                    void this.renderContent();
+                    this.cdr.markForCheck();
+                });
+            }, delay);
+        }
+        else {
+            this._loadingId = this.loadingService.show({
+                location: this.getHostElement(),
+            });
+            this.renderContent();
+        }
     }
     /** @ignore */
     async renderContent() {
         const content = this.__content__();
         const config = this.__config__();
         if (!content) {
-            this.loadingService.hide(this._loadingId);
+            if (this._loadingId !== undefined) {
+                this.loadingService.hide(this._loadingId);
+            }
             return;
         }
         if (content instanceof TemplateRef) {
@@ -253,7 +332,9 @@ class AXPopupComponent extends MXBaseComponent {
                 this.focus();
             });
         });
-        this.loadingService.hide(this._loadingId);
+        if (this._loadingId !== undefined) {
+            this.loadingService.hide(this._loadingId);
+        }
         this.cdr.markForCheck();
     }
     /** @ignore */
@@ -274,11 +355,18 @@ class AXPopupComponent extends MXBaseComponent {
     }
     /** @ignore */
     ngOnDestroy() {
+        if (this._delayTimer !== null) {
+            clearTimeout(this._delayTimer);
+            this._delayTimer = null;
+        }
         document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler);
+        this.document.defaultView?.removeEventListener('resize', this.viewportResizeHandler);
         if (this.fullScreenState() && document.fullscreenElement) {
             document.exitFullscreen().catch(() => undefined);
         }
-        this.loadingService.hide(this._loadingId);
+        if (this._loadingId !== undefined) {
+            this.loadingService.hide(this._loadingId);
+        }
         if (this._componentRef) {
             this._componentRef.destroy();
             this._componentRef = null;
@@ -336,6 +424,10 @@ class AXPopupComponent extends MXBaseComponent {
         this.popupSizeState.set('minimize');
         this.cdr.markForCheck();
         requestAnimationFrame(() => {
+            if (this.resizeActive()) {
+                el.style.height = '';
+                el.style.width = '';
+            }
             const width = el.offsetWidth;
             const index = this.__popupRef__()?._getStackIndex?.() ?? 0;
             const position = resolvePopupMinimize(this.__config__()).position;
@@ -401,42 +493,13 @@ class AXPopupComponent extends MXBaseComponent {
         this.title.set(title);
         this.cdr.markForCheck();
     }
-    // Drag functionality
-    onDragStart(event) {
-        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');
-        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: "22.0.8", ngImport: i0, type: AXPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", 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()" }, styleAttribute: "display: block; max-width: 100%;", classAttribute: "ax-popup-host" }, providers: [
             { provide: AXClosableComponent, useExisting: AXPopupComponent },
             { provide: AXComponent, useExisting: AXPopupComponent },
-        ], 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{--ax-comp-popup-shadow-rest: var(--ax-sys-effect-modal);--ax-comp-popup-highlight-rest: var(--ax-sys-highlight-surface);--ax-comp-popup-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-popup-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-popup-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-popup-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-popup-background-image-rest: var(--ax-sys-gradient-surface);--ax-comp-popup-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);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));box-shadow:var(--ax-comp-popup-contrast-inner-border-rest),var(--ax-comp-popup-inner-border-rest),var(--ax-comp-popup-highlight-rest),var(--ax-comp-popup-shadow-rest);background-image:linear-gradient(var(--ax-comp-popup-contrast-surface-overlay-rest),var(--ax-comp-popup-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-popup-surface-overlay-rest),var(--ax-comp-popup-surface-overlay-rest)),var(--ax-comp-popup-background-image-rest);backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);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);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 }); }
+        ], viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true, isSignal: true }, { propertyName: "contentContainerRef", first: true, predicate: ["contentOutlet"], 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    axDrag\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [dragDisabled]=\"dragDisabled()\"\n    [dragBoundary]=\"dragBoundary()\"\n    [dragResetOnDblClick]=\"false\"\n    [axResizable]=\"resizeEnabled()\"\n    [handles]=\"resizeConfig().handles\"\n    [minWidth]=\"resizeConfig().minWidth\"\n    [minHeight]=\"resizeConfig().minHeight\"\n    [maxWidth]=\"resizeMaxWidth()\"\n    [maxHeight]=\"resizeMaxHeight()\"\n    [lockAspectRatio]=\"resizeConfig().lockAspectRatio\"\n    [dblClickAction]=\"resizeConfig().dblClickAction\"\n    [class.ax-popup-resizable]=\"resizeActive()\"\n    [class.ax-popup-minimized]=\"popupSizeState() === 'minimize'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.position]=\"popupSizeState() === 'minimize' ? 'fixed' : null\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : null\"\n    [style.bottom]=\"popupSizeState() === 'minimize' ? '0' : null\"\n  >\n    <div class=\"ax-popup-header-container\">\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\" axDragHandle>\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n\n          <div class=\"ax-popup-header-actions\" (pointerdown)=\"$event.stopPropagation()\">\n            @if (minimizeEnabled() && popupSizeState() !== 'minimize') {\n              <ax-button class=\"ax-xs\" 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-xs\" 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-xs\" 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 class=\"ax-xs\" tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\" #contentContainer>\n        @if (showSkeleton()) {\n          <div class=\"ax-popup-skeleton-container\" #skeletonEl>\n            @if (skeletonTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"skeletonTemplate()\"></ng-container>\n            } @else {\n              <div class=\"ax-popup-skeleton-default\">\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-title\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line ax-popup-skeleton-bar-line-short\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        }\n\n        <ng-container #contentOutlet />\n      </div>\n\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);flex-direction:column;align-items:center;justify-content:center;width:100%!important;height:100%!important;max-width:none!important;overflow:visible!important;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.ax-dragging{-webkit-user-select:none;user-select:none}.ax-popup.ax-popup-minimized,.ax-popup.ax-popup-fullscreen{translate:none!important}.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{--ax-comp-popup-shadow-rest: var(--ax-sys-effect-modal);--ax-comp-popup-highlight-rest: var(--ax-sys-highlight-surface);--ax-comp-popup-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-popup-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-popup-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-popup-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-popup-background-image-rest: var(--ax-sys-gradient-surface);--ax-comp-popup-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);position:relative;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));box-shadow:var(--ax-comp-popup-contrast-inner-border-rest),var(--ax-comp-popup-inner-border-rest),var(--ax-comp-popup-highlight-rest),var(--ax-comp-popup-shadow-rest);background-image:linear-gradient(var(--ax-comp-popup-contrast-surface-overlay-rest),var(--ax-comp-popup-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-popup-surface-overlay-rest),var(--ax-comp-popup-surface-overlay-rest)),var(--ax-comp-popup-background-image-rest);backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);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);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-skeleton-container{overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar{display:block;border-radius:var(--radius-md, .375rem)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-title{height:calc(var(--spacing, .25rem) * 5);width:40%}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-line{height:calc(var(--spacing, .25rem) * 3.5);width:100%}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-line-short{width:80%}.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:not(.ax-popup-resizable){width:18vw!important;max-width:100vw}.ax-popup.ax-popup-sm:not(.ax-popup-resizable){width:25vw!important;max-width:100vw}.ax-popup.ax-popup-md:not(.ax-popup-resizable){width:40vw!important;max-width:100vw}.ax-popup.ax-popup-lg:not(.ax-popup-resizable){width:65vw!important;max-width:100vw}.ax-popup.ax-popup-xl:not(.ax-popup-resizable){width:75vw!important;max-width:100vw}.ax-popup.ax-popup-2xl:not(.ax-popup-resizable){width:85vw!important;max-width:100vw}.ax-popup.ax-popup-resizable{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));--ax-comp-resizable-corner-size: 12px}.ax-popup.ax-popup-resizable.ax-popup-xs{width:18vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-sm{width:25vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-md{width:40vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-lg{width:65vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-xl{width:75vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-2xl{width:85vw;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;height:auto!important;min-height:0}.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-header-container .ax-popup-header .ax-popup-title{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(min-width:48rem){.ax-popup.ax-popup-minimized .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}}@media(min-width:48rem){.ax-popup.ax-popup-minimized .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable){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-resizable):not(.ax-popup-full) .ax-popup-body-container>ng-component>div{width:100%}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable).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", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]", inputs: ["axFocusTrapArrowNavigation"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "handles", "minWidth", "maxWidth", "minHeight", "maxHeight", "dblClickAction", "width", "defaultWidth", "height", "defaultHeight", "lockAspectRatio"], outputs: ["axResizableChange", "handlesChange", "minWidthChange", "maxWidthChange", "minHeightChange", "maxHeightChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "heightChange", "defaultHeightChange", "lockAspectRatioChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-popup', encapsulation: ViewEncapsulation.None, host: {
                         class: 'ax-popup-host',
@@ -449,24 +512,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXDecoratorIconComponent,
                         AXButtonComponent,
                         AsyncPipe,
+                        NgTemplateOutlet,
                         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{--ax-comp-popup-shadow-rest: var(--ax-sys-effect-modal);--ax-comp-popup-highlight-rest: var(--ax-sys-highlight-surface);--ax-comp-popup-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-popup-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-popup-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-popup-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-popup-background-image-rest: var(--ax-sys-gradient-surface);--ax-comp-popup-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);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));box-shadow:var(--ax-comp-popup-contrast-inner-border-rest),var(--ax-comp-popup-inner-border-rest),var(--ax-comp-popup-highlight-rest),var(--ax-comp-popup-shadow-rest);background-image:linear-gradient(var(--ax-comp-popup-contrast-surface-overlay-rest),var(--ax-comp-popup-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-popup-surface-overlay-rest),var(--ax-comp-popup-surface-overlay-rest)),var(--ax-comp-popup-background-image-rest);backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);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);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: [{
+                        AXSkeletonComponent,
+                        AXDragDirective,
+                        AXDragHandleDirective,
+                        AXResizableDirective,
+                    ], 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    axDrag\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [dragDisabled]=\"dragDisabled()\"\n    [dragBoundary]=\"dragBoundary()\"\n    [dragResetOnDblClick]=\"false\"\n    [axResizable]=\"resizeEnabled()\"\n    [handles]=\"resizeConfig().handles\"\n    [minWidth]=\"resizeConfig().minWidth\"\n    [minHeight]=\"resizeConfig().minHeight\"\n    [maxWidth]=\"resizeMaxWidth()\"\n    [maxHeight]=\"resizeMaxHeight()\"\n    [lockAspectRatio]=\"resizeConfig().lockAspectRatio\"\n    [dblClickAction]=\"resizeConfig().dblClickAction\"\n    [class.ax-popup-resizable]=\"resizeActive()\"\n    [class.ax-popup-minimized]=\"popupSizeState() === 'minimize'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.position]=\"popupSizeState() === 'minimize' ? 'fixed' : null\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : null\"\n    [style.bottom]=\"popupSizeState() === 'minimize' ? '0' : null\"\n  >\n    <div class=\"ax-popup-header-container\">\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\" axDragHandle>\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n\n          <div class=\"ax-popup-header-actions\" (pointerdown)=\"$event.stopPropagation()\">\n            @if (minimizeEnabled() && popupSizeState() !== 'minimize') {\n              <ax-button class=\"ax-xs\" 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-xs\" 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-xs\" 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 class=\"ax-xs\" tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\" #contentContainer>\n        @if (showSkeleton()) {\n          <div class=\"ax-popup-skeleton-container\" #skeletonEl>\n            @if (skeletonTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"skeletonTemplate()\"></ng-container>\n            } @else {\n              <div class=\"ax-popup-skeleton-default\">\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-title\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line ax-popup-skeleton-bar-line-short\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        }\n\n        <ng-container #contentOutlet />\n      </div>\n\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);flex-direction:column;align-items:center;justify-content:center;width:100%!important;height:100%!important;max-width:none!important;overflow:visible!important;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.ax-dragging{-webkit-user-select:none;user-select:none}.ax-popup.ax-popup-minimized,.ax-popup.ax-popup-fullscreen{translate:none!important}.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{--ax-comp-popup-shadow-rest: var(--ax-sys-effect-modal);--ax-comp-popup-highlight-rest: var(--ax-sys-highlight-surface);--ax-comp-popup-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-popup-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-popup-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-popup-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-popup-background-image-rest: var(--ax-sys-gradient-surface);--ax-comp-popup-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);position:relative;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));box-shadow:var(--ax-comp-popup-contrast-inner-border-rest),var(--ax-comp-popup-inner-border-rest),var(--ax-comp-popup-highlight-rest),var(--ax-comp-popup-shadow-rest);background-image:linear-gradient(var(--ax-comp-popup-contrast-surface-overlay-rest),var(--ax-comp-popup-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-popup-surface-overlay-rest),var(--ax-comp-popup-surface-overlay-rest)),var(--ax-comp-popup-background-image-rest);backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);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);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-skeleton-container{overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar{display:block;border-radius:var(--radius-md, .375rem)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-title{height:calc(var(--spacing, .25rem) * 5);width:40%}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-line{height:calc(var(--spacing, .25rem) * 3.5);width:100%}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-line-short{width:80%}.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:not(.ax-popup-resizable){width:18vw!important;max-width:100vw}.ax-popup.ax-popup-sm:not(.ax-popup-resizable){width:25vw!important;max-width:100vw}.ax-popup.ax-popup-md:not(.ax-popup-resizable){width:40vw!important;max-width:100vw}.ax-popup.ax-popup-lg:not(.ax-popup-resizable){width:65vw!important;max-width:100vw}.ax-popup.ax-popup-xl:not(.ax-popup-resizable){width:75vw!important;max-width:100vw}.ax-popup.ax-popup-2xl:not(.ax-popup-resizable){width:85vw!important;max-width:100vw}.ax-popup.ax-popup-resizable{max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));--ax-comp-resizable-corner-size: 12px}.ax-popup.ax-popup-resizable.ax-popup-xs{width:18vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-sm{width:25vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-md{width:40vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-lg{width:65vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-xl{width:75vw;max-width:100vw}.ax-popup.ax-popup-resizable.ax-popup-2xl{width:85vw;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;height:auto!important;min-height:0}.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-header-container .ax-popup-header .ax-popup-title{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(min-width:48rem){.ax-popup.ax-popup-minimized .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}}@media(min-width:48rem){.ax-popup.ax-popup-minimized .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable){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-resizable):not(.ax-popup-full) .ax-popup-body-container>ng-component>div{width:100%}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable).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"] }]
+        }], ctorParameters: () => [], propDecorators: { contentContainerRef: [{
                 type: ViewChild,
-                args: ['contentContainer', { read: ViewContainerRef, static: true }]
+                args: ['contentOutlet', { read: ViewContainerRef, static: true }]
             }], contentContainerEl: [{
                 type: ViewChild,
                 args: ['contentContainer', { static: true }]
             }], 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: [{
-                type: HostListener,
-                args: ['document:mousemove', ['$event']]
-            }], onDragEnd: [{
-                type: HostListener,
-                args: ['document:mouseup']
             }] } });
 
 /**
@@ -516,7 +578,6 @@ class AXPopupService {
             closeOnBackdropClick: false,
             data: {},
             closeOnNavigation: true,
-            panelClass: ['animate-fadeIn', 'animate-fast'],
             buttons: {
                 close: true,
                 maximize: false,
@@ -585,12 +646,13 @@ class AXPopupService {
             };
         }
         const panelClasses = ['ax-popup-overlay'];
-        if (config.panelClass) {
+        if (config.panelClass?.length) {
             panelClasses.push(...config.panelClass);
         }
         const ref = await this.overlayService.create(AXPopupComponent, {
             contextElement: config.contextElement,
             visualContextScope: 'theme',
+            closeOnNavigation: config.closeOnNavigation,
             backdrop: {
                 enabled: config.hasBackdrop ?? true,
                 background: true,
@@ -599,6 +661,7 @@ class AXPopupService {
                 backdropClass: config.backdropClass,
             },
             panelClass: panelClasses,
+            animation: config.animation ?? true,
             inputs: {
                 __content__: content,
                 __config__: config,
@@ -697,10 +760,10 @@ class AXPopupService {
         }
         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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -777,14 +840,14 @@ class AXPopupHostComponent extends NXComponent {
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupHostComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-popup-host',
@@ -801,11 +864,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 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, 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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", 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.1.6", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, AXPopupComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPopupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],
@@ -818,5 +881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPopupComponent, AXPopupComponentBase, AXPopupFooterComponent, AXPopupHostComponent, AXPopupModule, AXPopupService, resolvePopupCloseButton, resolvePopupMaximizable, resolvePopupMinimize };
+export { AXPopupComponent, AXPopupComponentBase, AXPopupFooterComponent, AXPopupHostComponent, AXPopupModule, AXPopupService, AX_POPUP_DEFAULT_RESIZE_HANDLES, resolvePopupCloseButton, resolvePopupMaximizable, resolvePopupMinimize, resolvePopupResizable };
 //# sourceMappingURL=acorex-components-popup.mjs.map