@acorex/components 22.3.3 → 22.3.5

package/fesm2022/acorex-components-popup.mjs

@@ -5,9 +5,10 @@ import { AXOverlayService } from '@acorex/cdk/overlay';
 import { Subject } from 'rxjs';
 import { AXPlatform } from '@acorex/core/platform';
 import { AXDragDirective, AXDragHandleDirective } from '@acorex/cdk/drag-drop';
+import { AXResizableDirective } from '@acorex/cdk/resizable';
 import { AXFocusTrapDirective } from '@acorex/cdk/focus-trap';
-import { AXButtonComponent } from '@acorex/components/button';
-import { AXDecoratorCloseButtonComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDecoratorCloseButtonComponent, AXButtonComponent, AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
 import { AXLoadingService } from '@acorex/components/loading';
 import { AXSkeletonComponent } from '@acorex/components/skeleton';
 import { AXComponentService } from '@acorex/core/components';
@@ -23,6 +24,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             args: [{ selector: 'ax-popup-footer', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXPopupFooterComponent }], template: "<ng-content select=\"ax-prefix\"></ng-content>\n<ng-content select=\"ax-suffix\"></ng-content>\n<ng-content></ng-content>\n", styles: ["@layer components{ax-popup-footer{display:flex;width:100%;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
+const AX_POPUP_DEFAULT_RESIZE_HANDLES = [
+    'top',
+    'bottom',
+    'start',
+    'end',
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-end',
+];
 class AXPopupComponentBase {
     constructor() {
         this.__popup__ = input(/* @ts-ignore */
@@ -73,6 +84,37 @@ function resolvePopupMinimize(config) {
         position: config?.buttons?.minimize?.position ?? 'bottom-right',
     };
 }
+/** Resolves resize config. Disabled for `size: 'full'` and when `resizable` is false/omitted. */
+function resolvePopupResizable(config) {
+    const defaults = {
+        enable: false,
+        handles: AX_POPUP_DEFAULT_RESIZE_HANDLES,
+        minWidth: 240,
+        minHeight: 160,
+        maxWidth: null,
+        maxHeight: null,
+        lockAspectRatio: false,
+        dblClickAction: 'reset',
+    };
+    if (!config || config.size === 'full') {
+        return defaults;
+    }
+    const raw = config.resizable;
+    if (!raw) {
+        return defaults;
+    }
+    const options = raw === true ? {} : raw;
+    return {
+        enable: true,
+        handles: options.handles ?? AX_POPUP_DEFAULT_RESIZE_HANDLES,
+        minWidth: options.minWidth ?? defaults.minWidth,
+        minHeight: options.minHeight ?? defaults.minHeight,
+        maxWidth: options.maxWidth ?? null,
+        maxHeight: options.maxHeight ?? null,
+        lockAspectRatio: options.lockAspectRatio ?? false,
+        dblClickAction: options.dblClickAction ?? 'reset',
+    };
+}
 
 /**
  * The Popup is a component which displays content in a dialog overlay
@@ -118,6 +160,39 @@ class AXPopupComponent extends MXBaseComponent {
         ...(ngDevMode ? [{ debugName: "dragBoundary" }] : /* istanbul ignore next */ []));
         this.dragDisabled = computed(() => !this.__config__()?.draggable || this.popupSizeState() === 'minimize' || this.fullScreenState(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragDisabled" }] : /* istanbul ignore next */ []));
+        this.resizeConfig = computed(() => resolvePopupResizable(this.__config__()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeConfig" }] : /* istanbul ignore next */ []));
+        this.resizeActive = computed(() => this.resizeConfig().enable, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeActive" }] : /* istanbul ignore next */ []));
+        this.resizeEnabled = computed(() => this.resizeConfig().enable && this.popupSizeState() !== 'minimize' && !this.fullScreenState(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeEnabled" }] : /* istanbul ignore next */ []));
+        this.viewportSize = signal({ width: 0, height: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportSize" }] : /* istanbul ignore next */ []));
+        this.resizeMaxWidth = computed(() => {
+            const max = this.resizeConfig().maxWidth;
+            if (max != null) {
+                return max;
+            }
+            const viewport = this.viewportSize().width;
+            return viewport > 0 ? viewport : Infinity;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeMaxWidth" }] : /* istanbul ignore next */ []));
+        this.resizeMaxHeight = computed(() => {
+            const max = this.resizeConfig().maxHeight;
+            if (max != null) {
+                return max;
+            }
+            const viewport = this.viewportSize().height;
+            return viewport > 0 ? viewport : Infinity;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resizeMaxHeight" }] : /* istanbul ignore next */ []));
+        this.viewportResizeHandler = () => {
+            const win = this.document.defaultView;
+            if (!win) {
+                return;
+            }
+            this.viewportSize.set({ width: win.innerWidth, height: win.innerHeight });
+        };
         this.popupSizeState = signal('normal', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupSizeState" }] : /* istanbul ignore next */ []));
         this.fullScreenState = signal(false, /* @ts-ignore */
@@ -137,6 +212,9 @@ class AXPopupComponent extends MXBaseComponent {
         this.minimizeEnabled = () => resolvePopupMinimize(this.__config__()).enable;
         afterNextRender(() => {
             this.dragBoundary.set(this.document.documentElement);
+            this.viewportResizeHandler();
+            const win = this.document.defaultView;
+            win?.addEventListener('resize', this.viewportResizeHandler);
         });
     }
     /** @ignore */
@@ -146,6 +224,7 @@ class AXPopupComponent extends MXBaseComponent {
         if (this._platform.is('SM')) {
             if (config) {
                 config.draggable = false;
+                config.resizable = false;
             }
         }
         this.title.set(config?.title ?? '');
@@ -281,6 +360,7 @@ class AXPopupComponent extends MXBaseComponent {
             this._delayTimer = null;
         }
         document.removeEventListener('fullscreenchange', this.fullscreenChangeHandler);
+        this.document.defaultView?.removeEventListener('resize', this.viewportResizeHandler);
         if (this.fullScreenState() && document.fullscreenElement) {
             document.exitFullscreen().catch(() => undefined);
         }
@@ -344,6 +424,10 @@ class AXPopupComponent extends MXBaseComponent {
         this.popupSizeState.set('minimize');
         this.cdr.markForCheck();
         requestAnimationFrame(() => {
+            if (this.resizeActive()) {
+                el.style.height = '';
+                el.style.width = '';
+            }
             const width = el.offsetWidth;
             const index = this.__popupRef__()?._getStackIndex?.() ?? 0;
             const position = resolvePopupMinimize(this.__config__()).position;
@@ -413,7 +497,7 @@ class AXPopupComponent extends MXBaseComponent {
     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: ["contentOutlet"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "contentContainerEl", first: true, predicate: ["contentContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-popup-wrapper\"\n  aria-modal=\"true\"\n  axFocusTrap\n  [class.ax-popup-minimized-host]=\"popupSizeState() === 'minimize'\"\n>\n  <div\n    #popupEl\n    axDrag\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [dragDisabled]=\"dragDisabled()\"\n    [dragBoundary]=\"dragBoundary()\"\n    [dragResetOnDblClick]=\"false\"\n    [class.ax-popup-minimized]=\"popupSizeState() === 'minimize'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.position]=\"popupSizeState() === 'minimize' ? 'fixed' : null\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : null\"\n    [style.bottom]=\"popupSizeState() === 'minimize' ? '0' : null\"\n  >\n    <div class=\"ax-popup-header-container\">\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\" axDragHandle>\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n\n          <div class=\"ax-popup-header-actions\" (pointerdown)=\"$event.stopPropagation()\">\n            @if (minimizeEnabled() && popupSizeState() !== 'minimize') {\n              <ax-button class=\"ax-xs\" look=\"blank\" color=\"default\" (onClick)=\"minimize()\">\n                <ax-icon class=\"ax-icon ax-icon-minimize\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (popupSizeState() !== 'normal' || fullScreenState()) {\n              <ax-button class=\"ax-xs\" look=\"blank\" color=\"default\" (onClick)=\"restore()\">\n                <ax-icon class=\"ax-icon ax-icon-maximize\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (maximizeEnabled()) {\n              <ax-button class=\"ax-xs\" look=\"blank\" color=\"default\" (onClick)=\"maximize()\">\n                <ax-icon class=\"ax-icon ax-icon-full-screen\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (closeEnabled()) {\n              <ax-close-button class=\"ax-xs\" tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\" #contentContainer>\n        @if (showSkeleton()) {\n          <div class=\"ax-popup-skeleton-container\" #skeletonEl>\n            @if (skeletonTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"skeletonTemplate()\"></ng-container>\n            } @else {\n              <div class=\"ax-popup-skeleton-default\">\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-title\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line ax-popup-skeleton-bar-line-short\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        }\n\n        <ng-container #contentOutlet />\n      </div>\n\n      <div class=\"ax-popup-footer-container\" [class.ax-popup-footer-visible]=\"__config__()?.footer\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{.ax-popup-overlay.ax-overlay-centered{pointer-events:none}.ax-popup-overlay.ax-overlay-centered .ax-overlay-content{display:flex;max-height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;align-items:center;justify-content:center;width:100%!important;height:100%!important;max-width:none!important;overflow:visible!important;pointer-events:none}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host{width:fit-content;flex-shrink:0;align-self:center;pointer-events:auto}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-full){width:100%;max-width:100vw}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-minimized){width:fit-content!important}.ax-popup-wrapper{display:block;width:fit-content;max-width:100%}.ax-popup-wrapper.ax-popup-minimized-host{width:fit-content!important}.ax-popup.ax-dragging{-webkit-user-select:none;user-select:none}.ax-popup.ax-popup-minimized,.ax-popup.ax-popup-fullscreen{translate:none!important}.ax-popup.ax-popup-fullscreen{max-height:100vh!important;width:100vw!important;border-radius:0!important}.ax-popup-header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ax-popup{--ax-comp-popup-shadow-rest: var(--ax-sys-effect-modal);--ax-comp-popup-highlight-rest: var(--ax-sys-highlight-surface);--ax-comp-popup-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-popup-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-popup-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-popup-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-popup-background-image-rest: var(--ax-sys-gradient-surface);--ax-comp-popup-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);box-sizing:border-box;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 0);outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius);border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));box-shadow:var(--ax-comp-popup-contrast-inner-border-rest),var(--ax-comp-popup-inner-border-rest),var(--ax-comp-popup-highlight-rest),var(--ax-comp-popup-shadow-rest);background-image:linear-gradient(var(--ax-comp-popup-contrast-surface-overlay-rest),var(--ax-comp-popup-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-popup-surface-overlay-rest),var(--ax-comp-popup-surface-overlay-rest)),var(--ax-comp-popup-background-image-rest);backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{flex-shrink:0;background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-comp-popup-header-border-color))}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)))}}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7)}}.ax-popup ax-footer{display:flex;align-items:center;justify-content:space-between;border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-skeleton-container{overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar{display:block;border-radius:var(--radius-md, .375rem)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-title{height:calc(var(--spacing, .25rem) * 5);width:40%}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-line{height:calc(var(--spacing, .25rem) * 3.5);width:100%}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-line-short{width:80%}.ax-popup .ax-popup-main-container .ax-popup-footer-container{flex-shrink:0;background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{height:calc(100 * var(--ax-vh));max-height:calc(100 * var(--ax-vh));width:100vw;border-radius:0!important}.ax-popup.ax-popup-fit{width:fit-content!important}.ax-popup.ax-popup-fit .ax-popup-body-container{max-height:calc(100 * var(--ax-vh))}.ax-popup.ax-popup-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}.ax-popup.ax-popup-xs{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-header-container .ax-popup-header .ax-popup-title{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(min-width:48rem){.ax-popup.ax-popup-minimized .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}}@media(min-width:48rem){.ax-popup.ax-popup-minimized .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized){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: 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true, isSignal: true }, { propertyName: "contentContainerRef", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "contentContainerEl", first: true, predicate: ["contentContainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"ax-popup-wrapper\"\n  aria-modal=\"true\"\n  axFocusTrap\n  [class.ax-popup-minimized-host]=\"popupSizeState() === 'minimize'\"\n>\n  <div\n    #popupEl\n    axDrag\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [dragDisabled]=\"dragDisabled()\"\n    [dragBoundary]=\"dragBoundary()\"\n    [dragResetOnDblClick]=\"false\"\n    [axResizable]=\"resizeEnabled()\"\n    [handles]=\"resizeConfig().handles\"\n    [minWidth]=\"resizeConfig().minWidth\"\n    [minHeight]=\"resizeConfig().minHeight\"\n    [maxWidth]=\"resizeMaxWidth()\"\n    [maxHeight]=\"resizeMaxHeight()\"\n    [lockAspectRatio]=\"resizeConfig().lockAspectRatio\"\n    [dblClickAction]=\"resizeConfig().dblClickAction\"\n    [class.ax-popup-resizable]=\"resizeActive()\"\n    [class.ax-popup-minimized]=\"popupSizeState() === 'minimize'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.position]=\"popupSizeState() === 'minimize' ? 'fixed' : null\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : null\"\n    [style.bottom]=\"popupSizeState() === 'minimize' ? '0' : null\"\n  >\n    <div class=\"ax-popup-header-container\">\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\" axDragHandle>\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n\n          <div class=\"ax-popup-header-actions\" (pointerdown)=\"$event.stopPropagation()\">\n            @if (minimizeEnabled() && popupSizeState() !== 'minimize') {\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" (onClick)=\"minimize()\">\n                <ax-icon class=\"ax-icon ax-icon-minimize text-xl\"></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 text-lg\"></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 text-xl\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (closeEnabled()) {\n              <ax-close-button class=\"ax-sm text-xl\" tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\" #contentContainer>\n        @if (showSkeleton()) {\n          <div class=\"ax-popup-skeleton-container\" #skeletonEl>\n            @if (skeletonTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"skeletonTemplate()\"></ng-container>\n            } @else {\n              <div class=\"ax-popup-skeleton-default\">\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-title\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line ax-popup-skeleton-bar-line-short\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        }\n\n        <ng-container #contentOutlet />\n      </div>\n\n      <div class=\"ax-popup-footer-container\" [class.ax-popup-footer-visible]=\"__config__()?.footer\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{.ax-popup-overlay.ax-overlay-centered{pointer-events:none}.ax-popup-overlay.ax-overlay-centered .ax-overlay-content{display:flex;max-height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;align-items:center;justify-content:center;width:100%!important;height:100%!important;max-width:none!important;overflow:visible!important;pointer-events:none}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host{width:fit-content;flex-shrink:0;align-self:center;pointer-events:auto}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-full){width:100%;max-width:100vw}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-minimized){width:fit-content!important}.ax-popup-wrapper{display:block;width:fit-content;max-width:100%}.ax-popup-wrapper.ax-popup-minimized-host{width:fit-content!important}.ax-popup.ax-dragging{-webkit-user-select:none;user-select:none}.ax-popup.ax-popup-minimized,.ax-popup.ax-popup-fullscreen{translate:none!important}.ax-popup.ax-popup-fullscreen{max-height:100vh!important;width:100vw!important;border-radius:0!important}.ax-popup-header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ax-popup{--ax-comp-popup-shadow-rest: var(--ax-sys-effect-modal);--ax-comp-popup-highlight-rest: var(--ax-sys-highlight-surface);--ax-comp-popup-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-popup-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-popup-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-popup-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-popup-background-image-rest: var(--ax-sys-gradient-surface);--ax-comp-popup-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);position:relative;box-sizing:border-box;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 0);outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius);border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));box-shadow:var(--ax-comp-popup-contrast-inner-border-rest),var(--ax-comp-popup-inner-border-rest),var(--ax-comp-popup-highlight-rest),var(--ax-comp-popup-shadow-rest);background-image:linear-gradient(var(--ax-comp-popup-contrast-surface-overlay-rest),var(--ax-comp-popup-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-popup-surface-overlay-rest),var(--ax-comp-popup-surface-overlay-rest)),var(--ax-comp-popup-background-image-rest);backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{flex-shrink:0}.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;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)}}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable){width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important;border-radius:var(--ax-comp-popup-border-radius)}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable):not(.ax-popup-full) .ax-popup-body-container>ng-component>div{width:100%}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable).ax-popup-full{height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius)!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}}:root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXFocusTrapDirective, selector: "[axFocusTrap]", inputs: ["axFocusTrapArrowNavigation"] }, { kind: "component", type: AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "handles", "minWidth", "maxWidth", "minHeight", "maxHeight", "dblClickAction", "width", "defaultWidth", "height", "defaultHeight", "lockAspectRatio"], outputs: ["axResizableChange", "handlesChange", "minWidthChange", "maxWidthChange", "minHeightChange", "maxHeightChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "heightChange", "defaultHeightChange", "lockAspectRatioChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupComponent, decorators: [{
             type: Component,
@@ -434,7 +518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         AXSkeletonComponent,
                         AXDragDirective,
                         AXDragHandleDirective,
-                    ], 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    [class.ax-popup-minimized]=\"popupSizeState() === 'minimize'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.position]=\"popupSizeState() === 'minimize' ? 'fixed' : null\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : null\"\n    [style.bottom]=\"popupSizeState() === 'minimize' ? '0' : null\"\n  >\n    <div class=\"ax-popup-header-container\">\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\" axDragHandle>\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n\n          <div class=\"ax-popup-header-actions\" (pointerdown)=\"$event.stopPropagation()\">\n            @if (minimizeEnabled() && popupSizeState() !== 'minimize') {\n              <ax-button class=\"ax-xs\" look=\"blank\" color=\"default\" (onClick)=\"minimize()\">\n                <ax-icon class=\"ax-icon ax-icon-minimize\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (popupSizeState() !== 'normal' || fullScreenState()) {\n              <ax-button class=\"ax-xs\" look=\"blank\" color=\"default\" (onClick)=\"restore()\">\n                <ax-icon class=\"ax-icon ax-icon-maximize\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (maximizeEnabled()) {\n              <ax-button class=\"ax-xs\" look=\"blank\" color=\"default\" (onClick)=\"maximize()\">\n                <ax-icon class=\"ax-icon ax-icon-full-screen\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (closeEnabled()) {\n              <ax-close-button class=\"ax-xs\" tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\" #contentContainer>\n        @if (showSkeleton()) {\n          <div class=\"ax-popup-skeleton-container\" #skeletonEl>\n            @if (skeletonTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"skeletonTemplate()\"></ng-container>\n            } @else {\n              <div class=\"ax-popup-skeleton-default\">\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-title\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line ax-popup-skeleton-bar-line-short\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        }\n\n        <ng-container #contentOutlet />\n      </div>\n\n      <div class=\"ax-popup-footer-container\" [class.ax-popup-footer-visible]=\"__config__()?.footer\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{.ax-popup-overlay.ax-overlay-centered{pointer-events:none}.ax-popup-overlay.ax-overlay-centered .ax-overlay-content{display:flex;max-height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;align-items:center;justify-content:center;width:100%!important;height:100%!important;max-width:none!important;overflow:visible!important;pointer-events:none}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host{width:fit-content;flex-shrink:0;align-self:center;pointer-events:auto}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-full){width:100%;max-width:100vw}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-minimized){width:fit-content!important}.ax-popup-wrapper{display:block;width:fit-content;max-width:100%}.ax-popup-wrapper.ax-popup-minimized-host{width:fit-content!important}.ax-popup.ax-dragging{-webkit-user-select:none;user-select:none}.ax-popup.ax-popup-minimized,.ax-popup.ax-popup-fullscreen{translate:none!important}.ax-popup.ax-popup-fullscreen{max-height:100vh!important;width:100vw!important;border-radius:0!important}.ax-popup-header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ax-popup{--ax-comp-popup-shadow-rest: var(--ax-sys-effect-modal);--ax-comp-popup-highlight-rest: var(--ax-sys-highlight-surface);--ax-comp-popup-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-popup-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-popup-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-popup-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-popup-background-image-rest: var(--ax-sys-gradient-surface);--ax-comp-popup-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);box-sizing:border-box;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 0);outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius);border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));box-shadow:var(--ax-comp-popup-contrast-inner-border-rest),var(--ax-comp-popup-inner-border-rest),var(--ax-comp-popup-highlight-rest),var(--ax-comp-popup-shadow-rest);background-image:linear-gradient(var(--ax-comp-popup-contrast-surface-overlay-rest),var(--ax-comp-popup-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-popup-surface-overlay-rest),var(--ax-comp-popup-surface-overlay-rest)),var(--ax-comp-popup-background-image-rest);backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{flex-shrink:0;background-color:rgba(var(--ax-comp-popup-header-bg-color))}.ax-popup .ax-popup-header-container .ax-popup-header{display:flex;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-comp-popup-header-border-color))}.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)))}}@media(min-width:48rem){.ax-popup .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7)}}.ax-popup ax-footer{display:flex;align-items:center;justify-content:space-between;border-top-style:var(--tw-border-style);border-top-width:1px;padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-comp-popup-footer-border-color));background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup:focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent}.ax-popup:focus-visible{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-popup .ax-popup-main-container{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;overflow:hidden}.ax-popup .ax-popup-main-container .ax-popup-body-container{min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto;background-color:rgba(var(--ax-comp-popup-body-bg-color))}.ax-popup .ax-popup-main-container .ax-popup-skeleton-container{overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar{display:block;border-radius:var(--radius-md, .375rem)}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-title{height:calc(var(--spacing, .25rem) * 5);width:40%}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-line{height:calc(var(--spacing, .25rem) * 3.5);width:100%}.ax-popup .ax-popup-main-container .ax-popup-skeleton-default .ax-popup-skeleton-bar-line-short{width:80%}.ax-popup .ax-popup-main-container .ax-popup-footer-container{flex-shrink:0;background-color:rgba(var(--ax-comp-popup-footer-bg-color))}.ax-popup.ax-popup-full{height:calc(100 * var(--ax-vh));max-height:calc(100 * var(--ax-vh));width:100vw;border-radius:0!important}.ax-popup.ax-popup-fit{width:fit-content!important}.ax-popup.ax-popup-fit .ax-popup-body-container{max-height:calc(100 * var(--ax-vh))}.ax-popup.ax-popup-fit .ax-popup-body-container>ng-component>div{width:fit-content!important}.ax-popup.ax-popup-xs{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-header-container .ax-popup-header .ax-popup-title{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(min-width:48rem){.ax-popup.ax-popup-minimized .ax-popup-header-container .ax-popup-header .ax-popup-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}}@media(min-width:48rem){.ax-popup.ax-popup-minimized .ax-popup-header-container .ax-popup-header .ax-popup-title{--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5)}}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized){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"] }]
+                        AXResizableDirective,
+                    ], template: "<div\n  class=\"ax-popup-wrapper\"\n  aria-modal=\"true\"\n  axFocusTrap\n  [class.ax-popup-minimized-host]=\"popupSizeState() === 'minimize'\"\n>\n  <div\n    #popupEl\n    axDrag\n    class=\"ax-popup ax-popup-{{ __config__()?.size || 'md' }}\"\n    tabindex=\"0\"\n    [dragDisabled]=\"dragDisabled()\"\n    [dragBoundary]=\"dragBoundary()\"\n    [dragResetOnDblClick]=\"false\"\n    [axResizable]=\"resizeEnabled()\"\n    [handles]=\"resizeConfig().handles\"\n    [minWidth]=\"resizeConfig().minWidth\"\n    [minHeight]=\"resizeConfig().minHeight\"\n    [maxWidth]=\"resizeMaxWidth()\"\n    [maxHeight]=\"resizeMaxHeight()\"\n    [lockAspectRatio]=\"resizeConfig().lockAspectRatio\"\n    [dblClickAction]=\"resizeConfig().dblClickAction\"\n    [class.ax-popup-resizable]=\"resizeActive()\"\n    [class.ax-popup-minimized]=\"popupSizeState() === 'minimize'\"\n    [class.ax-popup-fullscreen]=\"fullScreenState()\"\n    [style.position]=\"popupSizeState() === 'minimize' ? 'fixed' : null\"\n    [style.left]=\"popupSizeState() === 'minimize' ? minimizeLeft() : null\"\n    [style.right]=\"popupSizeState() === 'minimize' ? minimizeRight() : null\"\n    [style.bottom]=\"popupSizeState() === 'minimize' ? '0' : null\"\n  >\n    <div class=\"ax-popup-header-container\">\n      @if (__config__()?.header) {\n        <div class=\"ax-popup-header\" axDragHandle>\n          <span class=\"ax-popup-title\">{{ title() | translate | async }}</span>\n\n          <div class=\"ax-popup-header-actions\" (pointerdown)=\"$event.stopPropagation()\">\n            @if (minimizeEnabled() && popupSizeState() !== 'minimize') {\n              <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" (onClick)=\"minimize()\">\n                <ax-icon class=\"ax-icon ax-icon-minimize text-xl\"></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 text-lg\"></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 text-xl\"></ax-icon>\n              </ax-button>\n            }\n\n            @if (closeEnabled()) {\n              <ax-close-button class=\"ax-sm text-xl\" tabindex=\"1\" (click)=\"_handleCloseClick()\"></ax-close-button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <div class=\"ax-popup-main-container ax-loading-container\">\n      <div class=\"ax-popup-body-container\" #contentContainer>\n        @if (showSkeleton()) {\n          <div class=\"ax-popup-skeleton-container\" #skeletonEl>\n            @if (skeletonTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"skeletonTemplate()\"></ng-container>\n            } @else {\n              <div class=\"ax-popup-skeleton-default\">\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-title\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line ax-popup-skeleton-bar-line-short\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n\n                <ax-skeleton\n                  class=\"ax-popup-skeleton-bar ax-popup-skeleton-bar-line\"\n                  [animated]=\"__config__()?.skeletonAnimated ?? true\"\n                ></ax-skeleton>\n              </div>\n            }\n          </div>\n        }\n\n        <ng-container #contentOutlet />\n      </div>\n\n      <div class=\"ax-popup-footer-container\" [class.ax-popup-footer-visible]=\"__config__()?.footer\"></div>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;@layer components{.ax-popup-overlay.ax-overlay-centered{pointer-events:none}.ax-popup-overlay.ax-overlay-centered .ax-overlay-content{display:flex;max-height:100%;min-height:calc(var(--spacing, .25rem) * 0);flex-direction:column;align-items:center;justify-content:center;width:100%!important;height:100%!important;max-width:none!important;overflow:visible!important;pointer-events:none}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host{width:fit-content;flex-shrink:0;align-self:center;pointer-events:auto}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-full){width:100%;max-width:100vw}.ax-popup-overlay.ax-overlay-centered ax-popup.ax-popup-host:has(.ax-popup-minimized){width:fit-content!important}.ax-popup-wrapper{display:block;width:fit-content;max-width:100%}.ax-popup-wrapper.ax-popup-minimized-host{width:fit-content!important}.ax-popup.ax-dragging{-webkit-user-select:none;user-select:none}.ax-popup.ax-popup-minimized,.ax-popup.ax-popup-fullscreen{translate:none!important}.ax-popup.ax-popup-fullscreen{max-height:100vh!important;width:100vw!important;border-radius:0!important}.ax-popup-header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}.ax-popup{--ax-comp-popup-shadow-rest: var(--ax-sys-effect-modal);--ax-comp-popup-highlight-rest: var(--ax-sys-highlight-surface);--ax-comp-popup-inner-border-rest: var(--ax-sys-inner-border-surface);--ax-comp-popup-contrast-inner-border-rest: var(--ax-sys-contrast-inner-border-surface);--ax-comp-popup-contrast-surface-overlay-rest: var(--ax-sys-contrast-surface-overlay-surface);--ax-comp-popup-backdrop-filter-rest: var(--ax-sys-backdrop-filter-surface);--ax-comp-popup-background-image-rest: var(--ax-sys-gradient-surface);--ax-comp-popup-surface-overlay-rest: var(--ax-sys-surface-overlay-modal);position:relative;box-sizing:border-box;display:flex;min-height:calc(var(--spacing, .25rem) * 0);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 0);outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:transparent;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius);border-color:rgba(var(--ax-comp-popup-border-color));background-color:rgba(var(--ax-comp-popup-body-bg-color));box-shadow:var(--ax-comp-popup-contrast-inner-border-rest),var(--ax-comp-popup-inner-border-rest),var(--ax-comp-popup-highlight-rest),var(--ax-comp-popup-shadow-rest);background-image:linear-gradient(var(--ax-comp-popup-contrast-surface-overlay-rest),var(--ax-comp-popup-contrast-surface-overlay-rest)),linear-gradient(var(--ax-comp-popup-surface-overlay-rest),var(--ax-comp-popup-surface-overlay-rest)),var(--ax-comp-popup-background-image-rest);backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);-webkit-backdrop-filter:var(--ax-comp-popup-backdrop-filter-rest);color:rgba(var(--ax-comp-popup-body-text-color))}.ax-popup .ax-popup-header-container{flex-shrink:0}.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;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)}}@media screen and (max-width:768px){.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable){width:93vw!important;max-height:calc(var(--ax-overlay-full-width) * var(--ax-vh))!important;border-radius:var(--ax-comp-popup-border-radius)}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable):not(.ax-popup-full) .ax-popup-body-container>ng-component>div{width:100%}.ax-popup:not(.ax-popup-fit):not(.ax-popup-minimized):not(.ax-popup-resizable).ax-popup-full{height:calc(var(--ax-overlay-full-width) * var(--ax-vh));border-radius:var(--ax-comp-popup-border-radius)!important}}.ax-dark .ax-popup{--ax-comp-popup-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-dark-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-dark-surface)}}:root{--ax-comp-popup-border-radius: var(--ax-sys-border-radius);--ax-comp-popup-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-popup-body-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-popup-body-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-popup-header-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-header-border-color: var(--ax-sys-color-border-lighter-surface);--ax-comp-popup-footer-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-popup-footer-border-color: var(--ax-sys-color-border-lighter-surface)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-outline-style: solid;--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { contentContainerRef: [{
                 type: ViewChild,
                 args: ['contentOutlet', { read: ViewContainerRef, static: true }]
@@ -777,10 +862,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         }], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 const COMPONENT = [AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent];
-const MODULES = [CommonModule, AXCommonModule, AXDecoratorModule, AXTranslationModule];
+const MODULES = [CommonModule, AXCommonModule, AXButtonModule, AXDecoratorModule, AXTranslationModule];
 class AXPopupModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXPopupModule, imports: [CommonModule, AXCommonModule, AXDecoratorModule, AXTranslationModule, AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent], exports: [AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXPopupModule, imports: [CommonModule, AXCommonModule, AXButtonModule, AXDecoratorModule, AXTranslationModule, AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent], exports: [AXPopupComponent, AXPopupHostComponent, AXPopupFooterComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupModule, providers: [AXPopupService], imports: [MODULES, AXPopupComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupModule, decorators: [{
@@ -796,5 +881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPopupComponent, AXPopupComponentBase, AXPopupFooterComponent, AXPopupHostComponent, AXPopupModule, AXPopupService, resolvePopupCloseButton, resolvePopupMaximizable, resolvePopupMinimize };
+export { AXPopupComponent, AXPopupComponentBase, AXPopupFooterComponent, AXPopupHostComponent, AXPopupModule, AXPopupService, AX_POPUP_DEFAULT_RESIZE_HANDLES, resolvePopupCloseButton, resolvePopupMaximizable, resolvePopupMinimize, resolvePopupResizable };
 //# sourceMappingURL=acorex-components-popup.mjs.map