@acorex/components 22.3.11 → 22.3.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-components-button.mjs +87 -7
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/{acorex-components-conversation-acorex-components-conversation-BZjCPB-7.mjs → acorex-components-conversation-acorex-components-conversation-OaSJ3SUq.mjs} +5 -8
- package/fesm2022/acorex-components-conversation-acorex-components-conversation-OaSJ3SUq.mjs.map +1 -0
- package/fesm2022/{acorex-components-conversation-picker-rename-file-dialog.component-CNwDWg_O.mjs → acorex-components-conversation-picker-rename-file-dialog.component-BaLD7loU.mjs} +2 -2
- package/fesm2022/{acorex-components-conversation-picker-rename-file-dialog.component-CNwDWg_O.mjs.map → acorex-components-conversation-picker-rename-file-dialog.component-BaLD7loU.mjs.map} +1 -1
- package/fesm2022/acorex-components-conversation.mjs +1 -1
- package/fesm2022/acorex-components-notification.mjs +2 -2
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +8 -7
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +2 -2
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-toast.mjs +2 -2
- package/fesm2022/acorex-components-toast.mjs.map +1 -1
- package/package.json +3 -3
- package/types/acorex-components-button.d.ts +20 -2
- package/fesm2022/acorex-components-conversation-acorex-components-conversation-BZjCPB-7.mjs.map +0 -1
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
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';
|
|
3
3
|
import { MXBaseComponent, AXClosableComponent, AXComponent, AXComponentClosedPromise, NXComponent, AXCommonModule } from '@acorex/cdk/common';
|
|
4
4
|
import { AXDragHandleDirective, AXDragDirective, moveItemInArray, AX_DRAG_PARENT, AXDropListDirective } from '@acorex/cdk/drag-drop';
|
|
5
|
-
import {
|
|
5
|
+
import { AXChromeButtonComponent, AXDecoratorCloseButtonComponent, AXButtonModule } from '@acorex/components/button';
|
|
6
6
|
import { DOCUMENT, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
|
|
7
7
|
import { AXOverlayService } from '@acorex/cdk/overlay';
|
|
8
8
|
import { Subject } from 'rxjs';
|
|
@@ -626,7 +626,7 @@ class AXPopupComponent extends MXBaseComponent {
|
|
|
626
626
|
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: [
|
|
627
627
|
{ provide: AXClosableComponent, useExisting: AXPopupComponent },
|
|
628
628
|
{ provide: AXComponent, useExisting: AXPopupComponent },
|
|
629
|
-
], 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-button class=\"ax-sm\" look=\"blank\" color=\"default\" title=\"Minimize\" (onClick)=\"minimize()\">\n <ax-popup-caption-icon name=\"minimize\" />\n </ax-button>\n }\n\n @if (popupSizeState() === 'minimize' || fullScreenState()) {\n <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" title=\"Restore\" (onClick)=\"restore()\">\n <ax-popup-caption-icon name=\"restore\" />\n </ax-button>\n } @else if (maximizeEnabled()) {\n <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" title=\"Maximize\" (onClick)=\"maximize()\">\n <ax-popup-caption-icon name=\"maximize\" />\n </ax-button>\n }\n\n @if (closeEnabled()) {\n <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" title=\"Close\" tabindex=\"1\" (onClick)=\"_handleCloseClick()\">\n <ax-popup-caption-icon name=\"close\" />\n </ax-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-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:0}.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)}}: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: 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 }); }
|
|
629
|
+
], 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 }); }
|
|
630
630
|
}
|
|
631
631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupComponent, decorators: [{
|
|
632
632
|
type: Component,
|
|
@@ -638,7 +638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
638
638
|
{ provide: AXComponent, useExisting: AXPopupComponent },
|
|
639
639
|
], imports: [
|
|
640
640
|
AXPopupCaptionIconComponent,
|
|
641
|
-
|
|
641
|
+
AXChromeButtonComponent,
|
|
642
642
|
AsyncPipe,
|
|
643
643
|
NgTemplateOutlet,
|
|
644
644
|
AXTranslatorPipe,
|
|
@@ -647,7 +647,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
647
647
|
AXDragDirective,
|
|
648
648
|
AXDragHandleDirective,
|
|
649
649
|
AXResizableDirective,
|
|
650
|
-
], 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-button class=\"ax-sm\" look=\"blank\" color=\"default\" title=\"Minimize\" (onClick)=\"minimize()\">\n <ax-popup-caption-icon name=\"minimize\" />\n </ax-button>\n }\n\n @if (popupSizeState() === 'minimize' || fullScreenState()) {\n <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" title=\"Restore\" (onClick)=\"restore()\">\n <ax-popup-caption-icon name=\"restore\" />\n </ax-button>\n } @else if (maximizeEnabled()) {\n <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" title=\"Maximize\" (onClick)=\"maximize()\">\n <ax-popup-caption-icon name=\"maximize\" />\n </ax-button>\n }\n\n @if (closeEnabled()) {\n <ax-button class=\"ax-sm\" look=\"blank\" color=\"default\" title=\"Close\" tabindex=\"1\" (onClick)=\"_handleCloseClick()\">\n <ax-popup-caption-icon name=\"close\" />\n </ax-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-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:0}.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)}}: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"] }]
|
|
650
|
+
AXDecoratorCloseButtonComponent
|
|
651
|
+
], 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"] }]
|
|
651
652
|
}], ctorParameters: () => [], propDecorators: { contentContainerRef: [{
|
|
652
653
|
type: ViewChild,
|
|
653
654
|
args: ['contentOutlet', { read: ViewContainerRef, static: true }]
|
|
@@ -1126,7 +1127,7 @@ class AXPopupDockComponent extends NXComponent {
|
|
|
1126
1127
|
this.popupService.reorderMinimized(this.name(), event.previousIndex, event.currentIndex);
|
|
1127
1128
|
}
|
|
1128
1129
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupDockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1129
|
-
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-button class=\"ax-sm\"
|
|
1130
|
+
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 }); }
|
|
1130
1131
|
}
|
|
1131
1132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXPopupDockComponent, decorators: [{
|
|
1132
1133
|
type: Component,
|
|
@@ -1141,9 +1142,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
1141
1142
|
AXDragHandleDirective,
|
|
1142
1143
|
AXDropListDirective,
|
|
1143
1144
|
AXPopupDockItemDirective,
|
|
1144
|
-
|
|
1145
|
+
AXChromeButtonComponent,
|
|
1145
1146
|
AXPopupCaptionIconComponent,
|
|
1146
|
-
], 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-button class=\"ax-sm\"
|
|
1147
|
+
], 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"] }]
|
|
1147
1148
|
}], 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 }] }] } });
|
|
1148
1149
|
|
|
1149
1150
|
class AXPopupFooterComponent {
|