@acorex/components 22.1.8 → 22.2.0-next.0

package/fesm2022/acorex-components-popup.mjs

@@ -1,33 +1,97 @@
-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 { input, ChangeDetectionStrategy, Component, computed, Directive, inject, NgZone, viewChild, viewChildren, effect, signal, afterNextRender, TemplateRef, ViewContainerRef, HostListener, ViewChild, ViewEncapsulation, Injector, runInInjectionContext, ComponentRef, Injectable, ElementRef, afterRenderEffect, contentChild, NgModule } from '@angular/core';
+import { MXBaseComponent, AXClosableComponent, AXComponent, AXComponentClosedPromise, NXComponent, AXCommonModule } from '@acorex/cdk/common';
+import { AXDragHandleDirective, AXDragDirective, moveItemInArray, AX_DRAG_PARENT, AXDropListDirective } from '@acorex/cdk/drag-drop';
+import { AXChromeButtonComponent, AXDecoratorCloseButtonComponent, AXButtonModule } from '@acorex/components/button';
+import { DOCUMENT, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 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 { 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 { AXComponentService } from '@acorex/core/components';
+import { AXSkeletonComponent } from '@acorex/components/skeleton';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { AsyncPipe, CommonModule } from '@angular/common';
+import { AXDecoratorModule } from '@acorex/components/decorators';
 
-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 }); }
+/**
+ * Windows-style window caption glyphs: minimize, maximize, restore, close.
+ */
+class AXPopupCaptionIconComponent {
+    constructor() {
+        this.name = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupCaptionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXPopupCaptionIconComponent, isStandalone: true, selector: "ax-popup-caption-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-name": "name()" }, classAttribute: "ax-popup-caption-icon" }, ngImport: i0, template: `
+    <svg viewBox="0 0 10 10" focusable="false">
+      @switch (name()) {
+        @case ('minimize') {
+          <path d="M1.6 5h6.8" />
+        }
+        @case ('maximize') {
+          <rect x="1.4" y="1.4" width="7.2" height="7.2" rx="1" />
+        }
+        @case ('restore') {
+          <path d="M3.15 2.85V1.4h5.45v5.45H7.15" />
+          <rect x="1.4" y="3.15" width="5.45" height="5.45" rx="0.7" />
+        }
+        @case ('close') {
+          <path d="M2.05 2.05l5.9 5.9M7.95 2.05l-5.9 5.9" />
+        }
+      }
+    </svg>
+  `, isInline: true, styles: [":host{display:inline-flex;width:12px;height:12px}svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:square;stroke-linejoin:miter}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-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: AXPopupCaptionIconComponent, 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"] }]
-        }] });
+            args: [{ selector: 'ax-popup-caption-icon', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ax-popup-caption-icon',
+                        '[attr.data-name]': 'name()',
+                        'aria-hidden': 'true',
+                    }, template: `
+    <svg viewBox="0 0 10 10" focusable="false">
+      @switch (name()) {
+        @case ('minimize') {
+          <path d="M1.6 5h6.8" />
+        }
+        @case ('maximize') {
+          <rect x="1.4" y="1.4" width="7.2" height="7.2" rx="1" />
+        }
+        @case ('restore') {
+          <path d="M3.15 2.85V1.4h5.45v5.45H7.15" />
+          <rect x="1.4" y="3.15" width="5.45" height="5.45" rx="0.7" />
+        }
+        @case ('close') {
+          <path d="M2.05 2.05l5.9 5.9M7.95 2.05l-5.9 5.9" />
+        }
+      }
+    </svg>
+  `, styles: [":host{display:inline-flex;width:12px;height:12px}svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:square;stroke-linejoin:miter}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
 
+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 */
         ...(ngDevMode ? [undefined, { debugName: "__popup__" }] : /* istanbul ignore next */ []));
+        this.popupState = computed(() => this.__popup__()?.state() ?? 'normal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupState" }] : /* istanbul ignore next */ []));
+        this.isMinimized = computed(() => this.__popup__()?.isMinimized() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMinimized" }] : /* istanbul ignore next */ []));
+        this.isMaximized = computed(() => this.__popup__()?.isMaximized() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMaximized" }] : /* istanbul ignore next */ []));
+        this.popupTitle = computed(() => this.__popup__()?.title() ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupTitle" }] : /* istanbul ignore next */ []));
     }
     close(data = null) {
         this.__popup__()?.close(data);
@@ -47,10 +111,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`. */
@@ -72,6 +136,38 @@ function resolvePopupMinimize(config) {
     return {
         enable: config?.buttons?.minimize?.enable ?? false,
         position: config?.buttons?.minimize?.position ?? 'bottom-right',
+        dock: config?.buttons?.minimize?.dock ?? 'default',
+    };
+}
+/** 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',
     };
 }
 
@@ -81,16 +177,28 @@ function resolvePopupMinimize(config) {
  * @category Components
  */
 class AXPopupComponent extends MXBaseComponent {
+    #syncDragHandles;
     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 */ []));
+        this.projectedHandles = viewChildren(AXDragHandleDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "projectedHandles" }] : /* istanbul ignore next */ []));
+        this.#syncDragHandles = effect(() => {
+            const handles = this.projectedHandles();
+            const drag = this.dragDir;
+            if (!drag) {
+                return;
+            }
+            for (const handle of handles) {
+                drag.registerHandle(handle);
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#syncDragHandles" }] : /* istanbul ignore next */ []));
         // Inputs from overlay service
         this.__content__ = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "__content__" }] : /* istanbul ignore next */ []));
@@ -106,20 +214,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 */
@@ -128,15 +269,26 @@ class AXPopupComponent extends MXBaseComponent {
         ...(ngDevMode ? [{ debugName: "minimizeLeft" }] : /* istanbul ignore next */ []));
         this.minimizeRight = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minimizeRight" }] : /* istanbul ignore next */ []));
+        this.minimizeSide = computed(() => resolvePopupMinimize(this.__config__()).position, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minimizeSide" }] : /* istanbul ignore next */ []));
         this.fullscreenChangeHandler = () => {
-            if (!document.fullscreenElement) {
-                this.fullScreenState.set(false);
-                this.cdr.markForCheck();
+            const isFullscreen = !!document.fullscreenElement;
+            this.fullScreenState.set(isFullscreen);
+            if (this.__popupRef__()?.state() !== 'minimized') {
+                this.__popupRef__()?._setState?.(isFullscreen ? 'maximized' : 'normal');
             }
+            this.cdr.markForCheck();
         };
         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);
+            this.bindContentDragHandles();
+        });
     }
     /** @ignore */
     ngOnInit() {
@@ -145,39 +297,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) {
@@ -193,7 +345,7 @@ class AXPopupComponent extends MXBaseComponent {
             this.handleContentRendered();
         }
         else if (typeof content === 'function') {
-            const componentRef = this.componentService.createFromComponent(content);
+            const componentRef = this.contentContainerRef.createComponent(content);
             this._componentRef = componentRef;
             const popupRef = this.__popupRef__();
             if (popupRef) {
@@ -216,8 +368,6 @@ class AXPopupComponent extends MXBaseComponent {
             if (inputDefs && '__popup__' in inputDefs) {
                 componentRef.setInput('__popup__', this.__popupRef__());
             }
-            const hostElement = componentRef.location.nativeElement;
-            this.contentContainerEl.nativeElement.appendChild(hostElement);
             const instance = componentRef.instance;
             if (instance.onClosed) {
                 instance.onClosed.subscribe((e) => {
@@ -235,6 +385,7 @@ class AXPopupComponent extends MXBaseComponent {
                 const content = body?.children[0];
                 if (!content || !body) {
                     this.focus();
+                    this.bindContentDragHandles();
                     return;
                 }
                 const popHeader = this.getHostElement().querySelector('.ax-popup-header-container');
@@ -251,11 +402,26 @@ class AXPopupComponent extends MXBaseComponent {
                     popHeader.append(header);
                 }
                 this.focus();
+                this.bindContentDragHandles();
             });
         });
-        this.loadingService.hide(this._loadingId);
+        if (this._loadingId !== undefined) {
+            this.loadingService.hide(this._loadingId);
+        }
         this.cdr.markForCheck();
     }
+    bindContentDragHandles() {
+        const drag = this.dragDir;
+        const root = this.getHostElement();
+        if (!drag || !root) {
+            return;
+        }
+        this._zone.run(() => {
+            root.querySelectorAll('[axDragHandle]').forEach((element) => {
+                drag.registerHandle(element);
+            });
+        });
+    }
     /** @ignore */
     onKeydownHandler() {
         const config = this.__config__();
@@ -274,11 +440,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;
@@ -322,66 +495,114 @@ class AXPopupComponent extends MXBaseComponent {
         }
     }
     /**
-     * Minimizes the popup to the bottom bar.
+     * Minimizes the popup. Routes through the popup ref so a registered dock can host the tab.
      */
     minimize() {
+        this.__popupRef__()?.minimize();
+    }
+    /**
+     * Maximizes the popup using the Fullscreen API.
+     */
+    maximize() {
+        this.__popupRef__()?.maximize();
+    }
+    /**
+     * Restores the popup from minimized or fullscreen state.
+     */
+    restore() {
+        this.__popupRef__()?.restore();
+    }
+    /**
+     * Applies the minimized visual. When `docked` is true the overlay is hidden by the service
+     * and the window stays at normal size for the next restore.
+     * @internal
+     */
+    enterMinimized(docked) {
         if (this.fullScreenState() && document.fullscreenElement) {
             document.exitFullscreen().catch(() => undefined);
         }
+        if (docked) {
+            this.minimizeLeft.set(null);
+            this.minimizeRight.set(null);
+            this.popupSizeState.set('normal');
+            this.cdr.markForCheck();
+            return;
+        }
         const el = this.popupEl()?.nativeElement;
         if (!el)
             return;
-        this.minimizeLeft.set(null);
-        this.minimizeRight.set(null);
+        const position = resolvePopupMinimize(this.__config__()).position;
         this.popupSizeState.set('minimize');
+        if (position === 'bottom-right') {
+            this.minimizeLeft.set(null);
+            this.minimizeRight.set('0px');
+        }
+        else {
+            this.minimizeRight.set(null);
+            this.minimizeLeft.set('0px');
+        }
         this.cdr.markForCheck();
         requestAnimationFrame(() => {
+            if (this.popupSizeState() !== 'minimize') {
+                return;
+            }
+            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;
+            const offset = `${index * (width + 10)}px`;
             if (position === 'bottom-right') {
                 this.minimizeLeft.set(null);
-                this.minimizeRight.set(`${index * (width + 10)}px`);
+                this.minimizeRight.set(offset);
             }
             else {
                 this.minimizeRight.set(null);
-                this.minimizeLeft.set(`${index * (width + 10)}px`);
+                this.minimizeLeft.set(offset);
             }
             this.cdr.markForCheck();
         });
     }
     /**
-     * Maximizes the popup using the Fullscreen API.
+     * Restores the window from the legacy bottom bar.
+     * @internal
      */
-    maximize() {
+    exitMinimized() {
+        this.minimizeLeft.set(null);
+        this.minimizeRight.set(null);
+        this.popupSizeState.set('normal');
+        this.cdr.markForCheck();
+    }
+    /**
+     * Enters or toggles the Fullscreen API on the popup element.
+     * @internal
+     */
+    enterMaximized() {
         const el = this.popupEl()?.nativeElement;
         if (!el)
             return;
-        if (this.popupSizeState() === 'minimize') {
-            this.restore();
-        }
         if (!document.fullscreenElement) {
-            el.requestFullscreen().then(() => {
+            el.requestFullscreen()
+                .then(() => {
                 this.fullScreenState.set(true);
+                this.__popupRef__()?._setState?.('maximized');
                 this.cdr.markForCheck();
-            });
+            })
+                .catch(() => undefined);
         }
         else {
             document.exitFullscreen().catch(() => undefined);
         }
     }
     /**
-     * Restores the popup from minimized or fullscreen state.
+     * Leaves fullscreen.
+     * @internal
      */
-    restore() {
+    exitMaximized() {
         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.
@@ -401,42 +622,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", "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: "projectedHandles", predicate: AXDragHandleDirective, 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 }, { propertyName: "dragDir", first: true, predicate: ["popupEl"], descendants: true, read: AXDragDirective, 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-minimized-end]=\"popupSizeState() === 'minimize' && minimizeSide() === 'bottom-right'\"\n    [class.ax-popup-minimized-start]=\"popupSizeState() === 'minimize' && minimizeSide() === 'bottom-left'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : 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-chrome-button class=\"ax-sm\" title=\"Minimize\" (click)=\"minimize()\">\n                <ax-popup-caption-icon name=\"minimize\" />\n              </ax-chrome-button>\n            }\n\n            @if (popupSizeState() === 'minimize' || fullScreenState()) {\n              <ax-chrome-button class=\"ax-sm\" title=\"Restore\" (click)=\"restore()\">\n                <ax-popup-caption-icon name=\"restore\" />\n              </ax-chrome-button>\n            } @else if (maximizeEnabled()) {\n              <ax-chrome-button class=\"ax-sm\" title=\"Maximize\" (click)=\"maximize()\">\n                <ax-popup-caption-icon name=\"maximize\" />\n              </ax-chrome-button>\n            }\n\n            @if (closeEnabled()) {\n              <ax-close-button class=\"ax-sm\" tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n\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-hidden,.ax-overlay-backdrop.ax-popup-overlay-hidden{display:none!important;pointer-events:none!important}.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) * 2.5)}.ax-popup-header-actions .ax-popup-caption-icon{width:.875rem;height:.875rem}.ax-popup-header-actions :is(ax-chrome-button,ax-close-button){--ax-comp-text: rgba(var(--ax-comp-popup-body-text-color))}.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}.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;border-top-left-radius:var(--radius-2xl, 1rem);border-top-right-radius:var(--radius-2xl, 1rem);border-bottom-right-radius:0!important;border-bottom-left-radius:0!important;position:fixed!important;bottom:0!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{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)}}.ax-popup.ax-popup-minimized-end{right:0}.ax-popup.ax-popup-minimized-start{left:0}@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)}}.ax-popup-header-actions :is(ax-chrome-button,ax-close-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive{min-width:1.625rem;min-height:1.625rem;padding:.25rem}.ax-popup-header-actions ax-close-button ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i{--ax-sys-icon-size: .875rem;font-size:.875rem}: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: AXPopupCaptionIconComponent, selector: "ax-popup-caption-icon", inputs: ["name"] }, { kind: "component", type: AXChromeButtonComponent, selector: "ax-chrome-button", inputs: ["title", "aria-label"] }, { 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: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { 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',
@@ -445,30 +637,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         { provide: AXClosableComponent, useExisting: AXPopupComponent },
                         { provide: AXComponent, useExisting: AXPopupComponent },
                     ], imports: [
-                        AXDecoratorCloseButtonComponent,
-                        AXDecoratorIconComponent,
-                        AXButtonComponent,
+                        AXPopupCaptionIconComponent,
+                        AXChromeButtonComponent,
                         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,
+                        AXDecoratorCloseButtonComponent
+                    ], 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-minimized-end]=\"popupSizeState() === 'minimize' && minimizeSide() === 'bottom-right'\"\n    [class.ax-popup-minimized-start]=\"popupSizeState() === 'minimize' && minimizeSide() === 'bottom-left'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : 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-chrome-button class=\"ax-sm\" title=\"Minimize\" (click)=\"minimize()\">\n                <ax-popup-caption-icon name=\"minimize\" />\n              </ax-chrome-button>\n            }\n\n            @if (popupSizeState() === 'minimize' || fullScreenState()) {\n              <ax-chrome-button class=\"ax-sm\" title=\"Restore\" (click)=\"restore()\">\n                <ax-popup-caption-icon name=\"restore\" />\n              </ax-chrome-button>\n            } @else if (maximizeEnabled()) {\n              <ax-chrome-button class=\"ax-sm\" title=\"Maximize\" (click)=\"maximize()\">\n                <ax-popup-caption-icon name=\"maximize\" />\n              </ax-chrome-button>\n            }\n\n            @if (closeEnabled()) {\n              <ax-close-button class=\"ax-sm\" tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n\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-hidden,.ax-overlay-backdrop.ax-popup-overlay-hidden{display:none!important;pointer-events:none!important}.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) * 2.5)}.ax-popup-header-actions .ax-popup-caption-icon{width:.875rem;height:.875rem}.ax-popup-header-actions :is(ax-chrome-button,ax-close-button){--ax-comp-text: rgba(var(--ax-comp-popup-body-text-color))}.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}.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;border-top-left-radius:var(--radius-2xl, 1rem);border-top-right-radius:var(--radius-2xl, 1rem);border-bottom-right-radius:0!important;border-bottom-left-radius:0!important;position:fixed!important;bottom:0!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{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)}}.ax-popup.ax-popup-minimized-end{right:0}.ax-popup.ax-popup-minimized-start{left:0}@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)}}.ax-popup-header-actions :is(ax-chrome-button,ax-close-button) ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive{min-width:1.625rem;min-height:1.625rem;padding:.25rem}.ax-popup-header-actions ax-close-button ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive i{--ax-sys-icon-size: .875rem;font-size:.875rem}: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: [{
+            }], dragDir: [{
+                type: ViewChild,
+                args: ['popupEl', { read: AXDragDirective, static: true }]
+            }], popupEl: [{ type: i0.ViewChild, args: ['popupEl', { isSignal: true }] }], projectedHandles: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXDragHandleDirective), { 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']
             }] } });
 
+const OVERLAY_HIDDEN_CLASS = 'ax-popup-overlay-hidden';
 /**
  * This is a service which you can create popup with it
  *
@@ -478,6 +673,11 @@ class AXPopupService {
     constructor() {
         this.popupList = new Map();
         this.overlayService = inject(AXOverlayService);
+        this.injector = inject(Injector);
+        this.dockCounts = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dockCounts" }] : /* istanbul ignore next */ []));
+        this.minimizedByDock = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minimizedByDock" }] : /* istanbul ignore next */ []));
     }
     /**
      *  @ignore
@@ -504,6 +704,50 @@ class AXPopupService {
     async openRef(content, config) {
         return this.openInternal(content, this.mergeConfig(config));
     }
+    hasDock(name) {
+        return (this.dockCounts()[name] ?? 0) > 0;
+    }
+    registerDock(name) {
+        this.dockCounts.update((counts) => ({
+            ...counts,
+            [name]: (counts[name] ?? 0) + 1,
+        }));
+    }
+    unregisterDock(name) {
+        const remaining = Math.max(0, (this.dockCounts()[name] ?? 0) - 1);
+        this.dockCounts.update((counts) => ({
+            ...counts,
+            [name]: remaining,
+        }));
+        if (remaining > 0) {
+            return;
+        }
+        const ids = this.minimizedByDock()[name] ?? [];
+        for (const id of [...ids]) {
+            const instance = this.getPopupInstance(id);
+            instance?.enterMinimized(false);
+            this.setOverlayVisible(id, true);
+        }
+        this.minimizedByDock.update((map) => {
+            if (!(name in map)) {
+                return map;
+            }
+            const next = { ...map };
+            delete next[name];
+            return next;
+        });
+    }
+    minimizedInDock(dock) {
+        const ids = this.minimizedByDock()[dock] ?? [];
+        return ids.map((id) => this.toDockItem(id)).filter((item) => !!item);
+    }
+    reorderMinimized(dock, fromIndex, toIndex) {
+        this.minimizedByDock.update((map) => {
+            const list = [...(map[dock] ?? [])];
+            moveItemInArray(list, fromIndex, toIndex);
+            return { ...map, [dock]: list };
+        });
+    }
     mergeConfig(arg2) {
         const config = {
             closeButton: true,
@@ -516,13 +760,13 @@ class AXPopupService {
             closeOnBackdropClick: false,
             data: {},
             closeOnNavigation: true,
-            panelClass: ['animate-fadeIn', 'animate-fast'],
             buttons: {
                 close: true,
                 maximize: false,
                 minimize: {
                     enable: false,
                     position: 'bottom-right',
+                    dock: 'default',
                 },
             },
         };
@@ -539,6 +783,7 @@ class AXPopupService {
                     minimize: {
                         enable: false,
                         position: 'bottom-right',
+                        dock: 'default',
                         ...config.buttons?.minimize,
                         ...buttons.minimize,
                     },
@@ -553,6 +798,14 @@ class AXPopupService {
     async openInternal(content, config) {
         const randomId = Math.floor(Math.random() * 100000000000);
         const onClose = new Subject();
+        const onStateChange = new Subject();
+        const state = signal('normal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        const title = signal(config.title ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        const isMinimized = runInInjectionContext(this.injector, () => computed(() => state() === 'minimized'));
+        const isMaximized = runInInjectionContext(this.injector, () => computed(() => state() === 'maximized'));
+        const dock = resolvePopupMinimize(config).dock;
         const returnRef = {
             close: (data) => {
                 this.close(randomId, data);
@@ -560,8 +813,9 @@ class AXPopupService {
             setInputs: (values) => {
                 this.setInputs(randomId, values);
             },
-            setTitle: (title) => {
-                this.setTitle(randomId, title);
+            setTitle: (value) => {
+                title.set(value);
+                this.setTitle(randomId, value);
             },
             minimize: () => {
                 this.minimize(randomId);
@@ -576,7 +830,19 @@ class AXPopupService {
                 this.bringToFront(randomId);
             },
             onClose,
+            onStateChange,
+            state: state.asReadonly(),
+            title: title.asReadonly(),
+            isMinimized,
+            isMaximized,
             _getStackIndex: () => this.getMapIndexOf(randomId),
+            _setState: (next) => {
+                if (state() === next) {
+                    return;
+                }
+                state.set(next);
+                onStateChange.next(next);
+            },
         };
         if (config._bindContentInputs) {
             config.inputs = {
@@ -585,20 +851,21 @@ 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,
-                // Dispose is handled via onDispose so close goes through onClose.
                 closeOnClick: config.closeOnBackdropClick ?? false,
                 backdropClass: config.backdropClass,
             },
             panelClass: panelClasses,
+            animation: config.animation ?? true,
             inputs: {
                 __content__: content,
                 __config__: config,
@@ -606,33 +873,35 @@ class AXPopupService {
                 __id__: randomId,
             },
             onDispose: () => {
-                // Backdrop click (or external dispose) — complete close pipeline if still open.
                 const entry = this.popupList.get(randomId);
                 if (!entry)
                     return;
+                this.removeFromDock(randomId);
                 this.popupList.delete(randomId);
                 entry.popup.onClose.next(undefined);
                 entry.popup.onClose.complete();
+                entry.popup.onStateChange.complete();
             },
         });
-        this.popupList.set(randomId, { overlay: ref, popup: returnRef });
+        this.popupList.set(randomId, {
+            overlay: ref,
+            popup: returnRef,
+            dock,
+            data: config.data,
+        });
         return returnRef;
     }
-    /**
-     * Closes a popup by its ID.
-     */
     close(id, data) {
         const ref = this.popupList.get(id);
         if (!ref)
             return;
+        this.removeFromDock(id);
         this.popupList.delete(id);
         ref.popup.onClose.next(data);
         ref.popup.onClose.complete();
+        ref.popup.onStateChange.complete();
         ref.overlay.dispose();
     }
-    /**
-     * Sets input values for a popup by its ID.
-     */
     setInputs(id, values) {
         const ref = this.popupList.get(id)?.overlay.instance;
         if (!ref)
@@ -642,9 +911,6 @@ class AXPopupService {
             componentInstance.setContentInputs(values);
         }
     }
-    /**
-     * Sets the title for a popup by its ID.
-     */
     setTitle(id, title) {
         const ref = this.popupList.get(id)?.overlay.instance;
         if (!ref)
@@ -655,20 +921,47 @@ class AXPopupService {
         }
     }
     minimize(id) {
+        const entry = this.popupList.get(id);
         const instance = this.getPopupInstance(id);
-        instance?.minimize();
+        if (!entry || !instance || entry.popup.state() === 'minimized')
+            return;
+        const docked = this.hasDock(entry.dock);
+        instance.enterMinimized(docked);
+        entry.popup._setState?.('minimized');
+        if (docked) {
+            this.addToDock(id, entry.dock);
+            this.setOverlayVisible(id, false);
+        }
     }
     maximize(id) {
+        const entry = this.popupList.get(id);
         const instance = this.getPopupInstance(id);
-        instance?.maximize();
+        if (!entry || !instance)
+            return;
+        if (entry.popup.state() === 'minimized') {
+            this.restore(id);
+        }
+        instance.enterMaximized();
     }
     restore(id) {
+        const entry = this.popupList.get(id);
         const instance = this.getPopupInstance(id);
-        instance?.restore();
+        if (!entry || !instance)
+            return;
+        const current = entry.popup.state();
+        if (current === 'normal') {
+            return;
+        }
+        if (current === 'maximized') {
+            instance.exitMaximized();
+            return;
+        }
+        instance.exitMinimized();
+        this.removeFromDock(id);
+        this.setOverlayVisible(id, true);
+        entry.popup._setState?.('normal');
+        this.bringToFront(id);
     }
-    /**
-     * 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()) {
@@ -679,15 +972,66 @@ class AXPopupService {
         }
         return -1;
     }
-    /**
-     * Brings a popup to the front of all other overlays.
-     */
     bringToFront(id) {
         const ref = this.popupList.get(id);
         if (!ref)
             return;
         ref.overlay.bringToFront();
     }
+    markMaximized(id, maximized) {
+        const entry = this.popupList.get(id);
+        if (!entry || entry.popup.state() === 'minimized') {
+            return;
+        }
+        entry.popup._setState?.(maximized ? 'maximized' : 'normal');
+    }
+    addToDock(id, dock) {
+        this.minimizedByDock.update((map) => {
+            const list = map[dock] ?? [];
+            if (list.includes(id)) {
+                return map;
+            }
+            return { ...map, [dock]: [...list, id] };
+        });
+    }
+    removeFromDock(id) {
+        this.minimizedByDock.update((map) => {
+            let changed = false;
+            const next = {};
+            for (const [dock, ids] of Object.entries(map)) {
+                const filtered = ids.filter((item) => item !== id);
+                next[dock] = filtered;
+                if (filtered.length !== ids.length) {
+                    changed = true;
+                }
+            }
+            return changed ? next : map;
+        });
+    }
+    setOverlayVisible(id, visible) {
+        const overlay = this.popupList.get(id)?.overlay;
+        if (!overlay)
+            return;
+        overlay.overlayElement?.classList.toggle(OVERLAY_HIDDEN_CLASS, !visible);
+        overlay.backdropElement?.classList.toggle(OVERLAY_HIDDEN_CLASS, !visible);
+        overlay.overlayElement?.toggleAttribute('aria-hidden', !visible);
+        overlay.backdropElement?.toggleAttribute('aria-hidden', !visible);
+    }
+    toDockItem(id) {
+        const entry = this.popupList.get(id);
+        if (!entry) {
+            return null;
+        }
+        return {
+            id,
+            title: entry.popup.title,
+            data: entry.data,
+            ref: entry.popup,
+            restore: () => entry.popup.restore(),
+            maximize: () => entry.popup.maximize(),
+            close: () => entry.popup.close(),
+        };
+    }
     getPopupInstance(id) {
         const ref = this.popupList.get(id)?.overlay.instance;
         if (!ref)
@@ -697,16 +1041,121 @@ 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',
                 }]
         }] });
 
+/**
+ * Binds `[axDragHandle]` nodes inside a dock tab (including projected templates)
+ * to the parent `axDrag` wrapper.
+ */
+class AXPopupDockItemDirective {
+    constructor() {
+        this.host = inject(ElementRef);
+        this.drag = inject(AXDragDirective);
+        this.injector = Injector.create({
+            parent: inject(Injector),
+            providers: [{ provide: AX_DRAG_PARENT, useValue: this.drag }],
+        });
+        afterRenderEffect(() => {
+            this.host.nativeElement.querySelectorAll('[axDragHandle]').forEach((element) => {
+                this.drag.registerHandle(element);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupDockItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: AXPopupDockItemDirective, isStandalone: true, selector: "[axPopupDockItem]", exportAs: ["axPopupDockItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupDockItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axPopupDockItem]',
+                    exportAs: 'axPopupDockItem',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Page-hosted dock for minimized popups. Place it anywhere in the app; matching
+ * `buttons.minimize.dock` names send hidden windows here as reorderable tabs.
+ *
+ * @example
+ * ```html
+ * <ax-popup-dock name="taskbar">
+ *   <ng-template let-item>
+ *     <button axDragHandle (click)="item.restore()">{{ item.title() }}</button>
+ *     <button (click)="item.close()">Close</button>
+ *   </ng-template>
+ * </ax-popup-dock>
+ * ```
+ */
+class AXPopupDockComponent extends NXComponent {
+    constructor() {
+        super();
+        this.popupService = inject(AXPopupService);
+        /**
+         * Dock name matched against `buttons.minimize.dock`.
+         * @defaultValue 'default'
+         */
+        this.name = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /**
+         * Layout of the tab strip.
+         * @defaultValue 'horizontal'
+         */
+        this.orientation = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(TemplateRef, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this.items = computed(() => this.popupService.minimizedInDock(this.name()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const name = this.name();
+            this.popupService.registerDock(name);
+            onCleanup(() => this.popupService.unregisterDock(name));
+        });
+    }
+    onDropped(event) {
+        if (event.previousIndex < 0 || event.currentIndex < 0 || event.previousIndex === event.currentIndex) {
+            return;
+        }
+        this.popupService.reorderMinimized(this.name(), event.previousIndex, event.currentIndex);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupDockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXPopupDockComponent, isStandalone: true, selector: "ax-popup-dock", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ax-popup-dock-empty": "items().length === 0", "class.ax-popup-dock-vertical": "orientation() === \"vertical\"", "class.ax-popup-dock-horizontal": "orientation() === \"horizontal\"" }, classAttribute: "ax-popup-dock" }, providers: [{ provide: AXComponent, useExisting: AXPopupDockComponent }], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-popup-dock-list\"\n  axDropList\n  [dropListOrientation]=\"orientation()\"\n  (dropListDropped)=\"onDropped($event)\"\n>\n  @for (item of items(); track item.id) {\n    <div\n      axDrag\n      axPopupDockItem\n      #dockItem=\"axPopupDockItem\"\n      class=\"ax-popup-dock-item\"\n      [dragData]=\"item.id\"\n      dragCursor=\"grab\"\n    >\n      @if (itemTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          [ngTemplateOutletInjector]=\"dockItem.injector\"\n        />\n      } @else {\n        <div class=\"ax-popup-dock-tab\">\n          <span axDragHandle class=\"ax-popup-dock-tab-title\" (click)=\"item.restore()\">\n            {{ item.title() }}\n          </span>\n          <div class=\"ax-popup-dock-tab-actions\" (pointerdown)=\"$event.stopPropagation()\">\n            <ax-chrome-button class=\"ax-sm\" title=\"Restore\" (click)=\"item.restore()\">\n              <ax-popup-caption-icon name=\"restore\" />\n            </ax-chrome-button>\n            <ax-chrome-button class=\"ax-sm\" title=\"Maximize\" (click)=\"item.maximize()\">\n              <ax-popup-caption-icon name=\"maximize\" />\n            </ax-chrome-button>\n            <ax-chrome-button class=\"ax-sm\" title=\"Close\" (click)=\"item.close()\">\n              <ax-popup-caption-icon name=\"close\" />\n            </ax-chrome-button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{.ax-popup-dock{pointer-events:auto;display:flex;max-width:100%;z-index:10000}.ax-popup-dock.ax-popup-dock-empty{display:none}.ax-popup-dock-list{display:flex;max-width:100%;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}.ax-popup-dock-horizontal .ax-popup-dock-list{flex-direction:row;overflow:auto}.ax-popup-dock-vertical .ax-popup-dock-list{flex-direction:column}.ax-popup-dock-tab{display:flex;max-width:calc(var(--spacing, .25rem) * 72);min-width:calc(var(--spacing, .25rem) * 40);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:rgba(var(--ax-comp-popup-header-bg-color));color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup-dock-tab-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:grab;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-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);-webkit-user-select:none;user-select:none}.ax-popup-dock-tab-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-popup-dock-tab-actions .ax-popup-caption-icon{width:.875rem;height:.875rem}.ax-popup-dock-tab-actions ax-chrome-button{--ax-comp-text: rgba(var(--ax-comp-popup-body-text-color))}}.ax-popup-dock-tab-actions ax-chrome-button ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive{min-width:1.625rem;min-height:1.625rem;padding:.25rem}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{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-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped", "sortPreviewChanged"], exportAs: ["axDropList"] }, { kind: "directive", type: AXPopupDockItemDirective, selector: "[axPopupDockItem]", exportAs: ["axPopupDockItem"] }, { kind: "component", type: AXChromeButtonComponent, selector: "ax-chrome-button", inputs: ["title", "aria-label"] }, { kind: "component", type: AXPopupCaptionIconComponent, selector: "ax-popup-caption-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupDockComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-popup-dock', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ax-popup-dock',
+                        '[class.ax-popup-dock-empty]': 'items().length === 0',
+                        '[class.ax-popup-dock-vertical]': 'orientation() === "vertical"',
+                        '[class.ax-popup-dock-horizontal]': 'orientation() === "horizontal"',
+                    }, imports: [
+                        NgTemplateOutlet,
+                        AXDragDirective,
+                        AXDragHandleDirective,
+                        AXDropListDirective,
+                        AXPopupDockItemDirective,
+                        AXChromeButtonComponent,
+                        AXPopupCaptionIconComponent,
+                    ], providers: [{ provide: AXComponent, useExisting: AXPopupDockComponent }], template: "<div\n  class=\"ax-popup-dock-list\"\n  axDropList\n  [dropListOrientation]=\"orientation()\"\n  (dropListDropped)=\"onDropped($event)\"\n>\n  @for (item of items(); track item.id) {\n    <div\n      axDrag\n      axPopupDockItem\n      #dockItem=\"axPopupDockItem\"\n      class=\"ax-popup-dock-item\"\n      [dragData]=\"item.id\"\n      dragCursor=\"grab\"\n    >\n      @if (itemTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          [ngTemplateOutletInjector]=\"dockItem.injector\"\n        />\n      } @else {\n        <div class=\"ax-popup-dock-tab\">\n          <span axDragHandle class=\"ax-popup-dock-tab-title\" (click)=\"item.restore()\">\n            {{ item.title() }}\n          </span>\n          <div class=\"ax-popup-dock-tab-actions\" (pointerdown)=\"$event.stopPropagation()\">\n            <ax-chrome-button class=\"ax-sm\" title=\"Restore\" (click)=\"item.restore()\">\n              <ax-popup-caption-icon name=\"restore\" />\n            </ax-chrome-button>\n            <ax-chrome-button class=\"ax-sm\" title=\"Maximize\" (click)=\"item.maximize()\">\n              <ax-popup-caption-icon name=\"maximize\" />\n            </ax-chrome-button>\n            <ax-chrome-button class=\"ax-sm\" title=\"Close\" (click)=\"item.close()\">\n              <ax-popup-caption-icon name=\"close\" />\n            </ax-chrome-button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{.ax-popup-dock{pointer-events:auto;display:flex;max-width:100%;z-index:10000}.ax-popup-dock.ax-popup-dock-empty{display:none}.ax-popup-dock-list{display:flex;max-width:100%;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}.ax-popup-dock-horizontal .ax-popup-dock-list{flex-direction:row;overflow:auto}.ax-popup-dock-vertical .ax-popup-dock-list{flex-direction:column}.ax-popup-dock-tab{display:flex;max-width:calc(var(--spacing, .25rem) * 72);min-width:calc(var(--spacing, .25rem) * 40);align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-default);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:rgba(var(--ax-comp-popup-header-bg-color));color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup-dock-tab-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:grab;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-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);-webkit-user-select:none;user-select:none}.ax-popup-dock-tab-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-popup-dock-tab-actions .ax-popup-caption-icon{width:.875rem;height:.875rem}.ax-popup-dock-tab-actions ax-chrome-button{--ax-comp-text: rgba(var(--ax-comp-popup-body-text-color))}}.ax-popup-dock-tab-actions ax-chrome-button ax-button.ax-chrome-button-action.ax-button-icon>button.ax-blank-interactive{min-width:1.625rem;min-height:1.625rem;padding:.25rem}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{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-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+class AXPopupFooterComponent {
+    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.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"] }]
+        }] });
+
 /**
  * Declarative popup host. Project content and call `open()` / `close()` on the component instance.
  *
@@ -777,14 +1226,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',
@@ -798,14 +1247,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
-const COMPONENT = [AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent];
-const MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXTranslationModule];
+const COMPONENT = [
+    AXPopupComponent,
+    AXPopupHostComponent,
+    AXPopupFooterComponent,
+    AXPopupDockComponent,
+    AXPopupCaptionIconComponent,
+];
+const MODULES = [CommonModule, AXCommonModule, AXButtonModule, 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, AXButtonModule, AXDecoratorModule, AXTranslationModule, AXPopupComponent,
+            AXPopupHostComponent,
+            AXPopupFooterComponent,
+            AXPopupDockComponent,
+            AXPopupCaptionIconComponent], exports: [AXPopupComponent,
+            AXPopupHostComponent,
+            AXPopupFooterComponent,
+            AXPopupDockComponent,
+            AXPopupCaptionIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, AXPopupComponent,
+            AXPopupDockComponent] }); }
 }
-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 +1282,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 { AXPopupCaptionIconComponent, AXPopupComponent, AXPopupComponentBase, AXPopupDockComponent, AXPopupFooterComponent, AXPopupHostComponent, AXPopupModule, AXPopupService, AX_POPUP_DEFAULT_RESIZE_HANDLES, resolvePopupCloseButton, resolvePopupMaximizable, resolvePopupMinimize, resolvePopupResizable };
 //# sourceMappingURL=acorex-components-popup.mjs.map