@acorex-platform/framework-client 0.0.57 → 0.0.58

package/fesm2022/acorex-platform-framework-client-layout-components.mjs

@@ -1,8 +1,8 @@
 import { AXPRegionalSetting, resolveActionLook, resolveToSurfaceClass, AXPWidgetsCatalog, createRandomUuid, omitFilterClauseIdentity, AXPPlatformScope, AXPFileStorageStatus, flattenQueryFilterUserGroups, hasQueryFilterGroupId, isCompleteFilterCondition, coerceFilterDisplayText, AXP_QUERY_QUICK_SEARCH_FIELD, wrapQueryFilterRoot, QUERY_FILTER_CHIP_EXPAND_MAX_CONDITIONS, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, isQueryFilterAllNode, resolveQueryFilterGroupId, createQueryFilterGroupId, resolveQueryFilterConditionContextField, createQueryFilterConditionId, QUERY_FILTER_CONDITION_KEY_INFIX, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsList, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
 import { AXLocaleService } from '@acorex/core/locale';
-import * as i2$2 from '@acorex/components/button';
+import * as i1$2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i1$5 from '@acorex/cdk/common';
+import * as i1$6 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
 import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
@@ -12,7 +12,7 @@ import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i4$3 from '@acorex/core/format';
 import { AXFormatService, AXFormatModule } from '@acorex/core/format';
-import { AXPLayoutRendererComponent, AXPLayoutBuilderService, resolveLayoutBuilderDialogResult } from '@acorex-platform/framework-client/layout/builder';
+import { AXPLayoutRendererComponent, AXPDialogOpener, AXPLayoutBuilderService, resolveLayoutBuilderDialogResult } from '@acorex-platform/framework-client/layout/builder';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, AsyncPipe, isPlatformBrowser, NgComponentOutlet, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -28,7 +28,7 @@ import { AXImageModule } from '@acorex/components/image';
 import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { isEmpty, isNil, cloneDeep, get, isEqual, defaultTo, orderBy, isString, mergeWith, unionBy, sortBy, isArray, set, capitalize } from 'lodash-es';
-import * as i1$2 from '@acorex/components/badge';
+import * as i1$3 from '@acorex/components/badge';
 import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
 import { AXPLayoutThemeService } from '@acorex-platform/framework-client/themes/shared';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
@@ -37,27 +37,28 @@ import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i3$2 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
-import { ensureRuntimeSurfaceClasses, setupPopupFooterKeyboardShortcuts, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPDataGenerator, AXPHookService, AXP_HOOK_PROVIDER, AXPKeyboardShortcutRegistry, AXPDeviceService, chordToKbdItemKeys } from '@acorex-platform/framework-client/core';
+import { ensureRuntimeSurfaceClasses, setupPopupFooterKeyboardShortcuts, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPDataGenerator, AXPHookService, AXP_HOOK_PROVIDER, AXPKeyboardShortcutRegistry, AXPDeviceService, chordToKbdItemKeys, getVisibleAnchoredOverlayPanes } from '@acorex-platform/framework-client/core';
 export { AXPLogoComponent } from '@acorex-platform/framework-client/core';
-import * as i2$3 from '@acorex/components/popover';
+import * as i2$2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import * as i3$3 from '@acorex/components/switch';
 import { AXSwitchModule } from '@acorex/components/switch';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, transferArrayItem } from '@angular/cdk/drag-drop';
-import * as i1$3 from '@angular/forms';
+import * as i1$4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4$1 from '@acorex/components/data-table';
 import { AXDataTableColumnComponent, AXDataTableModule } from '@acorex/components/data-table';
-import * as i2$5 from '@acorex/components/form';
+import * as i2$4 from '@acorex/components/form';
 import { AXFormModule, AXFormComponent } from '@acorex/components/form';
+import * as i3$5 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
-import * as i2$4 from '@acorex/components/check-box';
+import * as i2$3 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i3$4 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i1$4 from '@acorex-platform/framework-client/layout/widget-core';
+import * as i1$5 from '@acorex-platform/framework-client/layout/widget-core';
 import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetContainerComponent, AXPWidgetRendererDirective, toLocalDataSourceSheet, ensureLocalDataSourceRowValues, AXP_WIDGET_PROPERTY_GROUP, readLocalDataSourcesFromNode, AXP_LOCAL_DATA_SOURCE_STORE, createReadonlyLocalDataSourceStore, AXP_LAYOUT_PROFILE } from '@acorex-platform/framework-client/layout/widget-core';
-import * as i3$5 from '@acorex/components/dropdown-button';
+import * as i6 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule, AXDropdownButtonComponent } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
 import { AXPopupService } from '@acorex/components/popup';
@@ -82,14 +83,15 @@ import * as i9 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { AXPQueryService, AXPCommandExecutor, AXPCommandService } from '@acorex-platform/framework-client/runtime';
-import * as i1$6 from '@acorex/components/image-editor';
+import * as i1$7 from '@acorex/components/image-editor';
 import { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorModule } from '@acorex/components/image-editor';
 import { AXToolBarModule } from '@acorex/components/toolbar';
-import * as i2$6 from '@acorex/components/accordion';
+import * as i2$5 from '@acorex/components/accordion';
 import { AXAccordionModule } from '@acorex/components/accordion';
-import * as i6 from '@acorex/components/tabs';
+import * as i6$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXSafePipe } from '@acorex/core/pipes';
+import { AXValidationService, AXValidationModule } from '@acorex/core/validation';
 import { createStringProperty, createBooleanProperty, AXPWidgetGroupEnum, resolveLayoutProfileValue, persistLayoutProfileValue } from '@acorex-platform/framework-shared/widget-core';
 import { AXPSessionService } from '@acorex-platform/framework-client/auth';
 import { filter as filter$1, take, tap } from 'rxjs/operators';
@@ -97,7 +99,7 @@ import { AXPUserPresenceService, isWatchablePresenceUserId, presenceDurationBuck
 import { AXOverlayService } from '@acorex/cdk/overlay';
 import { AXPlatform } from '@acorex/core/platform';
 import { Router, NavigationStart } from '@angular/router';
-import * as i6$1 from '@acorex/components/tooltip';
+import * as i6$2 from '@acorex/components/tooltip';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 import { AXContextMenuComponent } from '@acorex/components/menu';
 
@@ -1333,7 +1335,7 @@ class AXPCategoryTreeComponent {
         this.isLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"p-4 flex flex-col gap-3\" [class.pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div\n      class=\"px-4 flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\"\n      [class.pt-2]=\"config().searchable\"\n    >\n      <ax-tree-view\n        [datasource]=\"datasource\"\n        [selectMode]=\"config().showCheckbox ? 'multiple' : 'none'\"\n        [dragBehavior]=\"'none'\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onNodeToggle)=\"handleNodeToggle($event)\"\n        [nodeTemplate]=\"itemTemplate\"\n        [titleField]=\"config().textField || 'title'\"\n        [idField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [titleParams]=\"emptyStateTitleParams()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"\n            (actions().createLabel || '@general:actions.add-new.title'\n              | translate\n              | async)!\n          \"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-node=\"node\">\n    @let item = node;\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\n    <div class=\"flex items-center justify-between w-full gap-2 overflow-hidden\">\n      <div class=\"flex items-center gap-2 min-w-0\">\n        <ax-icon class=\"fas text-warning fa-folder\"></ax-icon>\n        <span class=\"truncate\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | translate | async }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (\n          actions().canCreateChild || actions().canUpdate || actions().canDelete\n        ) {\n          <div class=\"flex items-center gap-1\">\n            <ax-button\n              class=\"ax-xs\"\n              color=\"default\"\n              look=\"none\"\n              (onClick)=\"$event.nativeEvent.stopPropagation()\"\n            >\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"\n                        (actions().createChildLabel ||\n                          '@general:actions.add-new-child.title'\n                          | translate\n                          | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"\n                        (actions().updateLabel || '@general:actions.edit.title'\n                          | translate\n                          | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"\n                        (actions().deleteLabel ||\n                          '@general:actions.delete.title'\n                          | translate\n                          | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"flex items-center gap-1\">\n          <ax-button\n            class=\"ax-sm\"\n            (onClick)=\"handleCreateRootClick($event)\"\n            look=\"blank\"\n            color=\"default\"\n          >\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [":host{display:block;height:100%;width:100%}:host axp-layout-content{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-toolbar>\n    @if (config().searchable) {\n      <ax-search-box\n        (onValueChanged)=\"handleSearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"config().searchPlaceholder! | translate | async\"\n      >\n      </ax-search-box>\n    }\n  </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"p-4 flex flex-col gap-3\" [class.pt-2]=\"config().searchable\">\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeItems()[0].children?.length) {\n    <div\n      class=\"px-4 flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\"\n      [class.pt-2]=\"config().searchable\"\n    >\n      <ax-tree-view\n        [datasource]=\"datasource\"\n        [selectMode]=\"config().showCheckbox ? 'multiple' : 'none'\"\n        [dragBehavior]=\"'none'\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        (onNodeClick)=\"handleNodeClick($event)\"\n        (onNodeToggle)=\"handleNodeToggle($event)\"\n        [nodeTemplate]=\"itemTemplate\"\n        [titleField]=\"config().textField || 'title'\"\n        [idField]=\"config().valueField || 'id'\"\n        [expandedField]=\"config().expandedField || 'expand'\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n      [title]=\"emptyStateTitle()\"\n      [titleParams]=\"emptyStateTitleParams()\"\n      [description]=\"emptyStateDescription()\"\n    >\n      @if (actions().canCreate) {\n        <ax-button\n          slot=\"actions\"\n          (onClick)=\"handleCreateRootClick($event)\"\n          look=\"solid\"\n          color=\"primary\"\n          [text]=\"\n            (actions().createLabel || '@general:actions.add-new.title'\n              | translate\n              | async)!\n          \"\n        >\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      }\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-node=\"node\">\n    @let item = node;\n    @let textField = config().textField || 'title';\n    @let rawTitle = item[textField] ?? item.title;\n    <div class=\"flex items-center justify-between w-full gap-2 overflow-hidden\">\n      <div class=\"flex items-center gap-2 min-w-0\">\n        <ax-icon class=\"fas text-warning fa-folder\"></ax-icon>\n        <span class=\"truncate\">\n          @if (item.id === 'root') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ rawTitle | translate | async }}\n          }\n        </span>\n      </div>\n      @if (item.id && item.id !== 'root') {\n        @if (\n          actions().canCreateChild || actions().canUpdate || actions().canDelete\n        ) {\n          <div class=\"flex items-center gap-1\">\n            <ax-button\n              class=\"ax-xs\"\n              color=\"default\"\n              look=\"none\"\n              (onClick)=\"$event.nativeEvent.stopPropagation()\"\n            >\n              <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @if (actions().canCreateChild) {\n                    <ax-button-item\n                      (onClick)=\"handleCreateChildClick(item, $event)\"\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"\n                        (actions().createChildLabel ||\n                          '@general:actions.add-new-child.title'\n                          | translate\n                          | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-plus\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canUpdate) {\n                    <ax-button-item\n                      (onClick)=\"handleUpdateNodeClick(item, $event)\"\n                      look=\"blank\"\n                      [text]=\"\n                        (actions().updateLabel || '@general:actions.edit.title'\n                          | translate\n                          | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-pen\"></ax-icon>\n                    </ax-button-item>\n                  }\n                  @if (actions().canDelete) {\n                    <ax-button-item\n                      (onClick)=\"handleDeleteNodeClick(item, $event)\"\n                      color=\"danger\"\n                      look=\"blank\"\n                      [text]=\"\n                        (actions().deleteLabel ||\n                          '@general:actions.delete.title'\n                          | translate\n                          | async)!\n                      \"\n                    >\n                      <ax-icon class=\"fas fa-trash\"></ax-icon>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          </div>\n        }\n      } @else if (item.id === 'root' && actions().canCreate) {\n        <div class=\"flex items-center gap-1\">\n          <ax-button\n            class=\"ax-sm\"\n            (onClick)=\"handleCreateRootClick($event)\"\n            look=\"blank\"\n            color=\"default\"\n          >\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [":host{display:block;height:100%;width:100%}:host axp-layout-content{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n    axp-page-content, \n    axp-page-footer-container,\n    axp-page-footer,\n    axp-page-header,\n    axp-page-header-container,\n    axp-page-toolbar,\n\n    axp-layout-content, \n    axp-layout-page-content, \n\n    axp-layout-sections,\n    axp-layout-body,\n    axp-layout-page-body,\n    axp-layout-prefix,\n    axp-layout-suffix,\n    axp-layout-title-bar,\n    axp-layout-title, \n    axp-layout-title-actions, \n    axp-layout-nav-button, \n    axp-layout-description, \n    axp-layout-breadcrumbs,\n    axp-layout-list-action,\n    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
             type: Component,
@@ -1694,7 +1696,7 @@ class AXPColumnItemListComponent {
         </div>
       </div>
     </ax-popover>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColumnItemListComponent, decorators: [{
             type: Component,
@@ -1779,7 +1781,7 @@ class AXPQueryColumnsComponent {
         this.columns.set(columns);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryColumnsComponent, isStandalone: true, selector: "axp-query-columns", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, constrainHeight: { classPropertyName: "constrainHeight", publicName: "constrainHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-4 select-none\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <div\n    class=\"flex flex-col gap-3 w-full ax-sorted-list overflow-x-hidden\"\n    [class.overflow-y-auto]=\"constrainHeight()\"\n    [style.max-height]=\"constrainHeight() ? 'calc(100vh - 280px)' : 'none'\"\n  >\n    @for (item of columns(); track item.name) {\n      <div\n        class=\"flex py-1 items-center justify-between\"\n        cdkDrag\n        cdkDragBoundary=\".ax-sorted-list\"\n      >\n        <div class=\"flex items-center gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n          <p class=\"font-medium text-sm\">\n            {{ item.title | translate | async }}\n          </p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryColumnsComponent, isStandalone: true, selector: "axp-query-columns", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, constrainHeight: { classPropertyName: "constrainHeight", publicName: "constrainHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-col gap-4 select-none\"\n  cdkDropList\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <div\n    class=\"flex flex-col gap-3 w-full ax-sorted-list overflow-x-hidden\"\n    [class.overflow-y-auto]=\"constrainHeight()\"\n    [style.max-height]=\"constrainHeight() ? 'calc(100vh - 280px)' : 'none'\"\n  >\n    @for (item of columns(); track item.name) {\n      <div\n        class=\"flex py-1 items-center justify-between\"\n        cdkDrag\n        cdkDragBoundary=\".ax-sorted-list\"\n      >\n        <div class=\"flex items-center gap-3\" cdkDragHandle>\n          <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n          <p class=\"font-medium text-sm\">\n            {{ item.title | translate | async }}\n          </p>\n        </div>\n        <ax-switch\n          class=\"ax-sm\"\n          [ngModel]=\"item.visible\"\n          (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n        ></ax-switch>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3$3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
             type: Component,
@@ -2148,9 +2150,9 @@ class AXPCompareViewComponent {
                 // Angular
                 CommonModule }, { kind: "ngmodule", type: 
                 // ACoreX
-                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: 
+                AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: 
                 // Platform
-                AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
             type: Component,
@@ -2750,7 +2752,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"w-full mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"flex-1 min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if (config().footerPrefixAction; as prefixAction) {\n      <!-- ----- Optional footer prefix action (e.g. sync from remote provider) ----- -->\n      <ax-button\n        look=\"twotone\"\n        color=\"primary\"\n        type=\"button\"\n        [disabled]=\"footerPrefixActionInProgress()\"\n        [text]=\"prefixAction.text\"\n        (onClick)=\"handleFooterPrefixActionClick()\"\n      >\n        <ax-prefix>\n          @if (footerPrefixActionInProgress()) {\n            <ax-loading></ax-loading>\n          }\n          <!-- ----- Footer prefix action icon when idle ----- -->\n          @else if (prefixAction.icon) {\n            <ax-icon [icon]=\"prefixAction.icon\"></ax-icon>\n          }\n        </ax-prefix>\n      </ax-button>\n    }\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"absolute end-[2px] top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.expand-handler{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.expand-handler:hover{opacity:.8}.axp-data-selector{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-data-selector-content{display:flex;min-height:0px;flex:1;overflow:hidden}.axp-data-selector .axp-data-selector-content.with-category-filter .axp-main-data-area{min-height:0px;min-width:0px;flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;min-height:0px;min-width:0px;flex-shrink:0;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 4);border-right:1px solid var(--border-color);background:var(--surface-color)}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.axp-data-selector .axp-main-data-area ax-data-table{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;overflow:hidden;height:90vh;max-height:90vh}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$5.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed", "advanceSelect"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "columnKey", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n  <!-- Main Content Area -->\n  <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n    <!-- Category Filter Side Panel -->\n    @if (categoryEnabled()) {\n    <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n      <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n        [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n      </axp-category-tree>\n    </div>\n    }\n\n    <!-- Main Data Area -->\n    <div class=\"axp-main-data-area\">\n      @if (hasSearch()) {\n      <div class=\"w-full mb-2\">\n        <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n          (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n      }\n      <ax-data-table #grid [showFooter]=\"false\" class=\"flex-1 min-h-0\" [paging]=\"true\"\n        [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n        [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\">\n        <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n        @for (col of config().grid.columns; track col.name) {\n        @if (col.visible) {\n        <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n          [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n              path: col.dataPath || col.name,\n              type: col.widget.type,\n              options: col.widget.options\n            }\">\n        </axp-widget-column-renderer>\n        }\n        }\n        @if (hasRowActionPrimary()) {\n        <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-command-column>\n        }\n        @if (hasRowActionDropdown()) {\n        <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n          (onItemClick)=\"handleRowActionClick($event)\">\n        </ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n\n<ax-footer>\n  <ax-prefix>\n    @if (config().footerPrefixAction; as prefixAction) {\n      <!-- ----- Optional footer prefix action (e.g. sync from remote provider) ----- -->\n      <ax-button\n        look=\"twotone\"\n        color=\"primary\"\n        type=\"button\"\n        [disabled]=\"footerPrefixActionInProgress()\"\n        [text]=\"prefixAction.text\"\n        (onClick)=\"handleFooterPrefixActionClick()\"\n      >\n        <ax-prefix>\n          @if (footerPrefixActionInProgress()) {\n            <ax-loading></ax-loading>\n          }\n          <!-- ----- Footer prefix action icon when idle ----- -->\n          @else if (prefixAction.icon) {\n            <ax-icon [icon]=\"prefixAction.icon\"></ax-icon>\n          }\n        </ax-prefix>\n      </ax-button>\n    }\n    @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n    <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n      (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n    }\n  </ax-prefix>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n      (onClick)=\"handleCloseClick()\">\n    </ax-button>\n    <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n      (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n      <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n      <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n        class=\"absolute end-[2px] top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.expand-handler{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.expand-handler:hover{opacity:.8}.axp-data-selector{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-data-selector-content{display:flex;min-height:0px;flex:1;overflow:hidden}.axp-data-selector .axp-data-selector-content.with-category-filter .axp-main-data-area{min-height:0px;min-width:0px;flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;min-height:0px;min-width:0px;flex-shrink:0;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 4);border-right:1px solid var(--border-color);background:var(--surface-color)}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.axp-data-selector .axp-main-data-area ax-data-table{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;overflow:hidden;height:90vh;max-height:90vh}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed", "advanceSelect"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "columnKey", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
@@ -2780,6 +2782,7 @@ class AXPDataSelectorService {
     constructor() {
         //#region ----   Services & Dependencies   ----
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.expressionService = inject(AXPExpressionEvaluatorService);
         this.columnWidthService = inject(AXPColumnWidthService);
     }
@@ -2789,29 +2792,45 @@ class AXPDataSelectorService {
      * Open data selector popup
      */
     async open(config) {
-        const component = await Promise.resolve().then(function () { return dataSelector_component; }).then(c => c.AXPDataSelectorComponent);
-        const processedConfig = { ...config };
-        if (processedConfig.filter?.value) {
-            processedConfig.filter = {
-                ...processedConfig.filter,
-                value: await this.expressionService.evaluate(processedConfig.filter.value),
-            };
-        }
-        processedConfig.grid = {
-            ...processedConfig.grid,
-            columns: this.applyColumnWidths(processedConfig.grid.columns),
-        };
-        const categoryActive = processedConfig.category?.enabled !== false && !!processedConfig.category?.dataSource;
-        const result = await this.popupService.open(component, {
-            title: processedConfig.title,
-            size: categoryActive
-                ? 'lg'
-                : (processedConfig.grid.columns.length > 3 ? 'lg' : 'md'),
+        let processedConfig = { ...config };
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return dataSelector_component; }).then((c) => c.AXPDataSelectorComponent),
             data: {
-                config: signal(processedConfig)
-            }
+                title: config.title,
+                columns: config.grid?.columns?.map((column) => column.name),
+            },
+            prepare: async () => {
+                if (processedConfig.filter?.value) {
+                    processedConfig = {
+                        ...processedConfig,
+                        filter: {
+                            ...processedConfig.filter,
+                            value: await this.expressionService.evaluate(processedConfig.filter.value),
+                        },
+                    };
+                }
+                processedConfig = {
+                    ...processedConfig,
+                    grid: {
+                        ...processedConfig.grid,
+                        columns: this.applyColumnWidths(processedConfig.grid.columns),
+                    },
+                };
+            },
+            show: (component) => {
+                const categoryActive = processedConfig.category?.enabled !== false && !!processedConfig.category?.dataSource;
+                return this.popupService.open(component, {
+                    title: processedConfig.title,
+                    size: categoryActive
+                        ? 'lg'
+                        : (processedConfig.grid.columns.length > 3 ? 'lg' : 'md'),
+                    data: {
+                        config: signal(processedConfig),
+                    },
+                });
+            },
         });
-        return result.data || null;
+        return result?.data || null;
     }
     //#endregion
     //#region ----   Private Methods   ----
@@ -2903,22 +2922,31 @@ class AXPEntityListStylingDialogService {
     constructor() {
         //#region ----- Services & Dependencies -----
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.translationService = inject(AXTranslationService);
     }
     //#endregion
     //#region ----- Public API -----
     async open(input) {
-        const component = await Promise.resolve().then(function () { return entityListStylingPopup_component; }).then((module) => module.AXPEntityListStylingPopupComponent);
-        const title = (await this.translationService.translateAsync('@general:terms.interface.styling.popup-title')) ?? '';
-        const result = await this.popupService.open(component, {
-            title,
-            size: 'lg',
+        let title = '';
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return entityListStylingPopup_component; }).then((module) => module.AXPEntityListStylingPopupComponent),
             data: {
-                rules: [...input.rules],
-                lockedRules: [...input.lockedRules],
-                filterDefinitions: [...input.filterDefinitions],
-                targets: [...input.targets],
+                targets: input.targets.map((target) => target.name),
+            },
+            prepare: async () => {
+                title = (await this.translationService.translateAsync('@general:terms.interface.styling.popup-title')) ?? '';
             },
+            show: (component) => this.popupService.open(component, {
+                title,
+                size: 'lg',
+                data: {
+                    rules: [...input.rules],
+                    lockedRules: [...input.lockedRules],
+                    filterDefinitions: [...input.filterDefinitions],
+                    targets: [...input.targets],
+                },
+            }),
         });
         const rules = result?.data?.rules;
         return Array.isArray(rules) ? normalizeEntityListUserStylingRules(rules) : null;
@@ -3176,7 +3204,7 @@ class AXPEntityListStylingPopupComponent extends AXBasePageComponent {
         return fallback ?? [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPEntityListStylingPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPEntityListStylingPopupComponent, isStandalone: true, selector: "axp-entity-list-styling-popup", inputs: { rowEditorContext: { classPropertyName: "rowEditorContext", publicName: "rowEditorContext", isSignal: true, isRequired: false, transformFunction: null }, fieldEditorContext: { classPropertyName: "fieldEditorContext", publicName: "fieldEditorContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEditorContext: "rowEditorContextChange", fieldEditorContext: "fieldEditorContextChange" }, viewQueries: [{ propertyName: "rowLayoutRenderer", first: true, predicate: ["rowLayoutRenderer"], descendants: true, isSignal: true }, { propertyName: "fieldLayoutRenderer", first: true, predicate: ["fieldLayoutRenderer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-entity-list-styling flex flex-col gap-4 p-4\">\n  @if (lockedRules.length) {\n    <!-- ----- Built-in entity rules stay visible and locked ----- -->\n    <p class=\"axp-entity-list-styling__hint\">{{ I18N.builtInHint | translate | async }}</p>\n  }\n\n  <!-- ----- Rules that paint the whole row ----- -->\n  <section class=\"axp-entity-list-styling__section\">\n    <h2 class=\"axp-entity-list-styling__heading\">{{ I18N.rowRules | translate | async }}</h2>\n    @if (lockedRowRules.length) {\n      <ul class=\"axp-entity-list-styling__locked-list\">\n        @for (rule of lockedRowRules; track rule.id) {\n          <li class=\"axp-entity-list-styling__locked\">\n            <code class=\"axp-entity-list-styling__locked-when\">{{ rule.when || (I18N.always | translate | async) }}</code>\n            <span class=\"axp-entity-list-styling__class-chip\" [class]=\"rule.className\">{{ rule.className }}</span>\n          </li>\n        }\n      </ul>\n    }\n    @if (rowRulesLayout(); as layout) {\n      <axp-layout-renderer\n        #rowLayoutRenderer\n        class=\"axp-entity-list-styling__rules\"\n        [layout]=\"layout\"\n        [(context)]=\"rowEditorContext\"\n        mode=\"edit\"\n      />\n    }\n  </section>\n\n  <!-- ----- Rules that paint one column cell ----- -->\n  <section class=\"axp-entity-list-styling__section\">\n    <h2 class=\"axp-entity-list-styling__heading\">{{ I18N.fieldRules | translate | async }}</h2>\n    @if (lockedFieldRules.length) {\n      <ul class=\"axp-entity-list-styling__locked-list\">\n        @for (rule of lockedFieldRules; track rule.id) {\n          <li class=\"axp-entity-list-styling__locked\">\n            <span class=\"axp-entity-list-styling__locked-target\">{{ targetLabel(rule.target) | translate | async }}</span>\n            <code class=\"axp-entity-list-styling__locked-when\">{{ rule.when || (I18N.always | translate | async) }}</code>\n            <span class=\"axp-entity-list-styling__class-chip\" [class]=\"rule.className\">{{ rule.className }}</span>\n          </li>\n        }\n      </ul>\n    }\n    @if (fieldRulesLayout(); as layout) {\n      <axp-layout-renderer\n        #fieldLayoutRenderer\n        class=\"axp-entity-list-styling__rules\"\n        [layout]=\"layout\"\n        [(context)]=\"fieldEditorContext\"\n        mode=\"edit\"\n      />\n    }\n  </section>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"(I18N.cancel | translate | async) ?? ''\" (onClick)=\"handleCancel()\"></ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"(I18N.save | translate | async) ?? ''\"\n      (onClick)=\"handleSave()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: [".axp-entity-list-styling__heading{margin:0;font-size:.95rem;font-weight:700}.axp-entity-list-styling__hint{margin:.25rem 0 0;color:rgb(var(--ax-sys-color-on-lighter-surface));font-size:.85rem}.axp-entity-list-styling__locked-list,.axp-entity-list-styling__rules{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0 0;padding:0;list-style:none}.axp-entity-list-styling__locked{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.75rem;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));border-radius:.5rem;opacity:.9}.axp-entity-list-styling__locked-when{flex:1;min-width:8rem;white-space:pre-wrap;word-break:break-word;font-size:.75rem}.axp-entity-list-styling__locked-target{font-size:.8rem;font-weight:600}.axp-entity-list-styling__class-chip{padding:.15rem .5rem;border-radius:999px;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPEntityListStylingPopupComponent, isStandalone: true, selector: "axp-entity-list-styling-popup", inputs: { rowEditorContext: { classPropertyName: "rowEditorContext", publicName: "rowEditorContext", isSignal: true, isRequired: false, transformFunction: null }, fieldEditorContext: { classPropertyName: "fieldEditorContext", publicName: "fieldEditorContext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEditorContext: "rowEditorContextChange", fieldEditorContext: "fieldEditorContextChange" }, viewQueries: [{ propertyName: "rowLayoutRenderer", first: true, predicate: ["rowLayoutRenderer"], descendants: true, isSignal: true }, { propertyName: "fieldLayoutRenderer", first: true, predicate: ["fieldLayoutRenderer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-entity-list-styling flex flex-col gap-4 p-4\">\n  @if (lockedRules.length) {\n    <!-- ----- Built-in entity rules stay visible and locked ----- -->\n    <p class=\"axp-entity-list-styling__hint\">{{ I18N.builtInHint | translate | async }}</p>\n  }\n\n  <!-- ----- Rules that paint the whole row ----- -->\n  <section class=\"axp-entity-list-styling__section\">\n    <h2 class=\"axp-entity-list-styling__heading\">{{ I18N.rowRules | translate | async }}</h2>\n    @if (lockedRowRules.length) {\n      <ul class=\"axp-entity-list-styling__locked-list\">\n        @for (rule of lockedRowRules; track rule.id) {\n          <li class=\"axp-entity-list-styling__locked\">\n            <code class=\"axp-entity-list-styling__locked-when\">{{ rule.when || (I18N.always | translate | async) }}</code>\n            <span class=\"axp-entity-list-styling__class-chip\" [class]=\"rule.className\">{{ rule.className }}</span>\n          </li>\n        }\n      </ul>\n    }\n    @if (rowRulesLayout(); as layout) {\n      <axp-layout-renderer\n        #rowLayoutRenderer\n        class=\"axp-entity-list-styling__rules\"\n        [layout]=\"layout\"\n        [(context)]=\"rowEditorContext\"\n        mode=\"edit\"\n      />\n    }\n  </section>\n\n  <!-- ----- Rules that paint one column cell ----- -->\n  <section class=\"axp-entity-list-styling__section\">\n    <h2 class=\"axp-entity-list-styling__heading\">{{ I18N.fieldRules | translate | async }}</h2>\n    @if (lockedFieldRules.length) {\n      <ul class=\"axp-entity-list-styling__locked-list\">\n        @for (rule of lockedFieldRules; track rule.id) {\n          <li class=\"axp-entity-list-styling__locked\">\n            <span class=\"axp-entity-list-styling__locked-target\">{{ targetLabel(rule.target) | translate | async }}</span>\n            <code class=\"axp-entity-list-styling__locked-when\">{{ rule.when || (I18N.always | translate | async) }}</code>\n            <span class=\"axp-entity-list-styling__class-chip\" [class]=\"rule.className\">{{ rule.className }}</span>\n          </li>\n        }\n      </ul>\n    }\n    @if (fieldRulesLayout(); as layout) {\n      <axp-layout-renderer\n        #fieldLayoutRenderer\n        class=\"axp-entity-list-styling__rules\"\n        [layout]=\"layout\"\n        [(context)]=\"fieldEditorContext\"\n        mode=\"edit\"\n      />\n    }\n  </section>\n</div>\n\n<ax-footer>\n  <ax-suffix>\n    <ax-button look=\"solid\" [text]=\"(I18N.cancel | translate | async) ?? ''\" (onClick)=\"handleCancel()\"></ax-button>\n    <ax-button\n      look=\"solid\"\n      color=\"primary\"\n      [text]=\"(I18N.save | translate | async) ?? ''\"\n      (onClick)=\"handleSave()\"\n    ></ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: [".axp-entity-list-styling__heading{margin:0;font-size:.95rem;font-weight:700}.axp-entity-list-styling__hint{margin:.25rem 0 0;color:rgb(var(--ax-sys-color-on-lighter-surface));font-size:.85rem}.axp-entity-list-styling__locked-list,.axp-entity-list-styling__rules{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0 0;padding:0;list-style:none}.axp-entity-list-styling__locked{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.75rem;border:1px solid rgb(var(--ax-sys-color-border-lightest-surface));border-radius:.5rem;opacity:.9}.axp-entity-list-styling__locked-when{flex:1;min-width:8rem;white-space:pre-wrap;word-break:break-word;font-size:.75rem}.axp-entity-list-styling__locked-target{font-size:.8rem;font-weight:600}.axp-entity-list-styling__class-chip{padding:.15rem .5rem;border-radius:999px;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPEntityListStylingPopupComponent, decorators: [{
             type: Component,
@@ -3483,7 +3511,7 @@ class AXPConditionBuilderConditionComponent {
         this.removeItem.emit(this.item().id ?? '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderConditionComponent, isStandalone: true, selector: "axp-condition-builder-condition", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, onResolveWidget: { classPropertyName: "onResolveWidget", publicName: "onResolveWidget", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\" [class.__condition-row--comfortable]=\"!compact()\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-lookup\n        mode=\"drop-down-list\"\n        [class.ax-sm]=\"compact()\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"false\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-lookup>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (filterHostKeys().length) {\n        <!-- ----- Operator and value for the selected field ----- -->\n        @for (hostKey of filterHostKeys(); track hostKey) {\n          <axp-widgets-container\n            class=\"__filter-widget-container\"\n            [context]=\"context()\"\n            (onContextChanged)=\"onContextChange($event)\">\n            <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n            </ng-container>\n          </axp-widgets-container>\n        }\n      }\n      <!-- ----- Prompt until a field is chosen ----- -->\n      @else {\n        <div class=\"__filter-placeholder\">\n          <span class=\"__placeholder-text\">{{\n            ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Fill By User (optional) -->\n    @if (showFillByUser()) {\n      <div class=\"__fill-by-user\">\n        <ax-check-box\n          class=\"text-xs\"\n          [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n          (ngModelChange)=\"onFillByUserChange($event)\">\n          <ax-label>\n            {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n          </ax-label>\n        </ax-check-box>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep axp-filter-operations.axp-filter-operations--select{min-width:9rem}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}.__condition-row.__condition-row--comfortable .__field-selector ax-lookup,.__condition-row.__condition-row--comfortable .__filter-placeholder{min-height:var(--ax-sys-size-base, 2.5rem)}.__condition-row.__condition-row--comfortable .__filter-placeholder{justify-content:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:0px}.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-text-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-number-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-date-time-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-lookup,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep .ax-editor-container{min-height:var(--ax-sys-size-base, 2.5rem)}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderConditionComponent, isStandalone: true, selector: "axp-condition-builder-condition", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, onResolveWidget: { classPropertyName: "onResolveWidget", publicName: "onResolveWidget", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\" [class.__condition-row--comfortable]=\"!compact()\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-lookup\n        mode=\"drop-down-list\"\n        [class.ax-sm]=\"compact()\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"false\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-lookup>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (filterHostKeys().length) {\n        <!-- ----- Operator and value for the selected field ----- -->\n        @for (hostKey of filterHostKeys(); track hostKey) {\n          <axp-widgets-container\n            class=\"__filter-widget-container\"\n            [context]=\"context()\"\n            (onContextChanged)=\"onContextChange($event)\">\n            <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n            </ng-container>\n          </axp-widgets-container>\n        }\n      }\n      <!-- ----- Prompt until a field is chosen ----- -->\n      @else {\n        <div class=\"__filter-placeholder\">\n          <span class=\"__placeholder-text\">{{\n            ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n          }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Fill By User (optional) -->\n    @if (showFillByUser()) {\n      <div class=\"__fill-by-user\">\n        <ax-check-box\n          class=\"text-xs\"\n          [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n          (ngModelChange)=\"onFillByUserChange($event)\">\n          <ax-label>\n            {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n          </ax-label>\n        </ax-check-box>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep axp-filter-operations.axp-filter-operations--select{min-width:9rem}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}.__condition-row.__condition-row--comfortable .__field-selector ax-lookup,.__condition-row.__condition-row--comfortable .__filter-placeholder{min-height:var(--ax-sys-size-base, 2.5rem)}.__condition-row.__condition-row--comfortable .__filter-placeholder{justify-content:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:0px}.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-text-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-number-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-date-time-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-lookup,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep .ax-editor-container{min-height:var(--ax-sys-size-base, 2.5rem)}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderConditionComponent, decorators: [{
             type: Component,
@@ -3856,7 +3884,7 @@ class AXPConditionBuilderComponent {
         this.updateValue();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderComponent, isStandalone: true, selector: "axp-condition-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"axp-condition-builder\">\n  <div class=\"__content\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupTemplate\"\n      [ngTemplateOutletContext]=\"{ group: queryData(), isRoot: true }\"\n    ></ng-container>\n  </div>\n</div>\n\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\">\n  <div\n    class=\"__group\"\n    [class.__root-group]=\"isRoot\"\n    [class.__connectors-enabled]=\"(group.filters?.length ?? 0) > 1\"\n  >\n    <div class=\"__group-wrapper\">\n      @if ((group.filters?.length ?? 0) > 1) {\n        <div class=\"__group-connector\">\n          <div class=\"__operator-selector\">\n            <ax-dropdown-button\n              class=\"ax-sm __operator-chip\"\n              [text]=\"getLogicDisplayText(group.logic)\"\n              [mode]=\"'dropdown'\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n            >\n              <ax-button-item-list>\n                @for (op of logicalOperatorsItems; track op.value) {\n                  <ax-button-item\n                    [text]=\"op.text\"\n                    [selected]=\"group.logic === op.value\"\n                    (onClick)=\"updateGroupLogicalOperator(group.id!, op.value)\"\n                  >\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"__conditions-container\"\n        axDropList\n        (dropListDropped)=\"reorderGroupItemsEvent(group.id!, $event)\"\n      >\n        @if ((group.filters?.length ?? 0) === 0) {\n          <div class=\"__group-empty\">\n            <ax-button\n              class=\"ax-sm __add-rule-btn\"\n              [look]=\"'twotone'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addConditionToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button\n              class=\"ax-sm __add-inner-group-btn\"\n              [look]=\"'outline'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addGroupToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        } @else {\n          @for (\n            item of getSortedFilters(group.filters || []);\n            track item.id;\n            let first = $first;\n            let last = $last\n          ) {\n            <div\n              class=\"__condition-item\"\n              axDrag\n              [class.__is-first]=\"first && (group.filters?.length ?? 0) > 1\"\n              [class.__is-last]=\"last && (group.filters?.length ?? 0) > 1\"\n            >\n              <div class=\"__drag-handle\" axDragHandle>\n                <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                @if (item.filters === undefined) {\n                  <axp-condition-builder-condition\n                    [item]=\"item\"\n                    [filterDefinitions]=\"filterDefinitions()\"\n                    [onResolveWidget]=\"resolveDefaultFilterWidget.bind(this)\"\n                    [showFillByUser]=\"showFillByUser()\"\n                    [operationsLook]=\"operationsLook()\"\n                    (itemChange)=\"updateCondition($event)\"\n                    (removeItem)=\"removeItem($event)\"\n                  >\n                  </axp-condition-builder-condition>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ group: item }\"\n                  >\n                  </ng-container>\n                }\n              </div>\n\n              <div class=\"__item-controls\">\n                <ax-button\n                  class=\"ax-sm __icon-btn\"\n                  [look]=\"'blank'\"\n                  [color]=\"'danger'\"\n                  [title]=\"\n                    '@data-management:metadata-definitions.components.query-builder.actions.remove.title'\n                      | translate\n                      | async\n                  \"\n                  (onClick)=\"removeItem(item.id!)\"\n                >\n                  <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n    <!-- <div class=\"__add-condition-link ps-16\">\n      <ax-button class=\"ax-sm __add-condition-btn\" [look]=\"'link'\" [color]=\"'primary'\"\n        [text]=\"'@data-management:metadata-definitions.components.query-builder.actions.add-condition.title' | translate | async\"\n        (onClick)=\"addConditionToGroup(group.id!)\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div> -->\n\n    @if ((group.filters?.length ?? 0) > 0) {\n      <div class=\"__group-actions\">\n        <ax-button\n          class=\"ax-sm __add-rule-btn\"\n          [look]=\"'twotone'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addConditionToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n        <ax-button\n          class=\"ax-sm __add-inner-group-btn\"\n          [look]=\"'outline'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addGroupToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-condition-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-condition-builder .__content{flex:1;overflow:auto;padding:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group{position:relative}.axp-condition-builder .__group.__root-group{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-condition-builder .__group:not(.__root-group){margin-top:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--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);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__group .__group-wrapper{--qb-connector-col: 4.25rem;--qb-conditions-gap: 1rem;display:grid;grid-template-columns:var(--qb-connector-col) 1fr;gap:0 var(--qb-conditions-gap);align-items:stretch;width:100%;min-height:2rem;min-width:0}.axp-condition-builder .__group:not(.__connectors-enabled)>.__group-wrapper{grid-template-columns:1fr}.axp-condition-builder .__group .__group-connector{--qb-operator-gap: .45rem;position:relative;width:var(--qb-connector-col);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:0}.axp-condition-builder .__group .__group-connector:before,.axp-condition-builder .__group .__group-connector:after{content:\"\";position:absolute;left:50%;transform:translate(-50%);top:var(--qb-connector-top, 1.5rem);bottom:var(--qb-connector-bottom, 1.5rem);width:0;border-left:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__group .__group-connector:before{bottom:calc(50% - var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector:after{top:calc(50% + var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector .__operator-selector{position:absolute;top:0;left:50%;z-index:10;margin:0;display:flex;max-width:100%;flex-shrink:0;align-items:center;justify-content:center;transform:translate(-50%);box-sizing:border-box;height:100%}.axp-condition-builder .__group .__group-connector .__operator-selector .__operator-chip{position:relative;z-index:1;max-width:100%;flex-shrink:0;border-radius:var(--radius-md, .375rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));min-width:3.25rem}.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:before,.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:after{content:none}.axp-condition-builder .__group .__conditions-container{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 8);min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-left:0;padding-right:0}.axp-condition-builder .__group .__conditions-container .__group-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);padding:var(--spacing, .25rem);border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}:is(.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving):has(.__group-empty):after{content:\"Drop conditions here\";position:absolute;inset:0;z-index:-1;display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-primary-surface));pointer-events:none}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder){margin-bottom:.375rem}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder):last-child{margin-bottom:0}.axp-condition-builder .__group .__group-actions{margin-top:calc(var(--spacing, .25rem) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-block:calc(var(--spacing, .25rem) * 2.5);border-top:1px solid rgba(var(--ax-sys-color-border-lighter-surface),1);grid-column:1 / -1}.axp-condition-builder .__group .__add-condition-link{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-condition-builder .__condition-item{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 12);cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);-webkit-user-select:none;user-select:none;border-radius:.375rem;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__condition-item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1)}.axp-condition-builder .__condition-item.__is-first:before,.axp-condition-builder .__condition-item.__is-last:before{content:\"\";position:absolute;left:calc(-1 * (var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem)));top:50%;transform:translateY(-50%);width:calc(var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem));height:0;border-top:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__condition-item .__drag-handle{position:relative;z-index:1;display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none));transition:color .15s ease-in-out}.axp-condition-builder .__condition-item .__drag-handle:active{cursor:grabbing}.axp-condition-builder .__condition-item .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-condition-builder .__condition-item .__item-content{position:relative;z-index:1;min-width:0px;flex:1}.axp-condition-builder .__condition-item .__item-controls{position:relative;z-index:1;display:flex;width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing, .25rem)}.axp-condition-builder .__condition-item .__icon-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;width:1.75rem;height:1.75rem}.axp-condition-builder .__condition-item.drag-preview{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px 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);opacity:.9;border-radius:.375rem;border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 12);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-radius:.375rem;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder>*{opacity:0%}.axp-condition-builder .__condition-item.drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-condition-builder .__group:not(.__root-group).drag-preview{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 16);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-dragging{opacity:70%}.axp-condition-builder .__group:not(.__root-group):hover:not(.drag-dragging) .__drag-handle{color:rgba(var(--ax-sys-color-primary-surface))}.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:before,.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:after{content:none}@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;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { 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: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser", "compact", "operationsLook"], outputs: ["itemChange", "removeItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderComponent, isStandalone: true, selector: "axp-condition-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"axp-condition-builder\">\n  <div class=\"__content\">\n    <ng-container\n      [ngTemplateOutlet]=\"groupTemplate\"\n      [ngTemplateOutletContext]=\"{ group: queryData(), isRoot: true }\"\n    ></ng-container>\n  </div>\n</div>\n\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\">\n  <div\n    class=\"__group\"\n    [class.__root-group]=\"isRoot\"\n    [class.__connectors-enabled]=\"(group.filters?.length ?? 0) > 1\"\n  >\n    <div class=\"__group-wrapper\">\n      @if ((group.filters?.length ?? 0) > 1) {\n        <div class=\"__group-connector\">\n          <div class=\"__operator-selector\">\n            <ax-dropdown-button\n              class=\"ax-sm __operator-chip\"\n              [text]=\"getLogicDisplayText(group.logic)\"\n              [mode]=\"'dropdown'\"\n              [look]=\"'solid'\"\n              [color]=\"'primary'\"\n            >\n              <ax-button-item-list>\n                @for (op of logicalOperatorsItems; track op.value) {\n                  <ax-button-item\n                    [text]=\"op.text\"\n                    [selected]=\"group.logic === op.value\"\n                    (onClick)=\"updateGroupLogicalOperator(group.id!, op.value)\"\n                  >\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-button>\n          </div>\n        </div>\n      }\n\n      <div\n        class=\"__conditions-container\"\n        axDropList\n        (dropListDropped)=\"reorderGroupItemsEvent(group.id!, $event)\"\n      >\n        @if ((group.filters?.length ?? 0) === 0) {\n          <div class=\"__group-empty\">\n            <ax-button\n              class=\"ax-sm __add-rule-btn\"\n              [look]=\"'twotone'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addConditionToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n            <ax-button\n              class=\"ax-sm __add-inner-group-btn\"\n              [look]=\"'outline'\"\n              [color]=\"'primary'\"\n              [text]=\"\n                '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n                  | translate\n                  | async\n              \"\n              (onClick)=\"addGroupToGroup(group.id!)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          </div>\n        } @else {\n          @for (\n            item of getSortedFilters(group.filters || []);\n            track item.id;\n            let first = $first;\n            let last = $last\n          ) {\n            <div\n              class=\"__condition-item\"\n              axDrag\n              [class.__is-first]=\"first && (group.filters?.length ?? 0) > 1\"\n              [class.__is-last]=\"last && (group.filters?.length ?? 0) > 1\"\n            >\n              <div class=\"__drag-handle\" axDragHandle>\n                <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n              </div>\n\n              <div class=\"__item-content\">\n                @if (item.filters === undefined) {\n                  <axp-condition-builder-condition\n                    [item]=\"item\"\n                    [filterDefinitions]=\"filterDefinitions()\"\n                    [onResolveWidget]=\"resolveDefaultFilterWidget.bind(this)\"\n                    [showFillByUser]=\"showFillByUser()\"\n                    [operationsLook]=\"operationsLook()\"\n                    (itemChange)=\"updateCondition($event)\"\n                    (removeItem)=\"removeItem($event)\"\n                  >\n                  </axp-condition-builder-condition>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"groupTemplate\"\n                    [ngTemplateOutletContext]=\"{ group: item }\"\n                  >\n                  </ng-container>\n                }\n              </div>\n\n              <div class=\"__item-controls\">\n                <ax-button\n                  class=\"ax-sm __icon-btn\"\n                  [look]=\"'blank'\"\n                  [color]=\"'danger'\"\n                  [title]=\"\n                    '@data-management:metadata-definitions.components.query-builder.actions.remove.title'\n                      | translate\n                      | async\n                  \"\n                  (onClick)=\"removeItem(item.id!)\"\n                >\n                  <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n                </ax-button>\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n    <!-- <div class=\"__add-condition-link ps-16\">\n      <ax-button class=\"ax-sm __add-condition-btn\" [look]=\"'link'\" [color]=\"'primary'\"\n        [text]=\"'@data-management:metadata-definitions.components.query-builder.actions.add-condition.title' | translate | async\"\n        (onClick)=\"addConditionToGroup(group.id!)\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div> -->\n\n    @if ((group.filters?.length ?? 0) > 0) {\n      <div class=\"__group-actions\">\n        <ax-button\n          class=\"ax-sm __add-rule-btn\"\n          [look]=\"'twotone'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addConditionToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n        <ax-button\n          class=\"ax-sm __add-inner-group-btn\"\n          [look]=\"'outline'\"\n          [color]=\"'primary'\"\n          [text]=\"\n            '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n              | translate\n              | async\n          \"\n          (onClick)=\"addGroupToGroup(group.id!)\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-condition-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-condition-builder .__content{flex:1;overflow:auto;padding:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group{position:relative}.axp-condition-builder .__group.__root-group{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-condition-builder .__group:not(.__root-group){margin-top:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--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);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__group .__group-wrapper{--qb-connector-col: 4.25rem;--qb-conditions-gap: 1rem;display:grid;grid-template-columns:var(--qb-connector-col) 1fr;gap:0 var(--qb-conditions-gap);align-items:stretch;width:100%;min-height:2rem;min-width:0}.axp-condition-builder .__group:not(.__connectors-enabled)>.__group-wrapper{grid-template-columns:1fr}.axp-condition-builder .__group .__group-connector{--qb-operator-gap: .45rem;position:relative;width:var(--qb-connector-col);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:0}.axp-condition-builder .__group .__group-connector:before,.axp-condition-builder .__group .__group-connector:after{content:\"\";position:absolute;left:50%;transform:translate(-50%);top:var(--qb-connector-top, 1.5rem);bottom:var(--qb-connector-bottom, 1.5rem);width:0;border-left:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__group .__group-connector:before{bottom:calc(50% - var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector:after{top:calc(50% + var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector .__operator-selector{position:absolute;top:0;left:50%;z-index:10;margin:0;display:flex;max-width:100%;flex-shrink:0;align-items:center;justify-content:center;transform:translate(-50%);box-sizing:border-box;height:100%}.axp-condition-builder .__group .__group-connector .__operator-selector .__operator-chip{position:relative;z-index:1;max-width:100%;flex-shrink:0;border-radius:var(--radius-md, .375rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));min-width:3.25rem}.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:before,.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:after{content:none}.axp-condition-builder .__group .__conditions-container{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 8);min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-left:0;padding-right:0}.axp-condition-builder .__group .__conditions-container .__group-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);padding:var(--spacing, .25rem);border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}:is(.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving):has(.__group-empty):after{content:\"Drop conditions here\";position:absolute;inset:0;z-index:-1;display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-primary-surface));pointer-events:none}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder){margin-bottom:.375rem}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder):last-child{margin-bottom:0}.axp-condition-builder .__group .__group-actions{margin-top:calc(var(--spacing, .25rem) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-block:calc(var(--spacing, .25rem) * 2.5);border-top:1px solid rgba(var(--ax-sys-color-border-lighter-surface),1);grid-column:1 / -1}.axp-condition-builder .__group .__add-condition-link{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-condition-builder .__condition-item{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 12);cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);-webkit-user-select:none;user-select:none;border-radius:.375rem;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__condition-item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1)}.axp-condition-builder .__condition-item.__is-first:before,.axp-condition-builder .__condition-item.__is-last:before{content:\"\";position:absolute;left:calc(-1 * (var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem)));top:50%;transform:translateY(-50%);width:calc(var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem));height:0;border-top:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__condition-item .__drag-handle{position:relative;z-index:1;display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none));transition:color .15s ease-in-out}.axp-condition-builder .__condition-item .__drag-handle:active{cursor:grabbing}.axp-condition-builder .__condition-item .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-condition-builder .__condition-item .__item-content{position:relative;z-index:1;min-width:0px;flex:1}.axp-condition-builder .__condition-item .__item-controls{position:relative;z-index:1;display:flex;width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing, .25rem)}.axp-condition-builder .__condition-item .__icon-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;width:1.75rem;height:1.75rem}.axp-condition-builder .__condition-item.drag-preview{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px 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);opacity:.9;border-radius:.375rem;border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 12);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-radius:.375rem;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder>*{opacity:0%}.axp-condition-builder .__condition-item.drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-condition-builder .__group:not(.__root-group).drag-preview{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 16);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-dragging{opacity:70%}.axp-condition-builder .__group:not(.__root-group):hover:not(.drag-dragging) .__drag-handle{color:rgba(var(--ax-sys-color-primary-surface))}.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:before,.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:after{content:none}@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;}@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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { 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: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser", "compact", "operationsLook"], outputs: ["itemChange", "removeItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderComponent, decorators: [{
             type: Component,
@@ -4038,7 +4066,7 @@ class AXPFileProviderMenuComponent {
         </ax-button-item-list>
       </div>
     </ax-popover>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileProviderIconComponent, selector: "axp-file-provider-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileProviderIconComponent, selector: "axp-file-provider-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileProviderMenuComponent, decorators: [{
             type: Component,
@@ -4154,7 +4182,7 @@ class AXPFileProviderPickerPopupComponent extends AXBasePageComponent {
         this.close({ providerKey: provider.key });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileProviderPickerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFileProviderPickerPopupComponent, isStandalone: true, selector: "axp-file-provider-picker-popup", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-file-provider-picker\">\n  <ax-button-item-list>\n    @for (provider of providers; track provider.key) {\n      <ax-button-item\n        class=\"axp-file-provider-picker__item\"\n        [text]=\"(provider.title | translate | async) ?? ''\"\n        [disabled]=\"provider.disabled\"\n        (onClick)=\"select(provider)\"\n      >\n        <!--->\n        <!-- ----- Provider icon ----- -->\n        @if (provider.icon) {\n          <ax-prefix>\n            <span class=\"axp-file-provider-picker__icon-wrap\">\n              <axp-file-provider-icon [icon]=\"provider.icon\"></axp-file-provider-icon>\n            </span>\n          </ax-prefix>\n        }\n        <!--->\n        <!-- ----- Disabled reason badge ----- -->\n        @if (provider.disabled && provider.disabledBadgeKey) {\n          <ax-suffix>\n            <ax-badge\n              class=\"axp-file-provider-picker__badge\"\n              size=\"sm\"\n              look=\"twotone\"\n              color=\"default\"\n              [text]=\"(provider.disabledBadgeKey | translate | async) ?? ''\"\n            ></ax-badge>\n          </ax-suffix>\n        }\n      </ax-button-item>\n    }\n  </ax-button-item-list>\n</div>\n", styles: [".axp-file-provider-picker{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-file-provider-picker__item{border-radius:var(--radius-xl, .75rem);min-height:3.25rem;padding-block:.7rem;padding-inline:.75rem}.axp-file-provider-picker__icon-wrap{display:flex;width:calc(var(--spacing, .25rem) * 11);height:calc(var(--spacing, .25rem) * 11);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-50));color:rgba(var(--ax-sys-color-primary-600))}.axp-file-provider-picker__icon-wrap ax-icon,.axp-file-provider-picker__icon-wrap axp-file-provider-icon{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));color:currentcolor}.axp-file-provider-picker__badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-popup:has(axp-file-provider-picker-popup) .ax-popup-body-container{overflow-x:hidden!important;padding:.75rem 1rem 1.25rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileProviderIconComponent, selector: "axp-file-provider-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFileProviderPickerPopupComponent, isStandalone: true, selector: "axp-file-provider-picker-popup", usesInheritance: true, ngImport: i0, template: "<div class=\"axp-file-provider-picker\">\n  <ax-button-item-list>\n    @for (provider of providers; track provider.key) {\n      <ax-button-item\n        class=\"axp-file-provider-picker__item\"\n        [text]=\"(provider.title | translate | async) ?? ''\"\n        [disabled]=\"provider.disabled\"\n        (onClick)=\"select(provider)\"\n      >\n        <!--->\n        <!-- ----- Provider icon ----- -->\n        @if (provider.icon) {\n          <ax-prefix>\n            <span class=\"axp-file-provider-picker__icon-wrap\">\n              <axp-file-provider-icon [icon]=\"provider.icon\"></axp-file-provider-icon>\n            </span>\n          </ax-prefix>\n        }\n        <!--->\n        <!-- ----- Disabled reason badge ----- -->\n        @if (provider.disabled && provider.disabledBadgeKey) {\n          <ax-suffix>\n            <ax-badge\n              class=\"axp-file-provider-picker__badge\"\n              size=\"sm\"\n              look=\"twotone\"\n              color=\"default\"\n              [text]=\"(provider.disabledBadgeKey | translate | async) ?? ''\"\n            ></ax-badge>\n          </ax-suffix>\n        }\n      </ax-button-item>\n    }\n  </ax-button-item-list>\n</div>\n", styles: [".axp-file-provider-picker{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem)}.axp-file-provider-picker__item{border-radius:var(--radius-xl, .75rem);min-height:3.25rem;padding-block:.7rem;padding-inline:.75rem}.axp-file-provider-picker__icon-wrap{display:flex;width:calc(var(--spacing, .25rem) * 11);height:calc(var(--spacing, .25rem) * 11);flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);background-color:rgba(var(--ax-sys-color-primary-50));color:rgba(var(--ax-sys-color-primary-600))}.axp-file-provider-picker__icon-wrap ax-icon,.axp-file-provider-picker__icon-wrap axp-file-provider-icon{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));color:currentcolor}.axp-file-provider-picker__badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-popup:has(axp-file-provider-picker-popup) .ax-popup-body-container{overflow-x:hidden!important;padding:.75rem 1rem 1.25rem}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileProviderIconComponent, selector: "axp-file-provider-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileProviderPickerPopupComponent, decorators: [{
             type: Component,
@@ -4193,6 +4221,7 @@ class AXPFileProviderPromptService {
         //#region ----- Services & Dependencies -----
         this.translateService = inject(AXTranslationService);
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
     }
     //#endregion
     //#region ----- Public API -----
@@ -4206,13 +4235,24 @@ class AXPFileProviderPromptService {
         if (items.length === 1 && !options.forcePicker) {
             return items[0].key;
         }
-        const result = await this.popupService.open(AXPFileProviderPickerPopupComponent, {
-            title: await this.translateService.translateAsync(titleKey),
-            size: 'sm',
-            closeButton: true,
+        let title = '';
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve(AXPFileProviderPickerPopupComponent),
             data: {
-                providers: items,
+                titleKey,
+                keys: items.map((item) => item.key),
             },
+            prepare: async () => {
+                title = await this.translateService.translateAsync(titleKey);
+            },
+            show: (component) => this.popupService.open(component, {
+                title,
+                size: 'sm',
+                closeButton: true,
+                data: {
+                    providers: items,
+                },
+            }),
         });
         return resolveSelectedProviderKey(result);
     }
@@ -4802,16 +4842,15 @@ async function pickProfilePhotoImageFile(chooserService, options) {
         icon: provider.icon,
     }));
     const email = options.gravatarEmail?.trim().toLowerCase();
-    const hasGravatarEmail = Boolean(email);
-    const extraItems = [
-        {
-            key: AXP_PROFILE_PHOTO_GRAVATAR_SOURCE_KEY,
-            title: options.gravatarTitleKey ?? '@auth:profile-page.commands.change-photo.sources.gravatar',
-            icon: AXP_GRAVATAR_PROVIDER_LOGO_ICON,
-            disabled: !hasGravatarEmail,
-            disabledBadgeKey: '@auth:profile-page.commands.change-photo.sources.gravatar-disabled-no-email',
-        },
-    ];
+    const extraItems = email
+        ? [
+            {
+                key: AXP_PROFILE_PHOTO_GRAVATAR_SOURCE_KEY,
+                title: options.gravatarTitleKey ?? '@auth:profile-page.commands.change-photo.sources.gravatar',
+                icon: AXP_GRAVATAR_PROVIDER_LOGO_ICON,
+            },
+        ]
+        : [];
     const providerKey = await chooserService.promptFileProviderKey(registered, {
         titleKey: options.pickSourceTitleKey ?? '@layout:components.file-chooser.pick-source',
         extraItems,
@@ -4821,7 +4860,7 @@ async function pickProfilePhotoImageFile(chooserService, options) {
         return { file: null };
     }
     if (providerKey === AXP_PROFILE_PHOTO_GRAVATAR_SOURCE_KEY) {
-        if (!hasGravatarEmail || !email) {
+        if (!email) {
             return { file: null };
         }
         const gravatarFile = await fetchGravatarImageFile(email);
@@ -5594,7 +5633,7 @@ class AXPFileViewerFallbackContentComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileViewerFallbackContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPFileViewerFallbackContentComponent, isStandalone: true, selector: "axp-file-viewer-fallback-content", inputs: { payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "axp-file-viewer-fallback-host" }, ngImport: i0, template: "<div class=\"axp-file-viewer-fallback\" role=\"status\">\n  <div class=\"axp-file-viewer-fallback__icon\" aria-hidden=\"true\">\n    <i class=\"fa-fw {{ fileIcon() }}\"></i>\n  </div>\n\n  <p class=\"axp-file-viewer-fallback__name\" [title]=\"fileName()\">\n    {{ fileName() }}\n  </p>\n\n  <ax-button look=\"outline\" color=\"secondary\" [text]=\"'@general:actions.download.title' | translate | async\" [disabled]=\"downloading()\" (onClick)=\"onDownload($event)\">\n    <ax-prefix>\n      <i class=\"fa-regular fa-download\" aria-hidden=\"true\"></i>\n    </ax-prefix>\n  </ax-button>\n</div>\n", styles: [".axp-file-viewer-fallback-host{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.axp-file-viewer-fallback{display:flex;max-width:28rem;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;text-align:center}.axp-file-viewer-fallback__icon{font-size:3.5rem;line-height:1}.axp-file-viewer-fallback__name{margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPFileViewerFallbackContentComponent, isStandalone: true, selector: "axp-file-viewer-fallback-content", inputs: { payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "axp-file-viewer-fallback-host" }, ngImport: i0, template: "<div class=\"axp-file-viewer-fallback\" role=\"status\">\n  <div class=\"axp-file-viewer-fallback__icon\" aria-hidden=\"true\">\n    <i class=\"fa-fw {{ fileIcon() }}\"></i>\n  </div>\n\n  <p class=\"axp-file-viewer-fallback__name\" [title]=\"fileName()\">\n    {{ fileName() }}\n  </p>\n\n  <ax-button look=\"outline\" color=\"secondary\" [text]=\"'@general:actions.download.title' | translate | async\" [disabled]=\"downloading()\" (onClick)=\"onDownload($event)\">\n    <ax-prefix>\n      <i class=\"fa-regular fa-download\" aria-hidden=\"true\"></i>\n    </ax-prefix>\n  </ax-button>\n</div>\n", styles: [".axp-file-viewer-fallback-host{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.axp-file-viewer-fallback{display:flex;max-width:28rem;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;text-align:center}.axp-file-viewer-fallback__icon{font-size:3.5rem;line-height:1}.axp-file-viewer-fallback__name{margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileViewerFallbackContentComponent, decorators: [{
             type: Component,
@@ -7796,7 +7835,7 @@ class AXPQueryFiltersComponent {
      */
     #focusEffect;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, activeSortPresetName: { classPropertyName: "activeSortPresetName", publicName: "activeSortPresetName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged", onSortPresetSelected: "onSortPresetSelected" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "mobileFilterTrigger", first: true, predicate: ["mobileFilterTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderers", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex w-full min-w-0 items-center gap-2 px-1.5 py-1\"\n  [class.axp-query-filters__bar--toggle-collapsed]=\"deviceService.isSmall() && mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  @if (deviceService.isSmall()) {\n    <!-- ----- Inline search replaces the chip row ----- -->\n    @if (mobileSearchOpen()) {\n      <div id=\"axp-query-filters-mobile-search\" class=\"axp-query-filters__mobile-search\">\n        <ax-search-box\n          class=\"ax-sm\"\n          [value]=\"mobileSearchText()\"\n          [delayTime]=\"300\"\n          [placeholder]=\"('@general:terms.interface.filter.search-placeholder' | translate | async) ?? ''\"\n          (onValueChanged)=\"handleMobileSearchChanged($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <!-- ----- Compact pill row instead of the desktop tag-box toolbar ----- -->\n    @else {\n      <div\n        #mobileFilterTrigger\n        class=\"axp-query-filters__mobile-row\"\n        [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n        (wheel)=\"handleChipsWheel($event)\"\n        (pointerdown)=\"handleChipsPointerDown($event)\"\n        (scroll)=\"handleMobileChipsScroll($event)\"\n      >\n      @for (chip of mobileFilterChips(); track chip.id) {\n        <!--->\n        <!-- ----- Applied filter chip keeps the field title, with a primary border ----- -->\n        @if (chip.kind === 'applied') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--applied\"\n            [class.axp-query-filters__mobile-chip--search]=\"chip.tag.field === 'all'\"\n            (click)=\"handleTagClick(chip.tag, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ mobileChipLabel(chip.tag) }}</span>\n            <!--->\n            <!-- ----- Remove this applied filter ----- -->\n            @if (!chip.tag.readOnly) {\n              <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, chip.tagIndex)\" type=\"button\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            }\n          </div>\n        }\n        <!-- ----- Unused filter field as an outline chip ----- -->\n        @else if (chip.kind === 'available') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--available\"\n            [class.axp-query-filters__mobile-chip--disabled]=\"isFilterDisabled(chip.definition)\"\n            [attr.aria-disabled]=\"isFilterDisabled(chip.definition) ? 'true' : null\"\n            (click)=\"openMobileAvailableFilter(chip.definition, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ chip.definition.title | translate | async }}</span>\n            <ax-icon class=\"fa-light fa-angle-down axp-query-filters__mobile-chip-caret\"></ax-icon>\n          </div>\n        }\n      }\n      @for (preset of sortPresets(); track preset.name) {\n        <!--------------------------------------------------------------->\n        <!-- ----- Sort preset pill in the same row as advance filters ----- -->\n        <div\n          class=\"axp-query-filters__mobile-chip\"\n          [class.axp-query-filters__mobile-chip--applied]=\"isMobileSortPresetActive(preset)\"\n          [class.axp-query-filters__mobile-chip--available]=\"!isMobileSortPresetActive(preset)\"\n          [attr.aria-pressed]=\"isMobileSortPresetActive(preset)\"\n          (click)=\"applyMobileSortPreset(preset, $event)\"\n        >\n          <span class=\"axp-query-filters__mobile-chip-text\">{{ preset.title | translate | async }}</span>\n          <!--------------------------------------------------------------->\n          <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n          @if (preset.icon) {\n            <ax-icon [class]=\"preset.icon + ' axp-query-filters__mobile-chip-caret'\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Descending hint when the first sort is descending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'desc') {\n            <ax-icon class=\"fa-solid fa-arrow-down-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Ascending hint when the first sort is ascending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'asc') {\n            <ax-icon class=\"fa-solid fa-arrow-up-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n        </div>\n      }\n    </div>\n    }\n    <div\n      class=\"axp-query-filters__mode-toggle\"\n      [class.axp-query-filters__mode-toggle--collapsed]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.aria-hidden]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.inert]=\"mobileModeToggleCollapsed() && !mobileSearchOpen() ? true : null\"\n      role=\"tablist\"\n      [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n    >\n      <div class=\"axp-query-filters__mode-toggle-inner\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"!mobileSearchOpen()\"\n          [disabled]=\"isMobileFilterModeLocked()\"\n          [attr.aria-selected]=\"!mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(false)\"\n        >\n          <ax-icon class=\"fa-light fa-filter\"></ax-icon>\n        </button>\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"mobileSearchOpen()\"\n          [disabled]=\"isMobileSearchModeLocked()\"\n          [attr.aria-selected]=\"mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:actions.search.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(true)\"\n        >\n          <ax-icon class=\"fa-light fa-magnifying-glass\"></ax-icon>\n        </button>\n      </div>\n    </div>\n  } @else {\n    <!-- ----- Root AND/OR when more than one visible chip, including All ----- -->\n    @if (isAdvanced() && hasMultipleFilterGroups()) {\n      <ax-button-group\n        class=\"axp-query-filters__logic-toggle ax-sm shrink-0\"\n        [selection]=\"'single'\"\n        [look]=\"'outline'\"\n        [color]=\"'primary'\"\n      >\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-and' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'and'\" (onClick)=\"setRootLogic('and')\"></ax-button-group-item>\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-or' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'or'\" (onClick)=\"setRootLogic('or')\"></ax-button-group-item>\n      </ax-button-group>\n    }\n    <!-- ----- Filter picker when root AND/OR is hidden ----- -->\n    @else {\n      <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"isAdvanced() ? openNewFilterGroup() : openFilterPopover()\" #filterButton [look]=\"'blank'\">\n        <ax-icon class=\"far fa-bars-filter cursor-pointer\"></ax-icon>\n      </ax-button>\n    }\n  }\n  <div\n    class=\"axp-query-filters__chips min-w-0\"\n    [class.flex-1]=\"!deviceService.isSmall()\"\n    [class.hidden]=\"deviceService.isSmall()\"\n    [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n    (click)=\"handleTagBoxClick($event)\"\n    (wheel)=\"handleChipsWheel($event)\"\n    (pointerdown)=\"handleChipsPointerDown($event)\"\n  >\n    <ax-tag-box\n      #tagBoxComponent\n      [ngModel]=\"asyncTags()\"\n      (onValueChanged)=\"handleSelectFilters($event)\"\n      [textField]=\"'query'\"\n      [valueField]=\"'id'\"\n      [readonly]=\"filtersDefinitions().length === 0\"\n      [look]=\"'none'\"\n      [readonlyField]=\"'readOnly'\"\n      [tagTemplate]=\"tagTemplate\"\n      (onKeyDown)=\"handleKeyDown($event)\"\n      [addOnEnter]=\"false\"\n      [allowDuplicateValues]=\"true\"\n      [placeholder]=\"(filtersDefinitions().length === 0 ? '@general:terms.interface.filter.no-filter-definitions' : '@general:terms.interface.filter.placeholder') | translate | async\"\n      #tagBox\n    >\n      <ax-suffix class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-tag-box>\n  </div>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div class=\"axp-query-filters__chip\" [class.axp-query-filters__chip--active]=\"item.id === activeChipId()\" [class.axp-query-filters__chip--search]=\"item.field === 'all'\" (click)=\"handleTagClick(item, $event)\">\n      <!-- ----- Quick search chip keeps a single text label ----- -->\n      @if (item.chipMode === 'search') {\n        <span class=\"axp-query-filters__chip-text\">{{ item.query }}</span>\n      } @else if (item.chipMode === 'summary') {\n        <!-- ----- Summary chip when more than two conditions ----- -->\n        @if (item.titleLabel) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}:</span>\n        }\n        <span class=\"axp-query-filters__chip-text\">{{ item.summaryText }}</span>\n      } @else {\n        <!-- ----- One or two conditions: field + operator + quoted value ----- -->\n        @if (item.titleLabel && !item.mixed) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}</span>\n        }\n        @for (cond of item.chipConditions; track $index) {\n          <!--->\n          <!-- ----- Logic connector between conditions ----- -->\n          @if ($index > 0) {\n            <span class=\"axp-query-filters__chip-logic\">{{ item.logicLabel }}</span>\n          }\n          <!--->\n          <!-- ----- Field title on mixed-field chips ----- -->\n          @if (item.mixed && cond.title) {\n            <span class=\"axp-query-filters__chip-title\">{{ cond.title }}</span>\n          }\n          <span class=\"axp-query-filters__chip-operator\">{{ cond.operator }}</span>\n          <!--->\n          <!-- ----- Quoted value badge when the operator has a display value ----- -->\n          @if (cond.value) {\n            <span class=\"axp-query-filters__chip-value\">'{{ cond.value }}'</span>\n          }\n        }\n      }\n      @if (!item.readOnly) {\n        <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [openOn]=\"'toggle'\" (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\" [adaptivityEnabled]=\"true\" #popover>\n  <div class=\"axp-query-filters__popover md:min-w-72 w-full rounded-md md:max-h-[min(32rem,80vh)] lg:w-[520px] md:overflow-auto\">\n    <axp-widgets-container #widgetsContainer [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"axp-query-filters__editor-header border-b border-border-light px-4 py-2\">\n            <div class=\"flex min-w-0 items-center gap-2 font-semibold\">\n              <!--->\n              <!-- ----- Field icon when the group is a single field ----- -->\n              @if (!isMixedEditingGroup() && activeFilter()?.icon) {\n                <ax-icon class=\"w-5 shrink-0\" [class]=\"'fa-light ' + activeFilter()!.icon\"></ax-icon>\n              }\n              <span class=\"min-w-0 truncate\">\n                {{ isMixedEditingGroup() ? ('@general:terms.interface.filter.filter-group' | translate | async) : ('@general:terms.interface.filter.filter-on' | translate: { params: { title: activeFilterTitle() } } | async) }}\n              </span>\n            </div>\n            <!--->\n            <!-- ----- Condition logic AND/OR stays on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <ax-button-group class=\"axp-query-filters__logic-toggle ax-sm shrink-0\" [selection]=\"'single'\" [look]=\"'outline'\" [color]=\"'primary'\">\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-and-all' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'and'\" (onClick)=\"setEditingLogic('and')\"></ax-button-group-item>\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-or-any' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'or'\" (onClick)=\"setEditingLogic('or')\"></ax-button-group-item>\n              </ax-button-group>\n            }\n          </ax-header>\n          <ax-content class=\"p-4\">\n            @for (condition of editingConditions(); track condition.id; let i = $index) {\n              <!--->\n              <!-- ----- Numbered condition row with the field widget ----- -->\n              @if (i > 0 && !deviceService.isSmall()) {\n                <div class=\"axp-query-filters__logic-split\">\n                  <span class=\"axp-query-filters__logic-split-label\">{{ (editingLogic() === 'or' ? '@general:terms.interface.filter.chip-logic-or' : '@general:terms.interface.filter.chip-logic-and') | translate | async }}</span>\n                </div>\n              }\n              <div class=\"axp-query-filters__condition\">\n                <div class=\"axp-query-filters__condition-head\">\n                  <div class=\"axp-query-filters__condition-heading\">\n                    <!--->\n                    <!-- ----- Field picker for mixed-field groups in advanced mode ----- -->\n                    @if (isAdvanced()) {\n                      <ax-dropdown-button class=\"ax-sm\" [text]=\"(getConditionDefinition(condition.field)?.title | translate | async) ?? ''\" [mode]=\"'dropdown'\" [look]=\"'outline'\">\n                        <ax-button-item-list>\n                          @for (def of advancedFieldOptions(); track def.field) {\n                            <ax-button-item [text]=\"(def.title | translate | async) ?? ''\" [selected]=\"condition.field === def.field\" [disabled]=\"isFilterDisabled(def)\" (onClick)=\"setConditionField(condition.id, def.field ?? '')\"></ax-button-item>\n                          }\n                        </ax-button-item-list>\n                      </ax-dropdown-button>\n                    }\n                    <!--->\n                    <!-- ----- Active operator for this condition ----- -->\n                    @if (getConditionOperatorKey(condition.id); as operatorKey) {\n                      <ax-badge [text]=\"(operatorKey | translate | async) || ''\"></ax-badge>\n                    }\n                  </div>\n                  <button type=\"button\" class=\"axp-query-filters__condition-remove\" (click)=\"handleRemoveCondition(condition.id)\">\n                    <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n                  </button>\n                </div>\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"{\n                    type: getConditionWidget(condition)?.type || 'text-editor',\n                    path: resolveEditingConditionContextField(condition.id),\n                    options: $safeNavigationMigration(getConditionWidget(condition)?.options),\n                  }\"\n                  [mode]=\"'edit'\"\n                ></ng-container>\n              </div>\n            }\n            <!--->\n            <!-- ----- Extra conditions stay on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <button type=\"button\" class=\"axp-query-filters__add-condition\" (click)=\"handleAddCondition()\">\n                <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n                <span>{{ (isAdvanced() ? '@general:terms.interface.filter.add-condition-generic' : '@general:terms.interface.filter.add-condition') | translate: { params: { title: activeFilterTitle() } } | async }}</span>\n              </button>\n            }\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end gap-2 border-border-light w-full px-4 py-2\">\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" [text]=\"'@general:actions.cancel.title' | translate | async\" (onClick)=\"handleCancelFilter()\"></ax-button>\n            <ax-button class=\"ax-sm\" [color]=\"'primary'\" [disabled]=\"!canApplyFilter()\" [text]=\"'@general:terms.interface.filter.apply-filter' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <!-- ----- Field picker when no filter is being edited ----- -->\n        <div class=\"flex flex-col lightest-surface\">\n          <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items border-none\">\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <ax-icon class=\"axp-query-filters__field-icon\" [ngClass]=\"'fa-light ' + field.icon\"></ax-icon>\n                <span class=\"leading-none\">{{ field.title | translate | async }}</span>\n              </div>\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{display:block;width:100%;min-width:0px;overflow:hidden}axp-query-filters>.flex{min-width:0px;flex-wrap:nowrap}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container,axp-query-filters ax-tag-box .ax-editor-container{display:flex;width:100%;min-width:0px;flex-wrap:nowrap;align-items:center;background-color:transparent;min-height:2.25rem}axp-query-filters ax-tag-box .ax-tags-container{display:flex;flex:1 1 0%;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}axp-query-filters>.flex>ax-button button{min-height:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding-block:0}.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container{scrollbar-width:none;-ms-overflow-style:none}:is(.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container)::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__chips{min-width:0px;cursor:grab;overflow-x:auto;overflow-y:hidden}.axp-query-filters__chips.axp-query-filters__chips--panning,.axp-query-filters__chips.axp-query-filters__chips--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}.axp-query-filters__chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap}.axp-query-filters__chip:hover{background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-query-filters__chip--search,.axp-query-filters__chip--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}:is(.axp-query-filters__chip--search,.axp-query-filters__chip--active):hover{background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__chip-title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip-text,.axp-query-filters__chip-operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__chip-logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__chip--active .axp-query-filters__chip-logic,.axp-query-filters__chip--search .axp-query-filters__chip-logic{color:var(--color-white, #fff)}.axp-query-filters__chip-value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.25rem;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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)}.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in srgb,#fff 20%,transparent);color:var(--color-white, #fff)}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in oklab,var(--color-white, #fff) 20%,transparent)}}.axp-query-filters__chip-remove{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;opacity:70%}.axp-query-filters__chip-remove:hover{opacity:100%}.axp-query-filters__mode-toggle{flex:0 0 auto;max-width:6rem;overflow:visible;transition:max-width .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed{max-width:0;pointer-events:none}.axp-query-filters__mode-toggle-inner{position:relative;z-index:10;margin-inline-start:var(--spacing, .25rem);display:inline-flex;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-light-surface));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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);width:max-content;transform:translate(0);transition:transform .32s cubic-bezier(.32,.72,0,1),margin .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{margin-inline-start:0;transform:translate(5rem)}[dir=rtl] .axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{transform:translate(-5rem)}.axp-query-filters__mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));width:1.875rem;height:1.625rem}.axp-query-filters__mode-toggle-btn:first-child{border-start-start-radius:calc(infinity * 1px);border-end-start-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn:last-child{border-start-end-radius:calc(infinity * 1px);border-end-end-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__mode-toggle-btn:disabled:not(.axp-query-filters__mode-toggle-btn--active){cursor:not-allowed;opacity:40%}.axp-query-filters__mobile-search{min-width:0px;flex:1}.axp-query-filters__mobile-search ax-search-box,.axp-query-filters__mobile-search ax-search-box .ax-editor,.axp-query-filters__mobile-search ax-search-box .ax-editor-container,.axp-query-filters__mobile-search ax-search-box .editor-container{min-height:1.875rem;height:1.875rem}.axp-query-filters__mobile-search ax-search-box input{min-height:1.875rem;height:1.875rem;font-size:.8125rem;line-height:1.125rem}.axp-query-filters__mobile-row{display:flex;min-width:0px;flex:1;flex-wrap:nowrap;align-items:center;gap:var(--spacing, .25rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.axp-query-filters__mobile-row::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__mobile-chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);border-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);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-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap}.axp-query-filters__mobile-chip--available{cursor:pointer;background-color:transparent}.axp-query-filters__mobile-chip--disabled{cursor:not-allowed;opacity:50%}.axp-query-filters__mobile-chip--applied{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:transparent;color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__mobile-chip-text{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__mobile-chip-caret{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.axp-query-filters__editor-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-query-filters__logic-toggle ax-button-group-item.ax-state-selected ax-button button,.axp-query-filters__logic-toggle ax-button button.ax-state-selected{background-image:none;box-shadow:none;background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__logic-toggle ax-button>button{min-height:2rem;height:2rem;padding-inline:.5rem;padding-block:0;font-size:.8125rem;line-height:1.125rem;font-weight:600}@media(max-width:600px){axp-query-filters{overflow:hidden}axp-query-filters>.flex{gap:.5rem;padding-block:0;padding-inline:.125rem;overflow:hidden}axp-query-filters>.flex.axp-query-filters__bar--toggle-collapsed{gap:0}.axp-query-filters__logic-toggle{flex-wrap:nowrap}.axp-query-filters__chip{gap:.375rem;padding-inline:.625rem;padding-block:.25rem;font-size:.8125rem}.axp-query-filters__chip-value{max-width:none;font-size:.8125rem}}.axp-query-filters__condition{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-heading{display:flex;min-width:0px;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-title{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-remove{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove:hover{color:rgba(var(--ax-sys-color-danger-surface))}.axp-query-filters__logic-split{position:relative;margin-block:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:center}.axp-query-filters__logic-split:before,.axp-query-filters__logic-split:after{content:\"\";height:1px;flex:1;background-color:rgba(var(--ax-sys-color-border-light-surface))}.axp-query-filters__logic-split-label{margin-inline:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__add-condition{margin-top:calc(var(--spacing, .25rem) * 3);display:inline-flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);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);color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__add-condition:hover{text-decoration-line:underline}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}.axp-query-filters__field-icon{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-tracking{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-font-weight: initial;--tw-leading: initial;--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-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i9.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i11.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i11.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, activeSortPresetName: { classPropertyName: "activeSortPresetName", publicName: "activeSortPresetName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged", onSortPresetSelected: "onSortPresetSelected" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "mobileFilterTrigger", first: true, predicate: ["mobileFilterTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderers", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex w-full min-w-0 items-center gap-2 px-1.5 py-1\"\n  [class.axp-query-filters__bar--toggle-collapsed]=\"deviceService.isSmall() && mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  @if (deviceService.isSmall()) {\n    <!-- ----- Inline search replaces the chip row ----- -->\n    @if (mobileSearchOpen()) {\n      <div id=\"axp-query-filters-mobile-search\" class=\"axp-query-filters__mobile-search\">\n        <ax-search-box\n          class=\"ax-sm\"\n          [value]=\"mobileSearchText()\"\n          [delayTime]=\"300\"\n          [placeholder]=\"('@general:terms.interface.filter.search-placeholder' | translate | async) ?? ''\"\n          (onValueChanged)=\"handleMobileSearchChanged($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <!-- ----- Compact pill row instead of the desktop tag-box toolbar ----- -->\n    @else {\n      <div\n        #mobileFilterTrigger\n        class=\"axp-query-filters__mobile-row\"\n        [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n        (wheel)=\"handleChipsWheel($event)\"\n        (pointerdown)=\"handleChipsPointerDown($event)\"\n        (scroll)=\"handleMobileChipsScroll($event)\"\n      >\n      @for (chip of mobileFilterChips(); track chip.id) {\n        <!--->\n        <!-- ----- Applied filter chip keeps the field title, with a primary border ----- -->\n        @if (chip.kind === 'applied') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--applied\"\n            [class.axp-query-filters__mobile-chip--search]=\"chip.tag.field === 'all'\"\n            (click)=\"handleTagClick(chip.tag, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ mobileChipLabel(chip.tag) }}</span>\n            <!--->\n            <!-- ----- Remove this applied filter ----- -->\n            @if (!chip.tag.readOnly) {\n              <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, chip.tagIndex)\" type=\"button\">\n                <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n              </button>\n            }\n          </div>\n        }\n        <!-- ----- Unused filter field as an outline chip ----- -->\n        @else if (chip.kind === 'available') {\n          <div\n            class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--available\"\n            [class.axp-query-filters__mobile-chip--disabled]=\"isFilterDisabled(chip.definition)\"\n            [attr.aria-disabled]=\"isFilterDisabled(chip.definition) ? 'true' : null\"\n            (click)=\"openMobileAvailableFilter(chip.definition, $event)\"\n          >\n            <span class=\"axp-query-filters__mobile-chip-text\">{{ chip.definition.title | translate | async }}</span>\n            <ax-icon class=\"fa-light fa-angle-down axp-query-filters__mobile-chip-caret\"></ax-icon>\n          </div>\n        }\n      }\n      @for (preset of sortPresets(); track preset.name) {\n        <!--------------------------------------------------------------->\n        <!-- ----- Sort preset pill in the same row as advance filters ----- -->\n        <div\n          class=\"axp-query-filters__mobile-chip\"\n          [class.axp-query-filters__mobile-chip--applied]=\"isMobileSortPresetActive(preset)\"\n          [class.axp-query-filters__mobile-chip--available]=\"!isMobileSortPresetActive(preset)\"\n          [attr.aria-pressed]=\"isMobileSortPresetActive(preset)\"\n          (click)=\"applyMobileSortPreset(preset, $event)\"\n        >\n          <span class=\"axp-query-filters__mobile-chip-text\">{{ preset.title | translate | async }}</span>\n          <!--------------------------------------------------------------->\n          <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n          @if (preset.icon) {\n            <ax-icon [class]=\"preset.icon + ' axp-query-filters__mobile-chip-caret'\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Descending hint when the first sort is descending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'desc') {\n            <ax-icon class=\"fa-solid fa-arrow-down-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n          <!--------------------------------------------------------------->\n          <!-- ----- Ascending hint when the first sort is ascending ----- -->\n          @else if (mobileSortPresetDir(preset) === 'asc') {\n            <ax-icon class=\"fa-solid fa-arrow-up-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n          }\n        </div>\n      }\n    </div>\n    }\n    <div\n      class=\"axp-query-filters__mode-toggle\"\n      [class.axp-query-filters__mode-toggle--collapsed]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.aria-hidden]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n      [attr.inert]=\"mobileModeToggleCollapsed() && !mobileSearchOpen() ? true : null\"\n      role=\"tablist\"\n      [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n    >\n      <div class=\"axp-query-filters__mode-toggle-inner\">\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"!mobileSearchOpen()\"\n          [disabled]=\"isMobileFilterModeLocked()\"\n          [attr.aria-selected]=\"!mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(false)\"\n        >\n          <ax-icon class=\"fa-light fa-filter\"></ax-icon>\n        </button>\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"axp-query-filters__mode-toggle-btn\"\n          [class.axp-query-filters__mode-toggle-btn--active]=\"mobileSearchOpen()\"\n          [disabled]=\"isMobileSearchModeLocked()\"\n          [attr.aria-selected]=\"mobileSearchOpen()\"\n          [attr.aria-label]=\"('@general:actions.search.title' | translate | async) ?? ''\"\n          (click)=\"setMobileSearchOpen(true)\"\n        >\n          <ax-icon class=\"fa-light fa-magnifying-glass\"></ax-icon>\n        </button>\n      </div>\n    </div>\n  } @else {\n    <!-- ----- Root AND/OR when more than one visible chip, including All ----- -->\n    @if (isAdvanced() && hasMultipleFilterGroups()) {\n      <ax-button-group\n        class=\"axp-query-filters__logic-toggle ax-sm shrink-0\"\n        [selection]=\"'single'\"\n        [look]=\"'outline'\"\n        [color]=\"'primary'\"\n      >\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-and' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'and'\" (onClick)=\"setRootLogic('and')\"></ax-button-group-item>\n        <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-or' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'or'\" (onClick)=\"setRootLogic('or')\"></ax-button-group-item>\n      </ax-button-group>\n    }\n    <!-- ----- Filter picker when root AND/OR is hidden ----- -->\n    @else {\n      <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"isAdvanced() ? openNewFilterGroup() : openFilterPopover()\" #filterButton [look]=\"'blank'\">\n        <ax-icon class=\"far fa-bars-filter cursor-pointer\"></ax-icon>\n      </ax-button>\n    }\n  }\n  <div\n    class=\"axp-query-filters__chips min-w-0\"\n    [class.flex-1]=\"!deviceService.isSmall()\"\n    [class.hidden]=\"deviceService.isSmall()\"\n    [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n    (click)=\"handleTagBoxClick($event)\"\n    (wheel)=\"handleChipsWheel($event)\"\n    (pointerdown)=\"handleChipsPointerDown($event)\"\n  >\n    <ax-tag-box\n      #tagBoxComponent\n      [ngModel]=\"asyncTags()\"\n      (onValueChanged)=\"handleSelectFilters($event)\"\n      [textField]=\"'query'\"\n      [valueField]=\"'id'\"\n      [readonly]=\"filtersDefinitions().length === 0\"\n      [look]=\"'none'\"\n      [readonlyField]=\"'readOnly'\"\n      [tagTemplate]=\"tagTemplate\"\n      (onKeyDown)=\"handleKeyDown($event)\"\n      [addOnEnter]=\"false\"\n      [allowDuplicateValues]=\"true\"\n      [placeholder]=\"(filtersDefinitions().length === 0 ? '@general:terms.interface.filter.no-filter-definitions' : '@general:terms.interface.filter.placeholder') | translate | async\"\n      #tagBox\n    >\n      <ax-suffix class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n        <ax-kbd look=\"blank\">\n          <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n        </ax-kbd>\n      </ax-suffix>\n    </ax-tag-box>\n  </div>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div class=\"axp-query-filters__chip\" [class.axp-query-filters__chip--active]=\"item.id === activeChipId()\" [class.axp-query-filters__chip--search]=\"item.field === 'all'\" (click)=\"handleTagClick(item, $event)\">\n      <!-- ----- Quick search chip keeps a single text label ----- -->\n      @if (item.chipMode === 'search') {\n        <span class=\"axp-query-filters__chip-text\">{{ item.query }}</span>\n      } @else if (item.chipMode === 'summary') {\n        <!-- ----- Summary chip when more than two conditions ----- -->\n        @if (item.titleLabel) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}:</span>\n        }\n        <span class=\"axp-query-filters__chip-text\">{{ item.summaryText }}</span>\n      } @else {\n        <!-- ----- One or two conditions: field + operator + quoted value ----- -->\n        @if (item.titleLabel && !item.mixed) {\n          <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}</span>\n        }\n        @for (cond of item.chipConditions; track $index) {\n          <!--->\n          <!-- ----- Logic connector between conditions ----- -->\n          @if ($index > 0) {\n            <span class=\"axp-query-filters__chip-logic\">{{ item.logicLabel }}</span>\n          }\n          <!--->\n          <!-- ----- Field title on mixed-field chips ----- -->\n          @if (item.mixed && cond.title) {\n            <span class=\"axp-query-filters__chip-title\">{{ cond.title }}</span>\n          }\n          <span class=\"axp-query-filters__chip-operator\">{{ cond.operator }}</span>\n          <!--->\n          <!-- ----- Quoted value badge when the operator has a display value ----- -->\n          @if (cond.value) {\n            <span class=\"axp-query-filters__chip-value\">'{{ cond.value }}'</span>\n          }\n        }\n      }\n      @if (!item.readOnly) {\n        <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n          <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n        </button>\n      }\n    </div>\n  </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [openOn]=\"'toggle'\" (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\" [adaptivityEnabled]=\"true\" #popover>\n  <div class=\"axp-query-filters__popover md:min-w-72 w-full rounded-md md:max-h-[min(32rem,80vh)] lg:w-[520px] md:overflow-auto\">\n    <axp-widgets-container #widgetsContainer [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"axp-query-filters__editor-header border-b border-border-light px-4 py-2\">\n            <div class=\"flex min-w-0 items-center gap-2 font-semibold\">\n              <!--->\n              <!-- ----- Field icon when the group is a single field ----- -->\n              @if (!isMixedEditingGroup() && activeFilter()?.icon) {\n                <ax-icon class=\"w-5 shrink-0\" [class]=\"'fa-light ' + activeFilter()!.icon\"></ax-icon>\n              }\n              <span class=\"min-w-0 truncate\">\n                {{ isMixedEditingGroup() ? ('@general:terms.interface.filter.filter-group' | translate | async) : ('@general:terms.interface.filter.filter-on' | translate: { params: { title: activeFilterTitle() } } | async) }}\n              </span>\n            </div>\n            <!--->\n            <!-- ----- Condition logic AND/OR stays on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <ax-button-group class=\"axp-query-filters__logic-toggle ax-sm shrink-0\" [selection]=\"'single'\" [look]=\"'outline'\" [color]=\"'primary'\">\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-and-all' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'and'\" (onClick)=\"setEditingLogic('and')\"></ax-button-group-item>\n                <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-or-any' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'or'\" (onClick)=\"setEditingLogic('or')\"></ax-button-group-item>\n              </ax-button-group>\n            }\n          </ax-header>\n          <ax-content class=\"p-4\">\n            @for (condition of editingConditions(); track condition.id; let i = $index) {\n              <!--->\n              <!-- ----- Numbered condition row with the field widget ----- -->\n              @if (i > 0 && !deviceService.isSmall()) {\n                <div class=\"axp-query-filters__logic-split\">\n                  <span class=\"axp-query-filters__logic-split-label\">{{ (editingLogic() === 'or' ? '@general:terms.interface.filter.chip-logic-or' : '@general:terms.interface.filter.chip-logic-and') | translate | async }}</span>\n                </div>\n              }\n              <div class=\"axp-query-filters__condition\">\n                <div class=\"axp-query-filters__condition-head\">\n                  <div class=\"axp-query-filters__condition-heading\">\n                    <!--->\n                    <!-- ----- Field picker for mixed-field groups in advanced mode ----- -->\n                    @if (isAdvanced()) {\n                      <ax-dropdown-button class=\"ax-sm\" [text]=\"(getConditionDefinition(condition.field)?.title | translate | async) ?? ''\" [mode]=\"'dropdown'\" [look]=\"'outline'\">\n                        <ax-button-item-list>\n                          @for (def of advancedFieldOptions(); track def.field) {\n                            <ax-button-item [text]=\"(def.title | translate | async) ?? ''\" [selected]=\"condition.field === def.field\" [disabled]=\"isFilterDisabled(def)\" (onClick)=\"setConditionField(condition.id, def.field ?? '')\"></ax-button-item>\n                          }\n                        </ax-button-item-list>\n                      </ax-dropdown-button>\n                    }\n                    <!--->\n                    <!-- ----- Active operator for this condition ----- -->\n                    @if (getConditionOperatorKey(condition.id); as operatorKey) {\n                      <ax-badge [text]=\"(operatorKey | translate | async) || ''\"></ax-badge>\n                    }\n                  </div>\n                  <button type=\"button\" class=\"axp-query-filters__condition-remove\" (click)=\"handleRemoveCondition(condition.id)\">\n                    <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n                  </button>\n                </div>\n                <ng-container\n                  axp-widget-renderer\n                  [node]=\"{\n                    type: getConditionWidget(condition)?.type || 'text-editor',\n                    path: resolveEditingConditionContextField(condition.id),\n                    options: $safeNavigationMigration(getConditionWidget(condition)?.options),\n                  }\"\n                  [mode]=\"'edit'\"\n                ></ng-container>\n              </div>\n            }\n            <!--->\n            <!-- ----- Extra conditions stay on desktop ----- -->\n            @if (!deviceService.isSmall()) {\n              <button type=\"button\" class=\"axp-query-filters__add-condition\" (click)=\"handleAddCondition()\">\n                <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n                <span>{{ (isAdvanced() ? '@general:terms.interface.filter.add-condition-generic' : '@general:terms.interface.filter.add-condition') | translate: { params: { title: activeFilterTitle() } } | async }}</span>\n              </button>\n            }\n          </ax-content>\n          <ax-footer class=\"border-t flex justify-end gap-2 border-border-light w-full px-4 py-2\">\n            <ax-button class=\"ax-sm\" [look]=\"'blank'\" [text]=\"'@general:actions.cancel.title' | translate | async\" (onClick)=\"handleCancelFilter()\"></ax-button>\n            <ax-button class=\"ax-sm\" [color]=\"'primary'\" [disabled]=\"!canApplyFilter()\" [text]=\"'@general:terms.interface.filter.apply-filter' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <!-- ----- Field picker when no filter is being edited ----- -->\n        <div class=\"flex flex-col lightest-surface\">\n          <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items border-none\">\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <ax-icon class=\"axp-query-filters__field-icon\" [ngClass]=\"'fa-light ' + field.icon\"></ax-icon>\n                <span class=\"leading-none\">{{ field.title | translate | async }}</span>\n              </div>\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{display:block;width:100%;min-width:0px;overflow:hidden}axp-query-filters>.flex{min-width:0px;flex-wrap:nowrap}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container,axp-query-filters ax-tag-box .ax-editor-container{display:flex;width:100%;min-width:0px;flex-wrap:nowrap;align-items:center;background-color:transparent;min-height:2.25rem}axp-query-filters ax-tag-box .ax-tags-container{display:flex;flex:1 1 0%;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}axp-query-filters>.flex>ax-button button{min-height:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding-block:0}.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container{scrollbar-width:none;-ms-overflow-style:none}:is(.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container)::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__chips{min-width:0px;cursor:grab;overflow-x:auto;overflow-y:hidden}.axp-query-filters__chips.axp-query-filters__chips--panning,.axp-query-filters__chips.axp-query-filters__chips--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}.axp-query-filters__chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap}.axp-query-filters__chip:hover{background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-query-filters__chip--search,.axp-query-filters__chip--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}:is(.axp-query-filters__chip--search,.axp-query-filters__chip--active):hover{background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__chip-title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip-text,.axp-query-filters__chip-operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__chip-logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__chip--active .axp-query-filters__chip-logic,.axp-query-filters__chip--search .axp-query-filters__chip-logic{color:var(--color-white, #fff)}.axp-query-filters__chip-value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.25rem;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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)}.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in srgb,#fff 20%,transparent);color:var(--color-white, #fff)}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in oklab,var(--color-white, #fff) 20%,transparent)}}.axp-query-filters__chip-remove{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;opacity:70%}.axp-query-filters__chip-remove:hover{opacity:100%}.axp-query-filters__mode-toggle{flex:0 0 auto;max-width:6rem;overflow:visible;transition:max-width .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed{max-width:0;pointer-events:none}.axp-query-filters__mode-toggle-inner{position:relative;z-index:10;margin-inline-start:var(--spacing, .25rem);display:inline-flex;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-light-surface));--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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);width:max-content;transform:translate(0);transition:transform .32s cubic-bezier(.32,.72,0,1),margin .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{margin-inline-start:0;transform:translate(5rem)}[dir=rtl] .axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{transform:translate(-5rem)}.axp-query-filters__mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));width:1.875rem;height:1.625rem}.axp-query-filters__mode-toggle-btn:first-child{border-start-start-radius:calc(infinity * 1px);border-end-start-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn:last-child{border-start-end-radius:calc(infinity * 1px);border-end-end-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__mode-toggle-btn:disabled:not(.axp-query-filters__mode-toggle-btn--active){cursor:not-allowed;opacity:40%}.axp-query-filters__mobile-search{min-width:0px;flex:1}.axp-query-filters__mobile-search ax-search-box,.axp-query-filters__mobile-search ax-search-box .ax-editor,.axp-query-filters__mobile-search ax-search-box .ax-editor-container,.axp-query-filters__mobile-search ax-search-box .editor-container{min-height:1.875rem;height:1.875rem}.axp-query-filters__mobile-search ax-search-box input{min-height:1.875rem;height:1.875rem;font-size:.8125rem;line-height:1.125rem}.axp-query-filters__mobile-row{display:flex;min-width:0px;flex:1;flex-wrap:nowrap;align-items:center;gap:var(--spacing, .25rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.axp-query-filters__mobile-row::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__mobile-chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);border-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);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-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap}.axp-query-filters__mobile-chip--available{cursor:pointer;background-color:transparent}.axp-query-filters__mobile-chip--disabled{cursor:not-allowed;opacity:50%}.axp-query-filters__mobile-chip--applied{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:transparent;color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__mobile-chip-text{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__mobile-chip-caret{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.axp-query-filters__editor-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-query-filters__logic-toggle ax-button-group-item.ax-state-selected ax-button button,.axp-query-filters__logic-toggle ax-button button.ax-state-selected{background-image:none;box-shadow:none;background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__logic-toggle ax-button>button{min-height:2rem;height:2rem;padding-inline:.5rem;padding-block:0;font-size:.8125rem;line-height:1.125rem;font-weight:600}@media(max-width:600px){axp-query-filters{overflow:hidden}axp-query-filters>.flex{gap:.5rem;padding-block:0;padding-inline:.125rem;overflow:hidden}axp-query-filters>.flex.axp-query-filters__bar--toggle-collapsed{gap:0}.axp-query-filters__logic-toggle{flex-wrap:nowrap}.axp-query-filters__chip{gap:.375rem;padding-inline:.625rem;padding-block:.25rem;font-size:.8125rem}.axp-query-filters__chip-value{max-width:none;font-size:.8125rem}}.axp-query-filters__condition{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-heading{display:flex;min-width:0px;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-title{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-remove{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove:hover{color:rgba(var(--ax-sys-color-danger-surface))}.axp-query-filters__logic-split{position:relative;margin-block:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:center}.axp-query-filters__logic-split:before,.axp-query-filters__logic-split:after{content:\"\";height:1px;flex:1;background-color:rgba(var(--ax-sys-color-border-light-surface))}.axp-query-filters__logic-split-label{margin-inline:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__add-condition{margin-top:calc(var(--spacing, .25rem) * 3);display:inline-flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);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);color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__add-condition:hover{text-decoration-line:underline}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}.axp-query-filters__field-icon{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-tracking{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-font-weight: initial;--tw-leading: initial;--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-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i9.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i11.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i11.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -7886,7 +7925,7 @@ class AXPPreloadFiltersComponent {
         return Array.isArray(validations) && validations.some((v) => v['rule'] === 'required');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPreloadFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPPreloadFiltersComponent, isStandalone: true, selector: "axp-preload-filters", inputs: { filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: true, transformFunction: null }, showAllButton: { classPropertyName: "showAllButton", publicName: "showAllButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", showAll: "showAll" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 items-center justify-center h-full\">\n  <div class=\"card min-w-96 flex flex-col items-center gap-2 p-6\">\n    <div class=\"header\">\n      <img\n        width=\"180\"\n        src=\"/assets/images/ui/filter.svg\"\n        [attr.alt]=\"('@general:messages.preload-filters.filter-icon-alt' | translate | async) ?? ''\"\n      />\n    </div>\n    <div class=\"py-6\">\n      <div class=\"mb-6\">\n        <h4 class=\"text-lg font-medium\">\n          {{ '@general:messages.preload-filters.title' | translate | async }}\n        </h4>\n        <span class=\"text-sm text-gray-400\">\n          {{ '@general:messages.preload-filters.description' | translate | async }}\n        </span>\n      </div>\n      <axp-widgets-container [context]=\"context\" (onContextChanged)=\"onContextChanged($event)\">\n        <ax-form #form (keydown)=\"onFormKeyDown($event, form)\">\n          @for (filterDef of filterDefinitions(); track $index) {\n            <ax-form-field class=\"mt-2\">\n              <ax-label [required]=\"isFieldRequired(filterDef)\">\n                {{ filterDef?.title ?? '' | translate | async }}\n              </ax-label>\n              <ng-container\n                #widgetRenderer=\"widgetRenderer\"\n                axp-widget-renderer\n                [node]=\"{\n                  type: filterDef?.widget?.type || 'text-editor',\n                  path: $safeNavigationMigration(filterDef?.field),\n                  options: $safeNavigationMigration(filterDef?.widget?.options),\n                }\"\n                [mode]=\"'edit'\"\n              >\n              </ng-container>\n            </ax-form-field>\n          }\n          <div class=\"mt-6\">\n            <ax-button\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApply(form)\"\n              [color]=\"'primary'\"\n              class=\"w-full\"\n            ></ax-button>\n            @if (showAllButton()) {\n              <ax-button\n                class=\"w-full mt-4 text-primary\"\n                [look]=\"'blank'\"\n                [text]=\"'@general:actions.show.all.title' | translate | async\"\n                (onClick)=\"handleShowAll($event)\"\n              ></ax-button>\n            }\n          </div>\n        </ax-form>\n      </axp-widgets-container>\n    </div>\n  </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPPreloadFiltersComponent, isStandalone: true, selector: "axp-preload-filters", inputs: { filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: true, transformFunction: null }, showAllButton: { classPropertyName: "showAllButton", publicName: "showAllButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", showAll: "showAll" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 items-center justify-center h-full\">\n  <div class=\"card min-w-96 flex flex-col items-center gap-2 p-6\">\n    <div class=\"header\">\n      <img\n        width=\"180\"\n        src=\"/assets/images/ui/filter.svg\"\n        [attr.alt]=\"('@general:messages.preload-filters.filter-icon-alt' | translate | async) ?? ''\"\n      />\n    </div>\n    <div class=\"py-6\">\n      <div class=\"mb-6\">\n        <h4 class=\"text-lg font-medium\">\n          {{ '@general:messages.preload-filters.title' | translate | async }}\n        </h4>\n        <span class=\"text-sm text-gray-400\">\n          {{ '@general:messages.preload-filters.description' | translate | async }}\n        </span>\n      </div>\n      <axp-widgets-container [context]=\"context\" (onContextChanged)=\"onContextChanged($event)\">\n        <ax-form #form (keydown)=\"onFormKeyDown($event, form)\">\n          @for (filterDef of filterDefinitions(); track $index) {\n            <ax-form-field class=\"mt-2\">\n              <ax-label [required]=\"isFieldRequired(filterDef)\">\n                {{ filterDef?.title ?? '' | translate | async }}\n              </ax-label>\n              <ng-container\n                #widgetRenderer=\"widgetRenderer\"\n                axp-widget-renderer\n                [node]=\"{\n                  type: filterDef?.widget?.type || 'text-editor',\n                  path: $safeNavigationMigration(filterDef?.field),\n                  options: $safeNavigationMigration(filterDef?.widget?.options),\n                }\"\n                [mode]=\"'edit'\"\n              >\n              </ng-container>\n            </ax-form-field>\n          }\n          <div class=\"mt-6\">\n            <ax-button\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApply(form)\"\n              [color]=\"'primary'\"\n              class=\"w-full\"\n            ></ax-button>\n            @if (showAllButton()) {\n              <ax-button\n                class=\"w-full mt-4 text-primary\"\n                [look]=\"'blank'\"\n                [text]=\"'@general:actions.show.all.title' | translate | async\"\n                (onClick)=\"handleShowAll($event)\"\n              ></ax-button>\n            }\n          </div>\n        </ax-form>\n      </axp-widgets-container>\n    </div>\n  </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPreloadFiltersComponent, decorators: [{
             type: Component,
@@ -7999,7 +8038,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPImageEditorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axp-image-editor-popup" }, viewQueries: [{ propertyName: "imageEditorRef", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }, { propertyName: "cropToolRef", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex justify-center w-full p-2\">\n  <ax-image-editor-container\n    class=\"w-full\"\n    #container\n    [look]=\"look()\"\n    (onValueChanged)=\"handleValueChanged($event)\"\n  >\n    <ax-image-editor-view [src]=\"url() || ''\"></ax-image-editor-view>\n\n    <ax-footer>\n      <ax-image-editor-tools-bar [hidden]=\"true\" [active]=\"cropTool\">\n        <ax-image-editor-crop\n          [size]=\"cropSize()\"\n          #cropTool\n          [aspectRatio]=\"cropAspectRatioBinding()\"\n        ></ax-image-editor-crop>\n      </ax-image-editor-tools-bar>\n    </ax-footer>\n  </ax-image-editor-container>\n</div>\n\n<ax-footer class=\"axp-image-editor-popup__actions flex justify-end gap-2\">\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      (onClick)=\"handleCancel()\"\n      [text]=\"'@general:actions.cancel.title' | translate | async\"\n    >\n    </ax-button>\n    <ax-button\n      color=\"primary\"\n      look=\"solid\"\n      (onClick)=\"handleSave()\"\n      [text]=\"'@general:actions.save.title' | translate | async\"\n    >\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-image-editor-popup{display:block;width:100%}axp-image-editor-popup ax-image-editor-view>canvas{max-height:65vh;width:auto!important;height:auto!important}axp-image-editor-popup ax-image-editor-container{width:100%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$6.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "cropperSize", "src"] }, { kind: "component", type: i1$6.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$6.AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: i1$6.AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axp-image-editor-popup" }, viewQueries: [{ propertyName: "imageEditorRef", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }, { propertyName: "cropToolRef", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex justify-center w-full p-2\">\n  <ax-image-editor-container\n    class=\"w-full\"\n    #container\n    [look]=\"look()\"\n    (onValueChanged)=\"handleValueChanged($event)\"\n  >\n    <ax-image-editor-view [src]=\"url() || ''\"></ax-image-editor-view>\n\n    <ax-footer>\n      <ax-image-editor-tools-bar [hidden]=\"true\" [active]=\"cropTool\">\n        <ax-image-editor-crop\n          [size]=\"cropSize()\"\n          #cropTool\n          [aspectRatio]=\"cropAspectRatioBinding()\"\n        ></ax-image-editor-crop>\n      </ax-image-editor-tools-bar>\n    </ax-footer>\n  </ax-image-editor-container>\n</div>\n\n<ax-footer class=\"axp-image-editor-popup__actions flex justify-end gap-2\">\n  <ax-suffix>\n    <ax-button\n      look=\"solid\"\n      (onClick)=\"handleCancel()\"\n      [text]=\"'@general:actions.cancel.title' | translate | async\"\n    >\n    </ax-button>\n    <ax-button\n      color=\"primary\"\n      look=\"solid\"\n      (onClick)=\"handleSave()\"\n      [text]=\"'@general:actions.save.title' | translate | async\"\n    >\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-image-editor-popup{display:block;width:100%}axp-image-editor-popup ax-image-editor-view>canvas{max-height:65vh;width:auto!important;height:auto!important}axp-image-editor-popup ax-image-editor-container{width:100%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$7.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "cropperSize", "src"] }, { kind: "component", type: i1$7.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$7.AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: i1$7.AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
             type: Component,
@@ -8023,22 +8062,31 @@ var imageEditorPopup_component = /*#__PURE__*/Object.freeze({
 class AXPImageEditorService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
     }
     async open(options) {
         if (!options?.image) {
             return null;
         }
         const square = options.square === true;
-        const component = await Promise.resolve().then(function () { return imageEditorPopup_component; }).then((m) => m.AXPImageEditorPopupComponent);
-        const result = await this.popupService.open(component, {
-            title: options?.title ?? '@platform-layout-widgets:widgets.image.dialog.editor-title',
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return imageEditorPopup_component; }).then((m) => m.AXPImageEditorPopupComponent),
             data: {
-                image: signal(options.image),
-                showHistory: signal(options.showHistory ?? true),
-                look: signal(options.look ?? 'solid'),
-                aspectRatio: signal(square ? '1:1' : options.aspectRatio),
-                square: signal(square),
+                title: options.title ?? null,
+                square,
+                aspectRatio: square ? '1:1' : (options.aspectRatio ?? null),
+                look: options.look ?? 'solid',
             },
+            show: (component) => this.popupService.open(component, {
+                title: options?.title ?? '@platform-layout-widgets:widgets.image.dialog.editor-title',
+                data: {
+                    image: signal(options.image),
+                    showHistory: signal(options.showHistory ?? true),
+                    look: signal(options.look ?? 'solid'),
+                    aspectRatio: signal(square ? '1:1' : options.aspectRatio),
+                    square: signal(square),
+                },
+            }),
         });
         return result?.data?.data?.image ?? null;
     }
@@ -8481,6 +8529,7 @@ class AXPPropertyViewerComponent {
         this.groupCollapsedStates = new Map();
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.form = viewChild(AXFormComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
         this.widgetsContainer = viewChild('widgetsContainer', /* @ts-ignore */
@@ -8746,11 +8795,14 @@ class AXPPropertyViewerComponent {
         const expressionPath = this.getExpressionPath(prop);
         const raw = get(this.context(), expressionPath);
         const currentValue = typeof raw === 'string' ? raw : '';
-        const { AXPBindingExpressionEditorPopupComponent } = await import('./acorex-platform-framework-client-layout-components-binding-expression-editor-popup.component-BqPaHKPM.mjs');
-        const result = await this.popupService.open(AXPBindingExpressionEditorPopupComponent, {
-            title: '@general:widgets.triggers.edit-binding-expression',
-            size: 'lg',
-            data: { initialValue: signal(currentValue) },
+        const result = await this.dialogOpener.openPopup({
+            load: () => import('./acorex-platform-framework-client-layout-components-binding-expression-editor-popup.component-CyZpdazq.mjs').then((module) => module.AXPBindingExpressionEditorPopupComponent),
+            data: { expressionPath, initialValue: currentValue },
+            show: (component) => this.popupService.open(component, {
+                title: '@general:widgets.triggers.edit-binding-expression',
+                size: 'lg',
+                data: { initialValue: signal(currentValue) },
+            }),
         });
         if (result?.data?.value !== undefined) {
             const next = cloneDeep(this.context());
@@ -8762,7 +8814,7 @@ class AXPPropertyViewerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, bindingExpressionEditorMode: { classPropertyName: "bindingExpressionEditorMode", publicName: "bindingExpressionEditorMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: ["widgetsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n  <axp-widgets-container\n    #widgetsContainer\n    [context]=\"context()\"\n    (onContextChanged)=\"handleContextChange($event)\"\n  >\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n      <div class=\"flex flex-col gap-2 py-2\">\n        <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n        <div class=\"flex items-center gap-2 w-full\">\n          @if (prop.showLabel !== false) {\n            @if (translateTitle) {\n              <span class=\"font-semibold flex-1 min-w-0\">{{ prop.title | translate | async }}</span>\n            } @else {\n              <span class=\"font-semibold flex-1 min-w-0\">{{ prop.title }}</span>\n            }\n          }\n          @if (prop.binding?.enabled) {\n            <div class=\"flex gap-1 shrink-0 ax-sm\">\n              <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" [look]=\"'twotone'\" [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"shrink-0\" (selectedChange)=\"setExpressionMode(prop, $event)\">\n                @if (isExpressionMode(prop)) {\n                  <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                } @else {\n                  <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                }\n              </ax-button>\n            </div>\n          }\n        </div>\n        <!-- Property content: expression editor (inline or popup) or widget renderer (value mode) -->\n        @if (prop.binding?.enabled && isExpressionMode(prop)) {\n          <!--->\n          <!-- ----- Inline Monaco editor \u2014 loaded on first expression-mode property ----- -->\n          @if (bindingExpressionEditorMode() === 'inline') {\n            <!--->\n            <!-- ----- Render the editor after the dynamic import resolves ----- -->\n            @if (inlineCodeEditor(); as editor) {\n              <ng-container\n                *ngComponentOutlet=\"\n                  editor;\n                  inputs: {\n                    value: getBindingExpressionValue(prop),\n                    onValueChange: bindingExpressionChangeHandler(prop),\n                  }\n                \"\n              />\n            }\n          }\n          <!-- ----- Open the expression editor in a popup instead of inline ----- -->\n          @else {\n            <ax-button\n              look=\"twotone\"\n              color=\"primary\"\n              size=\"sm\"\n              class=\"w-full\"\n              [text]=\"'@general:widgets.triggers.open-editor' | translate | async\"\n              (onClick)=\"openBindingEditor(prop)\"\n              [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n        }\n        <!-- ----- Render the widget editor when the property is in value mode ----- -->\n        @else if (prop.schema.interface) {\n          <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\"></ng-container>\n        }\n      </div>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Advanced mode: tabs + accordion groups -->\n    @if (mode() === 'advanced') {\n      <div class=\"flex flex-col\">\n        @if (tabs().length > 1) {\n          <div class=\"pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n              @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"(tab.title | translate | async) ?? ''\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n              }\n            </ax-tabs>\n          </div>\n        }\n        <div class=\"flex-1 overflow-auto\">\n          <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n            @for (group of groups(); track $index) {\n              <ax-accordion-item class=\"mb-0!\" [caption]=\"(group.title | translate | async) ?? ''\" [isCollapsed]=\"group.isCollapsed\" (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                <div class=\"flex flex-col\">\n                  @for (p of group.props; track $index) {\n                    @if (isPropertyVisible(p)) {\n                      <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\"></ng-container>\n                    }\n                  }\n                </div>\n              </ax-accordion-item>\n            }\n          </ax-accordion-group>\n        </div>\n      </div>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Simple mode: flat list of properties with padding -->\n    @else {\n      <div class=\"flex flex-col p-4 gap-4\">\n        @for (group of groups(); track $index) {\n          @for (p of group.props; track $index) {\n            @if (isPropertyVisible(p)) {\n              <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\"></ng-container>\n            }\n          }\n        }\n      </div>\n    }\n    <!-- #endregion -->\n  </axp-widgets-container>\n</ax-form>\n", styles: ["@layer properties;axp-property-viewer ax-accordion-item.ax-flat{border-bottom-width:0}axp-property-viewer ax-accordion-item .ax-accordion-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$6.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$6.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, bindingExpressionEditorMode: { classPropertyName: "bindingExpressionEditorMode", publicName: "bindingExpressionEditorMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: ["widgetsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n  <axp-widgets-container\n    #widgetsContainer\n    [context]=\"context()\"\n    (onContextChanged)=\"handleContextChange($event)\"\n  >\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template #propertyRow let-prop=\"prop\" let-translateTitle=\"translateTitle\">\n      <div class=\"flex flex-col gap-2 py-2\">\n        <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n        <div class=\"flex items-center gap-2 w-full\">\n          @if (prop.showLabel !== false) {\n            @if (translateTitle) {\n              <span class=\"font-semibold flex-1 min-w-0\">{{ prop.title | translate | async }}</span>\n            } @else {\n              <span class=\"font-semibold flex-1 min-w-0\">{{ prop.title }}</span>\n            }\n          }\n          @if (prop.binding?.enabled) {\n            <div class=\"flex gap-1 shrink-0 ax-sm\">\n              <ax-button [toggleable]=\"true\" [selected]=\"isExpressionMode(prop)\" [look]=\"'twotone'\" [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\" class=\"shrink-0\" (selectedChange)=\"setExpressionMode(prop, $event)\">\n                @if (isExpressionMode(prop)) {\n                  <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n                } @else {\n                  <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n                }\n              </ax-button>\n            </div>\n          }\n        </div>\n        <!-- Property content: expression editor (inline or popup) or widget renderer (value mode) -->\n        @if (prop.binding?.enabled && isExpressionMode(prop)) {\n          <!--->\n          <!-- ----- Inline Monaco editor \u2014 loaded on first expression-mode property ----- -->\n          @if (bindingExpressionEditorMode() === 'inline') {\n            <!--->\n            <!-- ----- Render the editor after the dynamic import resolves ----- -->\n            @if (inlineCodeEditor(); as editor) {\n              <ng-container\n                *ngComponentOutlet=\"\n                  editor;\n                  inputs: {\n                    value: getBindingExpressionValue(prop),\n                    onValueChange: bindingExpressionChangeHandler(prop),\n                  }\n                \"\n              />\n            }\n          }\n          <!-- ----- Open the expression editor in a popup instead of inline ----- -->\n          @else {\n            <ax-button\n              look=\"twotone\"\n              color=\"primary\"\n              size=\"sm\"\n              class=\"w-full\"\n              [text]=\"'@general:widgets.triggers.open-editor' | translate | async\"\n              (onClick)=\"openBindingEditor(prop)\"\n              [title]=\"'@general:widgets.triggers.edit-binding-expression' | translate | async\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n        }\n        <!-- ----- Render the widget editor when the property is in value mode ----- -->\n        @else if (prop.schema.interface) {\n          <ng-container axp-widget-renderer [node]=\"prop.schema.interface\" [mode]=\"'edit'\"></ng-container>\n        }\n      </div>\n    </ng-template>\n    <!-- #endregion -->\n\n    <!-- #region Advanced mode: tabs + accordion groups -->\n    @if (mode() === 'advanced') {\n      <div class=\"flex flex-col\">\n        @if (tabs().length > 1) {\n          <div class=\"pb-2\">\n            <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n              @for (tab of tabs(); track $index) {\n                <ax-tab-item [text]=\"(tab.title | translate | async) ?? ''\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\"></ax-tab-item>\n              }\n            </ax-tabs>\n          </div>\n        }\n        <div class=\"flex-1 overflow-auto\">\n          <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n            @for (group of groups(); track $index) {\n              <ax-accordion-item class=\"mb-0!\" [caption]=\"(group.title | translate | async) ?? ''\" [isCollapsed]=\"group.isCollapsed\" (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\n                <div class=\"flex flex-col\">\n                  @for (p of group.props; track $index) {\n                    @if (isPropertyVisible(p)) {\n                      <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\"></ng-container>\n                    }\n                  }\n                </div>\n              </ax-accordion-item>\n            }\n          </ax-accordion-group>\n        </div>\n      </div>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Simple mode: flat list of properties with padding -->\n    @else {\n      <div class=\"flex flex-col p-4 gap-4\">\n        @for (group of groups(); track $index) {\n          @for (p of group.props; track $index) {\n            @if (isPropertyVisible(p)) {\n              <ng-container *ngTemplateOutlet=\"propertyRow; context: { prop: p, translateTitle: true }\"></ng-container>\n            }\n          }\n        }\n      </div>\n    }\n    <!-- #endregion -->\n  </axp-widgets-container>\n</ax-form>\n", styles: ["@layer properties;axp-property-viewer ax-accordion-item.ax-flat{border-bottom-width:0}axp-property-viewer ax-accordion-item .ax-accordion-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$5.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$5.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i6$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
             type: Component,
@@ -8908,7 +8960,7 @@ class AXPPropertyViewerPopupComponent extends AXBasePageComponent {
         ></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode", "bindingExpressionEditorMode"], outputs: ["onChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode", "bindingExpressionEditorMode"], outputs: ["onChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPropertyViewerPopupComponent, decorators: [{
             type: Component,
@@ -8954,8 +9006,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], propertyViewer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPPropertyViewerComponent), { isSignal: true }] }] } });
 
 class PropertyViewerDialogBuilder {
-    constructor(popupService, getApplyDefaultMultiLanguage) {
+    constructor(popupService, dialogOpener, getApplyDefaultMultiLanguage) {
         this.popupService = popupService;
+        this.dialogOpener = dialogOpener;
         this.getApplyDefaultMultiLanguage = getApplyDefaultMultiLanguage;
         this.titleValue = '';
         this.sizeValue = 'md';
@@ -9015,17 +9068,25 @@ class PropertyViewerDialogBuilder {
         };
         const tabSource = this.tabsValue ?? [];
         const preparedTabs = preparePropertyViewerTabs(cloneDeep(tabSource), this.getApplyDefaultMultiLanguage());
-        const result = await this.popupService.open(AXPPropertyViewerPopupComponent, {
-            title: this.titleValue,
-            size: this.sizeValue,
-            closeButton: this.closeButtonValue,
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve(AXPPropertyViewerPopupComponent),
             data: {
-                tabs: signal(preparedTabs),
-                mode: signal(this.modeValue),
-                context: signal(this.contextValue ?? {}),
-                onApply,
-                onChange: this.onChangeHandler,
+                title: this.titleValue,
+                size: this.sizeValue,
+                mode: this.modeValue,
             },
+            show: (component) => this.popupService.open(component, {
+                title: this.titleValue,
+                size: this.sizeValue,
+                closeButton: this.closeButtonValue,
+                data: {
+                    tabs: signal(preparedTabs),
+                    mode: signal(this.modeValue),
+                    context: signal(this.contextValue ?? {}),
+                    onApply,
+                    onChange: this.onChangeHandler,
+                },
+            }),
         });
         return result?.data ?? null;
     }
@@ -9035,6 +9096,7 @@ class AXPPropertyViewerService {
     constructor() {
         //#region ----   Services & Dependencies   ----
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.defaultMultiLanguageConfig = inject(AXPDefaultMultiLanguageConfigService);
     }
     //#endregion
@@ -9044,10 +9106,11 @@ class AXPPropertyViewerService {
      */
     create() {
         const popupService = this.popupService;
+        const dialogOpener = this.dialogOpener;
         const getApplyMl = () => this.defaultMultiLanguageConfig.getApplyDefaultMultiLanguage();
         return {
             dialog: (delegate) => {
-                const b = new PropertyViewerDialogBuilder(popupService, getApplyMl);
+                const b = new PropertyViewerDialogBuilder(popupService, dialogOpener, getApplyMl);
                 delegate(b);
                 return b;
             },
@@ -9309,7 +9372,7 @@ class AXPItemConfiguratorComponent {
         return action.disabled === true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemLookup", first: true, predicate: AXLookupComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n    <div class=\"__item-selector\">\n      <ax-lookup\n        #itemLookup\n        mode=\"drop-down-list\"\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"availableItems()\"\n        [placeholder]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"true\"\n        [itemTemplate]=\"itemTemplate\"\n        [itemHeight]=\"72\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <i [class]=\"config.icon\"></i>\n            }\n            <div>\n              <span>\n                {{ config.title | translate | async }}\n              </span>\n              @if (config.description) {\n                <p>\n                  {{ (config.description | translate | async) ?? '' }}\n                </p>\n              }\n            </div>\n          </div>\n\n          <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n            @if (config.hasProperties) {\n              <ax-button\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\n                look=\"blank\"\n                [color]=\"isConfigured() ? 'primary' : 'default'\"\n                size=\"sm\"\n                (onClick)=\"openConfigureDialog()\"\n              >\n                <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n              </ax-button>\n            }\n            @for (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\n              <ax-button\n                look=\"blank\"\n                size=\"sm\"\n                [color]=\"action.color ?? 'default'\"\n                [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n                [title]=\"(action.title | translate | async) ?? ''\"\n                [class.icon-only]=\"action.iconOnly === true\"\n                (onClick)=\"onHeaderActionClick(action)\"\n              >\n                @if (action.icon) {\n                  <ax-icon [icon]=\"action.icon\"></ax-icon>\n                }\n                @if (action.iconOnly !== true) {\n                  <span>{{ (action.title | translate | async) ?? '' }}</span>\n                }\n              </ax-button>\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n      @if (item.icon) {\n        <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n      }\n      <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n        <div class=\"text-sm font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n          <div class=\"text-xs text-neutral-600\">\n            {{ item.description | translate | async }}\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.icon) {\n        <i [class]=\"item.icon\"></i>\n      }\n      <span>\n        {{ $safeNavigationMigration(item?.text) | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{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)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@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-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemLookup", first: true, predicate: AXLookupComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n    <div class=\"__item-selector\">\n      <ax-lookup\n        #itemLookup\n        mode=\"drop-down-list\"\n        [ngModel]=\"selectedItemId()\"\n        [dataSource]=\"availableItems()\"\n        [placeholder]=\"\n          ('@general:actions.select.title' | translate | async) ?? ''\n        \"\n        [readonly]=\"readonly()\"\n        (onValueChanged)=\"onSelectionChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [searchable]=\"true\"\n        [itemTemplate]=\"itemTemplate\"\n        [itemHeight]=\"72\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-clear-button></ax-clear-button>\n      </ax-lookup>\n    </div>\n  }\n\n  @if (!isEditMode()) {\n    @if (selectedItemId() && currentItemConfig(); as config) {\n      <div class=\"__item-info\">\n        <div\n          class=\"__item-header\"\n          [class.__editable]=\"!readonly()\"\n          (click)=\"enterEditMode()\"\n        >\n          <div>\n            @if (config.icon) {\n              <i [class]=\"config.icon\"></i>\n            }\n            <div>\n              <span>\n                {{ config.title | translate | async }}\n              </span>\n              @if (config.description) {\n                <p>\n                  {{ (config.description | translate | async) ?? '' }}\n                </p>\n              }\n            </div>\n          </div>\n\n          <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n            @if (config.hasProperties) {\n              <ax-button\n                [disabled]=\"!canConfigure() || readonly()\"\n                [title]=\"\n                  ('@general:actions.configure.title' | translate | async) ?? ''\n                \"\n                look=\"blank\"\n                [color]=\"isConfigured() ? 'primary' : 'default'\"\n                size=\"sm\"\n                (onClick)=\"openConfigureDialog()\"\n              >\n                <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n              </ax-button>\n            }\n            @for (\n              action of visibleHeaderActions();\n              track action.name ?? $index\n            ) {\n              <ax-button\n                look=\"blank\"\n                size=\"sm\"\n                [color]=\"action.color ?? 'default'\"\n                [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n                [title]=\"(action.title | translate | async) ?? ''\"\n                [class.icon-only]=\"action.iconOnly === true\"\n                (onClick)=\"onHeaderActionClick(action)\"\n              >\n                @if (action.icon) {\n                  <ax-icon [icon]=\"action.icon\"></ax-icon>\n                }\n                @if (action.iconOnly !== true) {\n                  <span>{{ (action.title | translate | async) ?? '' }}</span>\n                }\n              </ax-button>\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div\n        class=\"__item-empty\"\n        [class.__editable]=\"!readonly()\"\n        (click)=\"enterEditMode()\"\n      >\n        <i class=\"fa-solid fa-puzzle-piece\"></i>\n        <span>\n          {{\n            ('@general:widgets.widget-configurator.select-widget-type'\n              | translate\n              | async) ?? 'Select an item type'\n          }}\n        </span>\n      </div>\n    }\n  }\n\n  <ng-template #itemTemplate let-item>\n    <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n      @if (item.icon) {\n        <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n      }\n      <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n        <div class=\"text-sm font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n          <div class=\"text-xs text-neutral-600\">\n            {{ item.description | translate | async }}\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #selectedTemplate let-item>\n    <div class=\"__selected-template\">\n      @if (item?.icon) {\n        <i [class]=\"item.icon\"></i>\n      }\n      <span>\n        {{ $safeNavigationMigration(item?.text) | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{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)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@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-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, decorators: [{
             type: Component,
@@ -9457,7 +9520,7 @@ class AXPLayoutFloatingZoomBarComponent {
         this.zoomReset.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutFloatingZoomBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPLayoutFloatingZoomBarComponent, isStandalone: true, selector: "axp-layout-floating-zoom-bar", inputs: { zoomLevel: { classPropertyName: "zoomLevel", publicName: "zoomLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoomIn: "zoomIn", zoomOut: "zoomOut", zoomReset: "zoomReset" }, ngImport: i0, template: "<div class=\"axp-layout-floating-zoom-bar\">\n  <ax-button look=\"blank\" class=\"ax-sm __zoom-button\" (onClick)=\"onZoomOut()\">\n    <ax-icon class=\"fa-solid fa-minus\"></ax-icon>\n  </ax-button>\n  <ax-button look=\"blank\" class=\"ax-sm __zoom-value\" [text]=\"zoomLabel()\" (onClick)=\"onZoomReset()\"></ax-button>\n  <ax-button look=\"blank\" class=\"ax-sm __zoom-button\" (onClick)=\"onZoomIn()\">\n    <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n  </ax-button>\n</div>\n", styles: ["@layer properties;.axp-layout-floating-zoom-bar{position:absolute;bottom:calc(var(--spacing, .25rem) * 4);z-index:20;display:flex;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-2xl, 1rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 1.5);inset-inline-end:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px -12px #0000003d,0 2px 8px #00000014,inset 0 1px #ffffffbf}.axp-layout-floating-zoom-bar .__zoom-button{border-radius:var(--radius-xl, .75rem);color:rgba(var(--ax-sys-color-on-surface))}.axp-layout-floating-zoom-bar .__zoom-button:hover{background-color:rgb(var(--ax-sys-color-primary-500))}@supports (color: color-mix(in lab,red,red)){.axp-layout-floating-zoom-bar .__zoom-button:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 10%,white)}}.axp-layout-floating-zoom-bar .__zoom-value{min-width:calc(var(--spacing, .25rem) * 16);border-radius:var(--radius-xl, .75rem);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}.axp-layout-floating-zoom-bar .__zoom-value:hover{background-color:rgb(var(--ax-sys-color-primary-500))}@supports (color: color-mix(in lab,red,red)){.axp-layout-floating-zoom-bar .__zoom-value:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 10%,white)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXPLayoutFloatingZoomBarComponent, isStandalone: true, selector: "axp-layout-floating-zoom-bar", inputs: { zoomLevel: { classPropertyName: "zoomLevel", publicName: "zoomLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoomIn: "zoomIn", zoomOut: "zoomOut", zoomReset: "zoomReset" }, ngImport: i0, template: "<div class=\"axp-layout-floating-zoom-bar\">\n  <ax-button look=\"blank\" class=\"ax-sm __zoom-button\" (onClick)=\"onZoomOut()\">\n    <ax-icon class=\"fa-solid fa-minus\"></ax-icon>\n  </ax-button>\n  <ax-button look=\"blank\" class=\"ax-sm __zoom-value\" [text]=\"zoomLabel()\" (onClick)=\"onZoomReset()\"></ax-button>\n  <ax-button look=\"blank\" class=\"ax-sm __zoom-button\" (onClick)=\"onZoomIn()\">\n    <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n  </ax-button>\n</div>\n", styles: ["@layer properties;.axp-layout-floating-zoom-bar{position:absolute;bottom:calc(var(--spacing, .25rem) * 4);z-index:20;display:flex;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-2xl, 1rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 1.5);inset-inline-end:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px -12px #0000003d,0 2px 8px #00000014,inset 0 1px #ffffffbf}.axp-layout-floating-zoom-bar .__zoom-button{border-radius:var(--radius-xl, .75rem);color:rgba(var(--ax-sys-color-on-surface))}.axp-layout-floating-zoom-bar .__zoom-button:hover{background-color:rgb(var(--ax-sys-color-primary-500))}@supports (color: color-mix(in lab,red,red)){.axp-layout-floating-zoom-bar .__zoom-button:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 10%,white)}}.axp-layout-floating-zoom-bar .__zoom-value{min-width:calc(var(--spacing, .25rem) * 16);border-radius:var(--radius-xl, .75rem);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}.axp-layout-floating-zoom-bar .__zoom-value:hover{background-color:rgb(var(--ax-sys-color-primary-500))}@supports (color: color-mix(in lab,red,red)){.axp-layout-floating-zoom-bar .__zoom-value:hover{background-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500)) 10%,white)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutFloatingZoomBarComponent, decorators: [{
             type: Component,
@@ -9540,7 +9603,7 @@ class AXPLayoutSideDetailPanelComponent {
         return icon?.surfaceVars ?? {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutSideDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPLayoutSideDetailPanelComponent, isStandalone: true, selector: "axp-layout-side-detail-panel", inputs: { multiSelectLabel: { classPropertyName: "multiSelectLabel", publicName: "multiSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsSectionTitle: { classPropertyName: "rowsSectionTitle", publicName: "rowsSectionTitle", isSignal: true, isRequired: false, transformFunction: null }, noRowsMessage: { classPropertyName: "noRowsMessage", publicName: "noRowsMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose" }, queries: [{ propertyName: "projectedSections", predicate: AXPLayoutSideDetailPanelSectionDirective, isSignal: true }], ngImport: i0, template: "@if (multiSelectLabel(); as multiLabel) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span class=\"axp-layout-side-detail-panel__icon\">\n        <i class=\"fa-fw fa-lg fa-solid\"></i>\n      </span>\n      <span>{{ multiLabel }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\"></div>\n} @else if (header(); as h) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (h.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--shortcut]=\"icon.shortcut\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n          @if (icon.shortcut) {\n            <i class=\"fa-light fa-up-right-from-square axp-layout-side-detail-panel__icon-arrow\" aria-hidden=\"true\"></i>\n          }\n        </span>\n      }\n      <div class=\"flex flex-col min-w-0 flex-1\">\n        <span class=\"__heading-primary\">{{ h.primaryTitle }}</span>\n        @if (h.secondaryTitle) {\n          <span class=\"text-xs opacity-80 truncate\">{{ h.secondaryTitle }}</span>\n        }\n      </div>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    @if (sections().length > 0) {\n      @for (section of sections(); track sectionTrack(section, $index)) {\n        <div class=\"__section\">\n          @if (section.title) {\n            <div class=\"__title\">\n              <span>{{ section.title }}</span>\n            </div>\n          }\n          <div class=\"__content\">\n            @if (section.projectionKey; as projectionKey) {\n              @if (templateForProjectionKey(projectionKey); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl\" />\n              }\n            } @else {\n              @for (row of section.rows ?? []; track row.label + '-' + $index) {\n                <div class=\"__row\">\n                  <div class=\"__title\">\n                    <span>{{ row.label }}</span>\n                  </div>\n                  <div class=\"__content\">\n                    @if (row.format) {\n                      <span>{{ row.value | format: row.format | async }}</span>\n                    } @else {\n                      <span>{{ row.value ?? '---' }}</span>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    } @else if (rows().length > 0) {\n      <div class=\"__section\">\n        @if (rowsSectionTitle(); as sectionTitle) {\n          <div class=\"__title\">\n            <span>{{ sectionTitle }}</span>\n          </div>\n        }\n        <div class=\"__content\">\n          @for (row of rows(); track row.label + '-' + $index) {\n            <div class=\"__row\">\n              <div class=\"__title\">\n                <span>{{ row.label }}</span>\n              </div>\n              <div class=\"__content\">\n                @if (row.format) {\n                  <span>{{ row.value | format: row.format | async }}</span>\n                } @else {\n                  <span>{{ row.value ?? '---' }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else if (noRowsMessage(); as noRows) {\n      <div class=\"__section\">\n        <div class=\"__content\">\n          <span class=\"opacity-70 text-sm\">{{ noRows }}</span>\n        </div>\n      </div>\n    }\n  </div>\n} @else if (emptyState(); as empty) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (empty.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n        </span>\n      }\n      <span class=\"__heading-primary\">{{ empty.primaryTitle }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <span class=\"opacity-70 text-sm\">{{ empty.message }}</span>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;axp-layout-side-detail-panel{display:flex;height:100%;flex-direction:column;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--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)}@media(width>=64rem){axp-layout-side-detail-panel{min-width:calc(var(--spacing, .25rem) * 80)}}axp-layout-side-detail-panel>.__header{display:flex;flex-shrink:0;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-layout-side-detail-panel>.__header>.__title .__heading-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon.axp-layout-side-detail-panel__icon--shortcut .axp-layout-side-detail-panel__icon-arrow{position:absolute;bottom:-2px;right:-2px;font-size:.45em;opacity:.9}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon i{--tw-leading: 1;line-height:1}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon.axp-layout-side-detail-panel__icon--themed i{color:rgba(var(--node-bg-color))}axp-layout-side-detail-panel>.__content{display:flex;min-height:0px;flex:1;flex-direction:column;overflow-y:auto}:where(axp-layout-side-detail-panel .__content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}axp-layout-side-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__content>.__section>.__title{margin-bottom:calc(var(--spacing, .25rem) * 4);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-bold, 700);font-weight:var(--font-weight-bold, 700)}axp-layout-side-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;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-semibold, 600);font-weight:var(--font-weight-semibold, 600);opacity:90%}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:70%}@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-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@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-leading: initial;--tw-font-weight: initial;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$3.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPLayoutSideDetailPanelComponent, isStandalone: true, selector: "axp-layout-side-detail-panel", inputs: { multiSelectLabel: { classPropertyName: "multiSelectLabel", publicName: "multiSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsSectionTitle: { classPropertyName: "rowsSectionTitle", publicName: "rowsSectionTitle", isSignal: true, isRequired: false, transformFunction: null }, noRowsMessage: { classPropertyName: "noRowsMessage", publicName: "noRowsMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose" }, queries: [{ propertyName: "projectedSections", predicate: AXPLayoutSideDetailPanelSectionDirective, isSignal: true }], ngImport: i0, template: "@if (multiSelectLabel(); as multiLabel) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span class=\"axp-layout-side-detail-panel__icon\">\n        <i class=\"fa-fw fa-lg fa-solid\"></i>\n      </span>\n      <span>{{ multiLabel }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\"></div>\n} @else if (header(); as h) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (h.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--shortcut]=\"icon.shortcut\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n          @if (icon.shortcut) {\n            <i class=\"fa-light fa-up-right-from-square axp-layout-side-detail-panel__icon-arrow\" aria-hidden=\"true\"></i>\n          }\n        </span>\n      }\n      <div class=\"flex flex-col min-w-0 flex-1\">\n        <span class=\"__heading-primary\">{{ h.primaryTitle }}</span>\n        @if (h.secondaryTitle) {\n          <span class=\"text-xs opacity-80 truncate\">{{ h.secondaryTitle }}</span>\n        }\n      </div>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    @if (sections().length > 0) {\n      @for (section of sections(); track sectionTrack(section, $index)) {\n        <div class=\"__section\">\n          @if (section.title) {\n            <div class=\"__title\">\n              <span>{{ section.title }}</span>\n            </div>\n          }\n          <div class=\"__content\">\n            @if (section.projectionKey; as projectionKey) {\n              @if (templateForProjectionKey(projectionKey); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl\" />\n              }\n            } @else {\n              @for (row of section.rows ?? []; track row.label + '-' + $index) {\n                <div class=\"__row\">\n                  <div class=\"__title\">\n                    <span>{{ row.label }}</span>\n                  </div>\n                  <div class=\"__content\">\n                    @if (row.format) {\n                      <span>{{ row.value | format: row.format | async }}</span>\n                    } @else {\n                      <span>{{ row.value ?? '---' }}</span>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    } @else if (rows().length > 0) {\n      <div class=\"__section\">\n        @if (rowsSectionTitle(); as sectionTitle) {\n          <div class=\"__title\">\n            <span>{{ sectionTitle }}</span>\n          </div>\n        }\n        <div class=\"__content\">\n          @for (row of rows(); track row.label + '-' + $index) {\n            <div class=\"__row\">\n              <div class=\"__title\">\n                <span>{{ row.label }}</span>\n              </div>\n              <div class=\"__content\">\n                @if (row.format) {\n                  <span>{{ row.value | format: row.format | async }}</span>\n                } @else {\n                  <span>{{ row.value ?? '---' }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else if (noRowsMessage(); as noRows) {\n      <div class=\"__section\">\n        <div class=\"__content\">\n          <span class=\"opacity-70 text-sm\">{{ noRows }}</span>\n        </div>\n      </div>\n    }\n  </div>\n} @else if (emptyState(); as empty) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (empty.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n        </span>\n      }\n      <span class=\"__heading-primary\">{{ empty.primaryTitle }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <span class=\"opacity-70 text-sm\">{{ empty.message }}</span>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@layer properties;axp-layout-side-detail-panel{display:flex;height:100%;flex-direction:column;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--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)}@media(width>=64rem){axp-layout-side-detail-panel{min-width:calc(var(--spacing, .25rem) * 80)}}axp-layout-side-detail-panel>.__header{display:flex;flex-shrink:0;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-layout-side-detail-panel>.__header>.__title .__heading-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon.axp-layout-side-detail-panel__icon--shortcut .axp-layout-side-detail-panel__icon-arrow{position:absolute;bottom:-2px;right:-2px;font-size:.45em;opacity:.9}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon i{--tw-leading: 1;line-height:1}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon.axp-layout-side-detail-panel__icon--themed i{color:rgba(var(--node-bg-color))}axp-layout-side-detail-panel>.__content{display:flex;min-height:0px;flex:1;flex-direction:column;overflow-y:auto}:where(axp-layout-side-detail-panel .__content>:not(:last-child)){--tw-divide-y-reverse: 0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}axp-layout-side-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__content>.__section>.__title{margin-bottom:calc(var(--spacing, .25rem) * 4);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-bold, 700);font-weight:var(--font-weight-bold, 700)}axp-layout-side-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;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-semibold, 600);font-weight:var(--font-weight-semibold, 600);opacity:90%}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:70%}@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-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-divide-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@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-leading: initial;--tw-font-weight: initial;--tw-divide-y-reverse: 0}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$3.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPLayoutSideDetailPanelComponent, decorators: [{
             type: Component,
@@ -10342,7 +10405,7 @@ class AXPMenuCustomizerComponent {
         this.toastService.warning(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuCustomizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n  />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      look=\"outline\"\n      color=\"primary\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"i18nActions + '.add-root.title' | translate | async\"\n        look=\"solid\"\n        color=\"primary\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"i18nActions + '.add-root.title' | translate | async\"\n          look=\"solid\"\n          color=\"primary\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n      <!-- \n      <ax-button\n        [text]=\"i18nActions + '.collapse.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"i18nActions + '.expand.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button> -->\n\n      <ax-button\n        [text]=\"i18nActions + '.reset.title' | translate | async\"\n        look=\"outline\"\n        color=\"danger\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        look=\"default\"\n        [nodeTemplate]=\"itemTemplate\"\n        selectMode=\"none\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onBeforeDrop)=\"handleBeforeDrop($event)\"\n        (onOrderChange)=\"handleOrderChange($event)\"\n        (onMoveChange)=\"handleMoveChange($event)\"\n      />\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  @let isGroup = item.type === 'group';\n  @let isBreak = item.type === 'break';\n  @let isMenu = item.type === 'menu' || !item.type;\n  @let canAddChild = !item.path && isMenu && allowAddItems();\n  @let canToggleVisibility = item.name && metadata.isBuiltIn;\n  @let canDelete = item.name && metadata.isCustom;\n  @let i18nStates = '@platform-management:menu-management.states';\n\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"isGroup\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && !isGroup) {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Content based on item type -->\n    @if (isGroup) {\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (isBreak) {\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ i18nStates + '.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n    } @else if (metadata.isCustom) {\n      <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for built-in items with names) -->\n          @if (canToggleVisibility) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          <!-- Add Child -->\n          @if (canAddChild) {\n            <ax-button-item\n              [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (canDelete) {\n            <ax-divider />\n            <ax-button-item\n              color=\"danger\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider />\n            <div class=\"p-2 text-xs text-neutral-500 italic\">\n              {{ i18nBase + '.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer .axp-menu-customizer__toolbar{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__toolbar-spacer{min-width:calc(var(--spacing, .25rem) * 4);flex:1}.axp-menu-customizer .axp-menu-customizer__container{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:auto;padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__tree{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-menu-customizer .axp-menu-customizer__tree ax-tree-view{flex:1}.axp-menu-customizer .axp-menu-customizer__item{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-white, #fff);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.axp-menu-customizer .axp-menu-customizer__item:hover{background-color:var(--color-neutral-50, oklch(98.5% 0 none))}.axp-menu-customizer .axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:100%}.axp-menu-customizer .axp-menu-customizer__item--hidden{opacity:50%}.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer .axp-menu-customizer__item--custom{border-color:rgba(var(--ax-sys-color-primary-200));background-color:rgba(var(--ax-sys-color-primary-50))}@supports (color: color-mix(in lab,red,red)){.axp-menu-customizer .axp-menu-customizer__item--custom{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-50)) 30%,transparent)}}.axp-menu-customizer .axp-menu-customizer__item--group{background-color:var(--color-neutral-50, oklch(98.5% 0 none));padding-block:calc(var(--spacing, .25rem) * 3)}.axp-menu-customizer .axp-menu-customizer__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-primary-600))}.axp-menu-customizer .axp-menu-customizer__item-text{min-width:0px;flex:1;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)}.axp-menu-customizer .axp-menu-customizer__item-group{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--color-neutral-500, oklch(55.6% 0 none));text-transform:uppercase;font-style:italic}.axp-menu-customizer .axp-menu-customizer__item-group i{color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}:is(.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path) i{flex-shrink:0;color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-name{display:inline-flex;max-width:calc(var(--spacing, .25rem) * 48);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;border-radius:.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-neutral-100, oklch(97% 0 none));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));-webkit-user-select:all;user-select:all}.axp-menu-customizer .axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:60%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{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-duration: initial;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n  />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      look=\"outline\"\n      color=\"primary\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"i18nActions + '.add-root.title' | translate | async\"\n        look=\"solid\"\n        color=\"primary\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"i18nActions + '.add-root.title' | translate | async\"\n          look=\"solid\"\n          color=\"primary\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n      <!-- \n      <ax-button\n        [text]=\"i18nActions + '.collapse.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"i18nActions + '.expand.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button> -->\n\n      <ax-button\n        [text]=\"i18nActions + '.reset.title' | translate | async\"\n        look=\"outline\"\n        color=\"danger\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        look=\"default\"\n        [nodeTemplate]=\"itemTemplate\"\n        selectMode=\"none\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onBeforeDrop)=\"handleBeforeDrop($event)\"\n        (onOrderChange)=\"handleOrderChange($event)\"\n        (onMoveChange)=\"handleMoveChange($event)\"\n      />\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  @let isGroup = item.type === 'group';\n  @let isBreak = item.type === 'break';\n  @let isMenu = item.type === 'menu' || !item.type;\n  @let canAddChild = !item.path && isMenu && allowAddItems();\n  @let canToggleVisibility = item.name && metadata.isBuiltIn;\n  @let canDelete = item.name && metadata.isCustom;\n  @let i18nStates = '@platform-management:menu-management.states';\n\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"isGroup\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && !isGroup) {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Content based on item type -->\n    @if (isGroup) {\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (isBreak) {\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ i18nStates + '.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n    } @else if (metadata.isCustom) {\n      <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for built-in items with names) -->\n          @if (canToggleVisibility) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          <!-- Add Child -->\n          @if (canAddChild) {\n            <ax-button-item\n              [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (canDelete) {\n            <ax-divider />\n            <ax-button-item\n              color=\"danger\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider />\n            <div class=\"p-2 text-xs text-neutral-500 italic\">\n              {{ i18nBase + '.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: ["@layer properties;.axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer .axp-menu-customizer__toolbar{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__toolbar-spacer{min-width:calc(var(--spacing, .25rem) * 4);flex:1}.axp-menu-customizer .axp-menu-customizer__container{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:auto;padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__tree{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-menu-customizer .axp-menu-customizer__tree ax-tree-view{flex:1}.axp-menu-customizer .axp-menu-customizer__item{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-white, #fff);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.axp-menu-customizer .axp-menu-customizer__item:hover{background-color:var(--color-neutral-50, oklch(98.5% 0 none))}.axp-menu-customizer .axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:100%}.axp-menu-customizer .axp-menu-customizer__item--hidden{opacity:50%}.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer .axp-menu-customizer__item--custom{border-color:rgba(var(--ax-sys-color-primary-200));background-color:rgba(var(--ax-sys-color-primary-50))}@supports (color: color-mix(in lab,red,red)){.axp-menu-customizer .axp-menu-customizer__item--custom{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-50)) 30%,transparent)}}.axp-menu-customizer .axp-menu-customizer__item--group{background-color:var(--color-neutral-50, oklch(98.5% 0 none));padding-block:calc(var(--spacing, .25rem) * 3)}.axp-menu-customizer .axp-menu-customizer__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-primary-600))}.axp-menu-customizer .axp-menu-customizer__item-text{min-width:0px;flex:1;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)}.axp-menu-customizer .axp-menu-customizer__item-group{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--color-neutral-500, oklch(55.6% 0 none));text-transform:uppercase;font-style:italic}.axp-menu-customizer .axp-menu-customizer__item-group i{color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}:is(.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path) i{flex-shrink:0;color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-name{display:inline-flex;max-width:calc(var(--spacing, .25rem) * 48);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;border-radius:.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-neutral-100, oklch(97% 0 none));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));-webkit-user-select:all;user-select:all}.axp-menu-customizer .axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:60%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{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-duration: initial;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuCustomizerComponent, decorators: [{
             type: Component,
@@ -10695,7 +10758,7 @@ class AXPRepeaterRowsLayoutComponent {
         this.removeClick.emit(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRepeaterRowsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPRepeaterRowsLayoutComponent, isStandalone: true, selector: "axp-repeater-rows-layout", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasControls: { classPropertyName: "hasControls", publicName: "hasControls", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: true, transformFunction: null }, addItemLabelKey: { classPropertyName: "addItemLabelKey", publicName: "addItemLabelKey", isSignal: true, isRequired: false, transformFunction: null }, emptyTitleKey: { classPropertyName: "emptyTitleKey", publicName: "emptyTitleKey", isSignal: true, isRequired: false, transformFunction: null }, emptyDescriptionKey: { classPropertyName: "emptyDescriptionKey", publicName: "emptyDescriptionKey", isSignal: true, isRequired: false, transformFunction: null }, addFirstItemLabelKey: { classPropertyName: "addFirstItemLabelKey", publicName: "addFirstItemLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addClick: "addClick", removeClick: "removeClick", drop: "drop" }, ngImport: i0, template: "<div axDropList dropListOrientation=\"vertical\" (dropListDropped)=\"onDrop($event)\">\n  @for (i of rowIndices(); track i) {\n  <div axDrag [dragDisabled]=\"!allowReorder()\" [class]=\"rowRowClass()\">\n    @if (allowReorder()) {\n    <div>\n      <ax-icon class=\"fa-solid fa-grip-vertical\" axDragHandle></ax-icon>\n    </div>\n    }\n\n    <div class=\"min-w-0 w-full\">\n      <ng-container [ngTemplateOutlet]=\"rowTemplate()\" [ngTemplateOutletContext]=\"{ index: i }\"></ng-container>\n    </div>\n\n    @if (hasControls()) {\n    <div class=\"justify-self-end self-center\">\n      <ax-button [disabled]=\"disabled()\" look=\"twotone\" color=\"danger\" (onClick)=\"onRemoveClick(i)\">\n        <ax-icon icon=\"fa-regular fa-xmark\"></ax-icon>\n      </ax-button>\n    </div>\n    }\n  </div>\n  } @empty {\n  <axp-state-message mode=\"empty\" [look]=\"'minimal'\" [title]=\"emptyTitleKey()\" [description]=\"emptyDescriptionKey()\">\n    <div slot=\"actions\" class=\"ax-sm\">\n      <ax-button [text]=\"(addFirstItemLabelKey() | translate | async)!\" look=\"twotone\" color=\"primary\"\n        [disabled]=\"disabled()\" (onClick)=\"onAddClick()\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </axp-state-message>\n  }\n\n  @if (count() > 0) {\n  <div class=\"flex justify-end\">\n    <ax-button [text]=\"(addItemLabelKey() | translate | async)!\" look=\"twotone\" [disabled]=\"disabled()\"\n      (onClick)=\"onAddClick()\">\n      <ax-prefix>\n        <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </div>\n  }\n</div>", styles: [":host{display:block;min-width:0px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { 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: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPRepeaterRowsLayoutComponent, isStandalone: true, selector: "axp-repeater-rows-layout", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasControls: { classPropertyName: "hasControls", publicName: "hasControls", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: true, transformFunction: null }, addItemLabelKey: { classPropertyName: "addItemLabelKey", publicName: "addItemLabelKey", isSignal: true, isRequired: false, transformFunction: null }, emptyTitleKey: { classPropertyName: "emptyTitleKey", publicName: "emptyTitleKey", isSignal: true, isRequired: false, transformFunction: null }, emptyDescriptionKey: { classPropertyName: "emptyDescriptionKey", publicName: "emptyDescriptionKey", isSignal: true, isRequired: false, transformFunction: null }, addFirstItemLabelKey: { classPropertyName: "addFirstItemLabelKey", publicName: "addFirstItemLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addClick: "addClick", removeClick: "removeClick", drop: "drop" }, ngImport: i0, template: "<div axDropList dropListOrientation=\"vertical\" (dropListDropped)=\"onDrop($event)\">\n  @for (i of rowIndices(); track i) {\n  <div axDrag [dragDisabled]=\"!allowReorder()\" [class]=\"rowRowClass()\">\n    @if (allowReorder()) {\n    <div>\n      <ax-icon class=\"fa-solid fa-grip-vertical\" axDragHandle></ax-icon>\n    </div>\n    }\n\n    <div class=\"min-w-0 w-full\">\n      <ng-container [ngTemplateOutlet]=\"rowTemplate()\" [ngTemplateOutletContext]=\"{ index: i }\"></ng-container>\n    </div>\n\n    @if (hasControls()) {\n    <div class=\"justify-self-end self-center\">\n      <ax-button [disabled]=\"disabled()\" look=\"twotone\" color=\"danger\" (onClick)=\"onRemoveClick(i)\">\n        <ax-icon icon=\"fa-regular fa-xmark\"></ax-icon>\n      </ax-button>\n    </div>\n    }\n  </div>\n  } @empty {\n  <axp-state-message mode=\"empty\" [look]=\"'minimal'\" [title]=\"emptyTitleKey()\" [description]=\"emptyDescriptionKey()\">\n    <div slot=\"actions\" class=\"ax-sm\">\n      <ax-button [text]=\"(addFirstItemLabelKey() | translate | async)!\" look=\"twotone\" color=\"primary\"\n        [disabled]=\"disabled()\" (onClick)=\"onAddClick()\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </axp-state-message>\n  }\n\n  @if (count() > 0) {\n  <div class=\"flex justify-end\">\n    <ax-button [text]=\"(addItemLabelKey() | translate | async)!\" look=\"twotone\" [disabled]=\"disabled()\"\n      (onClick)=\"onAddClick()\">\n      <ax-prefix>\n        <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </div>\n  }\n</div>", styles: [":host{display:block;min-width:0px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { 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: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRepeaterRowsLayoutComponent, decorators: [{
             type: Component,
@@ -11268,7 +11331,7 @@ class AXPSectionItemsBuilderComponent {
         return items.map((it, i) => ({ ...it, order: i }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSectionItemsBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSectionItemsBuilderComponent, isStandalone: true, selector: "axp-section-items-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, readonlyMode: { classPropertyName: "readonlyMode", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "axp-section-items-builder-host" }, ngImport: i0, template: "<div class=\"axp-section-items-builder\" *translate=\"let t\">\n  <div class=\"__content\">\n    @if (sectionsModel().sections.length === 0) {\n      <!-- ----- Empty state when no sections are configured ----- -->\n      <axp-state-message icon=\"fa-light fa-layer-group\" [title]=\"definition().texts.emptySectionsTitle\" [description]=\"definition().texts.emptySectionsDescription\"></axp-state-message>\n    } @else {\n      <!-- ----- Draggable section list when at least one section exists ----- -->\n      <div class=\"__sections-container\" cdkDropList [cdkDropListData]=\"sectionsModel().sections\" (cdkDropListDropped)=\"onSectionDrop($event)\">\n        @for (row of sectionRows(); track row.section.id) {\n          <div class=\"__section\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n            <div class=\"__section-header\">\n              @if (!readonlyMode()) {\n                <!-- ----- Section reorder handle (edit mode only) ----- -->\n                <div class=\"__section-drag-handle\" cdkDragHandle>\n                  <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n                </div>\n              }\n              <div class=\"__section-info\">\n                @let secTitle = sectionTitleValue(row.section) | translate | async;\n                <h3 class=\"__section-title\" [title]=\"secTitle\">\n                  {{ secTitle }}\n                  @if (definition().showSectionTechnicalName) {\n                    @let secTechName = sectionNameValue(row.section) | translate | async;\n                    @if (secTechName?.trim()) {\n                      <span class=\"__section-name-prefix\">({{ secTechName }})</span>\n                    }\n                  }\n                  @if (isDefaultSection(row.section)) {\n                    @if (definition().texts.defaultSectionBadge; as defaultBadge) {\n                      <span class=\"__default-section-badge\">{{ defaultBadge | translate | async }}</span>\n                    }\n                  }\n                </h3>\n                @let secDesc = (sectionDescriptionValue(row.section) | translate | async) || '';\n                @let secDescTrimmed = $safeNavigationMigration(secDesc?.trim());\n                @if (secDescTrimmed) {\n                  @if (containsHtmlMarkup(secDescTrimmed)) {\n                    <!-- ----- Rich HTML section description ----- -->\n                    <div class=\"__section-description __section-description--rich\" [title]=\"tooltipPlainTextForHtml(secDesc)\" [innerHTML]=\"secDesc | safe: 'html'\"></div>\n                  } @else {\n                    <!-- ----- Plain text section description ----- -->\n                    <p class=\"__section-description\" [title]=\"secDescTrimmed\">{{ secDescTrimmed }}</p>\n                  }\n                }\n              </div>\n              @if (!readonlyMode()) {\n                <!-- ----- Section toolbar: add items and inline edit/remove ----- -->\n                <div class=\"__section-actions ax-sm\">\n                  @if (definition().promptAddItems) {\n                    <ax-button [text]=\"definition().texts.addItem | translate | async\" [color]=\"'accent2'\" (onClick)=\"onAddItems(row.section)\">\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button>\n                  }\n                  @if (definition().promptEditSection || canRemoveSection()) {\n                    <div class=\"__section-inline-actions\">\n                      @if (definition().promptEditSection) {\n                        <ax-button [look]=\"'blank'\" color=\"accent3\" (onClick)=\"onEditSection(row.section)\">\n                          <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                        </ax-button>\n                      }\n                      @if (canRemoveSection()) {\n                        <ax-button [look]=\"'blank'\" color=\"danger\" (onClick)=\"onRemoveSection(row.section)\">\n                          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                        </ax-button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"__items-container\">\n              <div class=\"__items-list\" cdkDropList [id]=\"sectionItemsListId(row.section.id)\" [cdkDropListData]=\"row.section.items\" [cdkDropListConnectedTo]=\"itemDropListIds()\" (cdkDropListDropped)=\"onItemDrop($event, row.section.id)\">\n                @if (row.itemRows.length === 0) {\n                  <!-- ----- Empty state when the section has no items ----- -->\n                  <axp-state-message icon=\"fa-light fa-inbox\" [title]=\"definition().texts.emptyItemsTitle\" [description]=\"definition().texts.emptyItemsDescription\"></axp-state-message>\n                } @else {\n                  <!-- ----- Draggable item rows for this section ----- -->\n                  @for (ir of row.itemRows; track ir.item.id) {\n                    <div class=\"__item\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n                      @if (!readonlyMode()) {\n                        <!-- ----- Item reorder handle (edit mode only) ----- -->\n                        <div class=\"__drag-handle\" cdkDragHandle>\n                          <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n                        </div>\n                      }\n                      <div class=\"__item-content\">\n                        <div class=\"__item-leading\" [title]=\"itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async\">\n                          <div class=\"__item-icon\" [class.__tone-easy]=\"ir.view.iconTone === 'easy'\" [class.__tone-medium]=\"ir.view.iconTone === 'medium'\" [class.__tone-hard]=\"ir.view.iconTone === 'hard'\">\n                            <ax-icon [icon]=\"ir.view.icon\"></ax-icon>\n                          </div>\n                        </div>\n                        <div class=\"__item-info\">\n                          <div class=\"__item-info-body\">\n                            <div class=\"__title-row\">\n                              @let itemTitle = itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async;\n                              @let itemName = itemMultilingualField(ir.item, 'name', ir.view.name) | translate | async;\n                              <h4 class=\"__item-title\" [title]=\"itemTitle + (itemName?.trim() ? ' (' + itemName + ')' : '')\">\n                                {{ itemTitle }}\n                                @if (itemName?.trim()) {\n                                  <span class=\"__item-name-prefix\">({{ itemName }})</span>\n                                }\n                              </h4>\n                            </div>\n                            @let itemDesc = (itemMultilingualField(ir.item, 'description', ir.view.description) | translate | async) || '';\n                            @let itemDescTrimmed = $safeNavigationMigration(itemDesc?.trim());\n                            @if (itemDescTrimmed) {\n                              @if (containsHtmlMarkup(itemDescTrimmed)) {\n                                <!-- ----- Rich HTML item description ----- -->\n                                <div class=\"__item-description __item-description--rich\" [title]=\"tooltipPlainTextForHtml(itemDesc)\" [innerHTML]=\"itemDesc | safe: 'html'\"></div>\n                              } @else {\n                                <!-- ----- Plain text item description ----- -->\n                                <p class=\"__item-description\" [title]=\"itemDescTrimmed\">{{ itemDescTrimmed }}</p>\n                              }\n                            }\n                          </div>\n                          <div class=\"__title-actions\">\n                            @for (b of ir.view.badges; track $index) {\n                              <span\n                                class=\"__item-badge\"\n                                [class.__badge-neutral]=\"!b.variant || b.variant === 'neutral'\"\n                                [class.__badge-accent]=\"b.variant === 'accent'\"\n                                [class.__badge-warning]=\"b.variant === 'warning'\"\n                                [class.__badge-danger]=\"b.variant === 'danger'\"\n                                [class.__badge-success]=\"b.variant === 'success'\"\n                              >\n                                @if (isTranslationKey(b.text)) {\n                                  {{ b.text | translate | async }}\n                                } @else {\n                                  {{ b.text }}\n                                }\n                              </span>\n                            }\n                            @if (!readonlyMode()) {\n                              <!-- ----- Item edit and remove actions ----- -->\n                              <div class=\"__item-actions ax-sm\">\n                                @if (definition().promptEditItem) {\n                                  <ax-button [look]=\"'blank'\" color=\"accent3\" (onClick)=\"onEditItem(ir.item, row.section.id)\">\n                                    <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                                  </ax-button>\n                                }\n                                <ax-button [look]=\"'blank'\" color=\"danger\" (onClick)=\"onRemoveItem(ir.item, row.section.id)\">\n                                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                                </ax-button>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.axp-section-items-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-section-items-builder .__content{flex:1;overflow:auto}.axp-section-items-builder .__sections-container{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging .__section:not(.cdk-drag-placeholder){margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging:has(.__section.cdk-drag-placeholder),.axp-section-items-builder .__sections-container.cdk-drop-list-dragging.cdk-drop-list-receiving:has(.__section.cdk-drag-placeholder){border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);border-color:rgba(var(--ax-sys-color-accent2-surface));padding:calc(var(--spacing, .25rem) * 2)}.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 16);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);border-color:rgba(var(--ax-sys-color-accent2-surface));padding:calc(var(--spacing, .25rem) * 2)}:is(.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving) axp-state-message{display:none}.axp-section-items-builder .__items-list.cdk-drop-list-dragging .__item:not(.cdk-drag-placeholder){margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--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)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);padding:calc(var(--spacing, .25rem) * 3)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-drag-handle{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-drag-handle:active{cursor:grabbing}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info{min-width:0px;flex:1}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-title{margin-bottom:var(--spacing, .25rem);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:var(--spacing, .25rem);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-light, 300);font-weight:var(--font-weight-light, 300);color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-title .__default-section-badge{margin-left:calc(var(--spacing, .25rem) * 2);display:inline-flex;border-radius:.25rem;background-color:var(--color-neutral-100, oklch(97% 0 none));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);overflow-wrap:break-word;color:var(--color-neutral-600, oklch(43.9% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);overflow-wrap:break-word;color:var(--color-neutral-600, oklch(43.9% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich p{margin:0}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich p:first-child{margin-top:0}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich ul{margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;list-style-position:outside;list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 5)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich ol{margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;list-style-position:outside;list-style-type:decimal;padding-inline-start:calc(var(--spacing, .25rem) * 5)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich li{margin-block:calc(var(--spacing, .25rem) * .5);padding-inline-start:var(--spacing, .25rem)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__items-container{padding:calc(var(--spacing, .25rem) * 4)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__items-container .__items-list{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{box-sizing:border-box;opacity:.98;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px 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)}.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--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);-webkit-user-select:none;user-select:none}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__drag-handle{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__drag-handle:active{cursor:grabbing}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);color:rgba(var(--ax-sys-color-accent2-surface));--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)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-surface));color:rgba(var(--ax-sys-color-success-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-easy{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-success-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-warning-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-medium{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-danger-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-hard{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-info{display:flex;min-width:0px;flex:1;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-info-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1;overflow:hidden;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-title .__item-name-prefix{margin-left:var(--spacing, .25rem);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-light, 300);font-weight:var(--font-weight-light, 300);color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);overflow-wrap:break-word;color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);overflow-wrap:break-word;color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich p{margin:0}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich p:first-child{margin-top:0}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich ul{margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;list-style-position:outside;list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 5)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich ol{margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;list-style-position:outside;list-style-type:decimal;padding-inline-start:calc(var(--spacing, .25rem) * 5)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich li{margin-block:calc(var(--spacing, .25rem) * .5);padding-inline-start:var(--spacing, .25rem)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:1px;font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-neutral{border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-neutral-100, oklch(97% 0 none));color:var(--color-neutral-700, oklch(37.1% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-surface));background-color:rgba(var(--ax-sys-color-accent2-surface));color:rgba(var(--ax-sys-color-accent2-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-accent{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-accent2-surface)) 30%,transparent)}}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-accent{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-accent2-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-surface));background-color:rgba(var(--ax-sys-color-warning-lightest-surface));color:rgba(var(--ax-sys-color-warning-800))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-surface)) 40%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-warning-600))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-warning-900))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-900)) 85%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-warning-100))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-surface));background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-danger-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-danger{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-surface)) 40%,transparent)}}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-danger{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-surface));background-color:rgba(var(--ax-sys-color-success-surface));color:rgba(var(--ax-sys-color-success-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-success{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-success-surface)) 40%,transparent)}}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-success{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-success-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__item{cursor:move}.axp-section-items-builder .__item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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)}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{box-sizing:border-box;cursor:grabbing;opacity:.98;--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px 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)}.__section.cdk-drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 32);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);border-color:rgba(var(--ax-sys-color-accent2-surface));opacity:50%}.__section.cdk-drag-dragging{opacity:70%}.__item.cdk-drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 3);min-height:calc(var(--spacing, .25rem) * 20);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);border-color:rgba(var(--ax-sys-color-accent2-surface));opacity:50%}.__item.cdk-drag-placeholder>*{opacity:0%}.__item.cdk-drag-animating{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .25s;transition-duration:.25s}@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;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{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;--tw-leading: initial;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSectionItemsBuilderComponent, isStandalone: true, selector: "axp-section-items-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, readonlyMode: { classPropertyName: "readonlyMode", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "axp-section-items-builder-host" }, ngImport: i0, template: "<div class=\"axp-section-items-builder\" *translate=\"let t\">\n  <div class=\"__content\">\n    @if (sectionsModel().sections.length === 0) {\n      <!-- ----- Empty state when no sections are configured ----- -->\n      <axp-state-message icon=\"fa-light fa-layer-group\" [title]=\"definition().texts.emptySectionsTitle\" [description]=\"definition().texts.emptySectionsDescription\"></axp-state-message>\n    } @else {\n      <!-- ----- Draggable section list when at least one section exists ----- -->\n      <div class=\"__sections-container\" cdkDropList [cdkDropListData]=\"sectionsModel().sections\" (cdkDropListDropped)=\"onSectionDrop($event)\">\n        @for (row of sectionRows(); track row.section.id) {\n          <div class=\"__section\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n            <div class=\"__section-header\">\n              @if (!readonlyMode()) {\n                <!-- ----- Section reorder handle (edit mode only) ----- -->\n                <div class=\"__section-drag-handle\" cdkDragHandle>\n                  <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n                </div>\n              }\n              <div class=\"__section-info\">\n                @let secTitle = sectionTitleValue(row.section) | translate | async;\n                <h3 class=\"__section-title\" [title]=\"secTitle\">\n                  {{ secTitle }}\n                  @if (definition().showSectionTechnicalName) {\n                    @let secTechName = sectionNameValue(row.section) | translate | async;\n                    @if (secTechName?.trim()) {\n                      <span class=\"__section-name-prefix\">({{ secTechName }})</span>\n                    }\n                  }\n                  @if (isDefaultSection(row.section)) {\n                    @if (definition().texts.defaultSectionBadge; as defaultBadge) {\n                      <span class=\"__default-section-badge\">{{ defaultBadge | translate | async }}</span>\n                    }\n                  }\n                </h3>\n                @let secDesc = (sectionDescriptionValue(row.section) | translate | async) || '';\n                @let secDescTrimmed = $safeNavigationMigration(secDesc?.trim());\n                @if (secDescTrimmed) {\n                  @if (containsHtmlMarkup(secDescTrimmed)) {\n                    <!-- ----- Rich HTML section description ----- -->\n                    <div class=\"__section-description __section-description--rich\" [title]=\"tooltipPlainTextForHtml(secDesc)\" [innerHTML]=\"secDesc | safe: 'html'\"></div>\n                  } @else {\n                    <!-- ----- Plain text section description ----- -->\n                    <p class=\"__section-description\" [title]=\"secDescTrimmed\">{{ secDescTrimmed }}</p>\n                  }\n                }\n              </div>\n              @if (!readonlyMode()) {\n                <!-- ----- Section toolbar: add items and inline edit/remove ----- -->\n                <div class=\"__section-actions ax-sm\">\n                  @if (definition().promptAddItems) {\n                    <ax-button [text]=\"definition().texts.addItem | translate | async\" [color]=\"'accent2'\" (onClick)=\"onAddItems(row.section)\">\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button>\n                  }\n                  @if (definition().promptEditSection || canRemoveSection()) {\n                    <div class=\"__section-inline-actions\">\n                      @if (definition().promptEditSection) {\n                        <ax-button [look]=\"'blank'\" color=\"accent3\" (onClick)=\"onEditSection(row.section)\">\n                          <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                        </ax-button>\n                      }\n                      @if (canRemoveSection()) {\n                        <ax-button [look]=\"'blank'\" color=\"danger\" (onClick)=\"onRemoveSection(row.section)\">\n                          <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                        </ax-button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"__items-container\">\n              <div class=\"__items-list\" cdkDropList [id]=\"sectionItemsListId(row.section.id)\" [cdkDropListData]=\"row.section.items\" [cdkDropListConnectedTo]=\"itemDropListIds()\" (cdkDropListDropped)=\"onItemDrop($event, row.section.id)\">\n                @if (row.itemRows.length === 0) {\n                  <!-- ----- Empty state when the section has no items ----- -->\n                  <axp-state-message icon=\"fa-light fa-inbox\" [title]=\"definition().texts.emptyItemsTitle\" [description]=\"definition().texts.emptyItemsDescription\"></axp-state-message>\n                } @else {\n                  <!-- ----- Draggable item rows for this section ----- -->\n                  @for (ir of row.itemRows; track ir.item.id) {\n                    <div class=\"__item\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n                      @if (!readonlyMode()) {\n                        <!-- ----- Item reorder handle (edit mode only) ----- -->\n                        <div class=\"__drag-handle\" cdkDragHandle>\n                          <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n                        </div>\n                      }\n                      <div class=\"__item-content\">\n                        <div class=\"__item-leading\" [title]=\"itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async\">\n                          <div class=\"__item-icon\" [class.__tone-easy]=\"ir.view.iconTone === 'easy'\" [class.__tone-medium]=\"ir.view.iconTone === 'medium'\" [class.__tone-hard]=\"ir.view.iconTone === 'hard'\">\n                            <ax-icon [icon]=\"ir.view.icon\"></ax-icon>\n                          </div>\n                        </div>\n                        <div class=\"__item-info\">\n                          <div class=\"__item-info-body\">\n                            <div class=\"__title-row\">\n                              @let itemTitle = itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async;\n                              @let itemName = itemMultilingualField(ir.item, 'name', ir.view.name) | translate | async;\n                              <h4 class=\"__item-title\" [title]=\"itemTitle + (itemName?.trim() ? ' (' + itemName + ')' : '')\">\n                                {{ itemTitle }}\n                                @if (itemName?.trim()) {\n                                  <span class=\"__item-name-prefix\">({{ itemName }})</span>\n                                }\n                              </h4>\n                            </div>\n                            @let itemDesc = (itemMultilingualField(ir.item, 'description', ir.view.description) | translate | async) || '';\n                            @let itemDescTrimmed = $safeNavigationMigration(itemDesc?.trim());\n                            @if (itemDescTrimmed) {\n                              @if (containsHtmlMarkup(itemDescTrimmed)) {\n                                <!-- ----- Rich HTML item description ----- -->\n                                <div class=\"__item-description __item-description--rich\" [title]=\"tooltipPlainTextForHtml(itemDesc)\" [innerHTML]=\"itemDesc | safe: 'html'\"></div>\n                              } @else {\n                                <!-- ----- Plain text item description ----- -->\n                                <p class=\"__item-description\" [title]=\"itemDescTrimmed\">{{ itemDescTrimmed }}</p>\n                              }\n                            }\n                          </div>\n                          <div class=\"__title-actions\">\n                            @for (b of ir.view.badges; track $index) {\n                              <span\n                                class=\"__item-badge\"\n                                [class.__badge-neutral]=\"!b.variant || b.variant === 'neutral'\"\n                                [class.__badge-accent]=\"b.variant === 'accent'\"\n                                [class.__badge-warning]=\"b.variant === 'warning'\"\n                                [class.__badge-danger]=\"b.variant === 'danger'\"\n                                [class.__badge-success]=\"b.variant === 'success'\"\n                              >\n                                @if (isTranslationKey(b.text)) {\n                                  {{ b.text | translate | async }}\n                                } @else {\n                                  {{ b.text }}\n                                }\n                              </span>\n                            }\n                            @if (!readonlyMode()) {\n                              <!-- ----- Item edit and remove actions ----- -->\n                              <div class=\"__item-actions ax-sm\">\n                                @if (definition().promptEditItem) {\n                                  <ax-button [look]=\"'blank'\" color=\"accent3\" (onClick)=\"onEditItem(ir.item, row.section.id)\">\n                                    <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n                                  </ax-button>\n                                }\n                                <ax-button [look]=\"'blank'\" color=\"danger\" (onClick)=\"onRemoveItem(ir.item, row.section.id)\">\n                                  <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n                                </ax-button>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.axp-section-items-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-section-items-builder .__content{flex:1;overflow:auto}.axp-section-items-builder .__sections-container{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging .__section:not(.cdk-drag-placeholder){margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging:has(.__section.cdk-drag-placeholder),.axp-section-items-builder .__sections-container.cdk-drop-list-dragging.cdk-drop-list-receiving:has(.__section.cdk-drag-placeholder){border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);border-color:rgba(var(--ax-sys-color-accent2-surface));padding:calc(var(--spacing, .25rem) * 2)}.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 16);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);border-color:rgba(var(--ax-sys-color-accent2-surface));padding:calc(var(--spacing, .25rem) * 2)}:is(.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving) axp-state-message{display:none}.axp-section-items-builder .__items-list.cdk-drop-list-dragging .__item:not(.cdk-drag-placeholder){margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--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)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);padding:calc(var(--spacing, .25rem) * 3)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-drag-handle{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-drag-handle:active{cursor:grabbing}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info{min-width:0px;flex:1}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-title{margin-bottom:var(--spacing, .25rem);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:var(--spacing, .25rem);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-light, 300);font-weight:var(--font-weight-light, 300);color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-title .__default-section-badge{margin-left:calc(var(--spacing, .25rem) * 2);display:inline-flex;border-radius:.25rem;background-color:var(--color-neutral-100, oklch(97% 0 none));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);overflow-wrap:break-word;color:var(--color-neutral-600, oklch(43.9% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);overflow-wrap:break-word;color:var(--color-neutral-600, oklch(43.9% 0 none))}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich p{margin:0}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich p:first-child{margin-top:0}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich ul{margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;list-style-position:outside;list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 5)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich ol{margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;list-style-position:outside;list-style-type:decimal;padding-inline-start:calc(var(--spacing, .25rem) * 5)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-info .__section-description.__section-description--rich li{margin-block:calc(var(--spacing, .25rem) * .5);padding-inline-start:var(--spacing, .25rem)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__items-container{padding:calc(var(--spacing, .25rem) * 4)}:is(.axp-section-items-builder .__section,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section) .__items-container .__items-list{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{box-sizing:border-box;opacity:.98;--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px 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)}.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--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);-webkit-user-select:none;user-select:none}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__drag-handle{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__drag-handle:active{cursor:grabbing}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);color:rgba(var(--ax-sys-color-accent2-surface));--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)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-surface));color:rgba(var(--ax-sys-color-success-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-easy{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-success-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-surface));color:rgba(var(--ax-sys-color-warning-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-medium{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-danger-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-icon.__tone-hard{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-info{display:flex;min-width:0px;flex:1;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-info-body{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1;overflow:hidden;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-title .__item-name-prefix{margin-left:var(--spacing, .25rem);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-light, 300);font-weight:var(--font-weight-light, 300);color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);overflow-wrap:break-word;color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);overflow-wrap:break-word;color:var(--color-neutral-500, oklch(55.6% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich p{margin:0}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich p:first-child{margin-top:0}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich ul{margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;list-style-position:outside;list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 5)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich ol{margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;list-style-position:outside;list-style-type:decimal;padding-inline-start:calc(var(--spacing, .25rem) * 5)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-description.__item-description--rich li{margin-block:calc(var(--spacing, .25rem) * .5);padding-inline-start:var(--spacing, .25rem)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 2)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:1px;font-size:.6875rem;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-neutral{border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-neutral-100, oklch(97% 0 none));color:var(--color-neutral-700, oklch(37.1% 0 none))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-surface));background-color:rgba(var(--ax-sys-color-accent2-surface));color:rgba(var(--ax-sys-color-accent2-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-accent{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-accent2-surface)) 30%,transparent)}}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-accent{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-accent2-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-surface));background-color:rgba(var(--ax-sys-color-warning-lightest-surface));color:rgba(var(--ax-sys-color-warning-800))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-surface)) 40%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-warning-600))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-warning-900))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-900)) 85%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-warning:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-warning-100))}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-surface));background-color:rgba(var(--ax-sys-color-danger-surface));color:rgba(var(--ax-sys-color-danger-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-danger{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-surface)) 40%,transparent)}}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-danger{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-danger-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-surface));background-color:rgba(var(--ax-sys-color-success-surface));color:rgba(var(--ax-sys-color-success-surface))}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-success{border-color:color-mix(in oklab,rgba(var(--ax-sys-color-success-surface)) 40%,transparent)}}@supports (color: color-mix(in lab,red,red)){:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-badge.__badge-success{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-success-surface)) 10%,transparent)}}:is(.axp-section-items-builder .__item,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item) .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__item{cursor:move}.axp-section-items-builder .__item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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)}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{box-sizing:border-box;cursor:grabbing;opacity:.98;--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px 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)}.__section.cdk-drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 4);min-height:calc(var(--spacing, .25rem) * 32);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);border-color:rgba(var(--ax-sys-color-accent2-surface));opacity:50%}.__section.cdk-drag-dragging{opacity:70%}.__item.cdk-drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 3);min-height:calc(var(--spacing, .25rem) * 20);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:2px;--tw-border-style: dashed;border-style:dashed;background-color:var(--color-accent2-lightest);color:var(--color-on-accent2-lightest);border-color:var(--color-border-accent2-lightest);border-color:rgba(var(--ax-sys-color-accent2-surface));opacity:50%}.__item.cdk-drag-placeholder>*{opacity:0%}.__item.cdk-drag-animating{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .25s;transition-duration:.25s}@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;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-duration{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;--tw-leading: initial;--tw-duration: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSectionItemsBuilderComponent, decorators: [{
             type: Component,
@@ -11434,7 +11497,7 @@ class AXPQuerySortsComponent {
         this.sortQueriesChange.emit(sorts);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null }, defaultSortQueries: { classPropertyName: "defaultSortQueries", publicName: "defaultSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"axp-query-sorts flex flex-col select-none\">\n  <div class=\"axp-query-sorts__header flex items-center justify-between gap-2 border-b border-border-light px-4 py-3\">\n    <div class=\"flex min-w-0 items-center gap-2 font-bold\">\n      <ax-icon class=\"fa-light fa-sort-amount-up\"></ax-icon>\n      <span class=\"min-w-0 truncate\">{{ '@general:terms.interface.sort.title' | translate | async }}</span>\n    </div>\n    <ax-button\n      class=\"ax-sm\"\n      [look]=\"'blank'\"\n      [color]=\"'primary'\"\n      [disabled]=\"!canReset()\"\n      [text]=\"'@general:terms.interface.sort.clear' | translate | async\"\n      (onClick)=\"resetSorts()\"\n    ></ax-button>\n  </div>\n\n  <div class=\"axp-query-sorts__body flex flex-col gap-3 px-4 py-2\">\n    @if (hasPresets()) {\n      <!-- ----- Named recipes from entity.interfaces.master.list.sortPresets ----- -->\n      <section class=\"flex flex-col gap-1\">\n        <div class=\"axp-query-sorts__section-label\">\n          {{ '@general:terms.interface.sort.quick-presets' | translate | async }}\n        </div>\n        <div class=\"flex flex-col\">\n          @for (preset of sortPresets(); track preset.name) {\n            <button\n              type=\"button\"\n              class=\"axp-query-sorts__preset\"\n              [class.axp-query-sorts__preset--active]=\"isPresetActive(preset)\"\n              (click)=\"applyPreset(preset)\"\n            >\n              <span class=\"flex min-w-0 items-center gap-2\">\n                <span\n                  class=\"axp-query-sorts__radio\"\n                  [class.axp-query-sorts__radio--on]=\"isPresetActive(preset)\"\n                ></span>\n                <span class=\"min-w-0 truncate font-medium text-sm\">\n                  {{ preset.title | translate | async }}\n                  <!--->\n                  <!-- ----- Optional subtitle from the entity preset ----- -->\n                  @if (preset.description) {\n                    <span class=\"text-neutral-400 font-normal\">\n                      ({{ preset.description | translate | async }})\n                    </span>\n                  }\n                </span>\n              </span>\n              <span class=\"axp-query-sorts__hint shrink-0\">\n                <!--->\n                <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n                @if (preset.icon) {\n                  <ax-icon [class]=\"preset.icon\"></ax-icon>\n                }\n                <!-- ----- Direction arrow when the recipe has no custom icon ----- -->\n                @else if (presetFirstDir(preset) === 'desc') {\n                  <ax-icon class=\"fa-solid fa-arrow-down-long\"></ax-icon>\n                }\n                <!-- ----- Ascending hint when the first sort is ascending ----- -->\n                @else if (presetFirstDir(preset) === 'asc') {\n                  <ax-icon class=\"fa-solid fa-arrow-up-long\"></ax-icon>\n                }\n                <!--->\n                <!-- ----- Optional hint label from the entity preset ----- -->\n                @if (preset.hint) {\n                  <span dir=\"ltr\">{{ preset.hint | translate | async }}</span>\n                }\n              </span>\n            </button>\n          }\n        </div>\n      </section>\n    }\n\n    @if (sortQueries().length) {\n      <!-- ----- Per-field sort toggles from property options.sort ----- -->\n      <section class=\"flex flex-col gap-1\">\n        <!--->\n        <!-- ----- Section title only when quick presets are also shown ----- -->\n        @if (hasPresets()) {\n          <div class=\"axp-query-sorts__section-label\">\n            {{ '@general:terms.interface.sort.custom-fields' | translate | async }}\n          </div>\n        }\n        <div\n          class=\"flex flex-col w-full ax-sorted-list overflow-x-hidden\"\n          cdkDropList\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (item of sortQueries(); track item.name) {\n            <div\n              class=\"axp-query-sorts__field\"\n              cdkDrag\n              cdkDragBoundary=\".ax-sorted-list\"\n            >\n              <div class=\"flex min-w-0 items-center gap-3\" cdkDragHandle>\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move text-neutral-400\"></ax-icon>\n                <p class=\"font-medium text-sm truncate\">\n                  {{ item.title | translate | async }}\n                </p>\n              </div>\n              <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n                <ax-icon\n                  [class.text-primary]=\"getSortDirection(item) === 'asc'\"\n                  class=\"fa-solid fa-arrow-up-long text-neutral-400\"\n                ></ax-icon>\n                <ax-icon\n                  [class.text-primary]=\"getSortDirection(item) === 'desc'\"\n                  class=\"fa-solid fa-arrow-down-long text-neutral-400\"\n                ></ax-icon>\n              </ax-button>\n            </div>\n          }\n        </div>\n      </section>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.axp-query-sorts{display:flex;max-height:min(28rem,70vh);min-width:0px;flex-direction:column}.axp-query-sorts__header{flex-shrink:0}.axp-query-sorts__body{min-height:0px;overflow-y:auto}.axp-query-sorts__section-label{padding-inline:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wider, .05em);letter-spacing:var(--tracking-wider, .05em);color:var(--color-neutral-400, oklch(70.8% 0 none));text-transform:uppercase}.axp-query-sorts__preset{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);text-align:start}.axp-query-sorts__preset:hover:not(.axp-query-sorts__preset--active){background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-query-sorts__preset--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-query-sorts__preset--active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-query-sorts__field{display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding-block:calc(var(--spacing, .25rem) * .5)}.axp-query-sorts__radio{display:inline-block;height:calc(var(--spacing, .25rem) * 2.5);width:calc(var(--spacing, .25rem) * 2.5);flex-shrink:0;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-300, oklch(87% 0 none))}.axp-query-sorts__radio--on{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-sorts__hint{display:flex;align-items:center;gap:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-query-sorts__preset--active .axp-query-sorts__hint{color:rgba(var(--ax-sys-color-primary-surface))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null }, defaultSortQueries: { classPropertyName: "defaultSortQueries", publicName: "defaultSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"axp-query-sorts flex flex-col select-none\">\n  <div class=\"axp-query-sorts__header flex items-center justify-between gap-2 border-b border-border-light px-4 py-3\">\n    <div class=\"flex min-w-0 items-center gap-2 font-bold\">\n      <ax-icon class=\"fa-light fa-sort-amount-up\"></ax-icon>\n      <span class=\"min-w-0 truncate\">{{ '@general:terms.interface.sort.title' | translate | async }}</span>\n    </div>\n    <ax-button\n      class=\"ax-sm\"\n      [look]=\"'blank'\"\n      [color]=\"'primary'\"\n      [disabled]=\"!canReset()\"\n      [text]=\"'@general:terms.interface.sort.clear' | translate | async\"\n      (onClick)=\"resetSorts()\"\n    ></ax-button>\n  </div>\n\n  <div class=\"axp-query-sorts__body flex flex-col gap-3 px-4 py-2\">\n    @if (hasPresets()) {\n      <!-- ----- Named recipes from entity.interfaces.master.list.sortPresets ----- -->\n      <section class=\"flex flex-col gap-1\">\n        <div class=\"axp-query-sorts__section-label\">\n          {{ '@general:terms.interface.sort.quick-presets' | translate | async }}\n        </div>\n        <div class=\"flex flex-col\">\n          @for (preset of sortPresets(); track preset.name) {\n            <button\n              type=\"button\"\n              class=\"axp-query-sorts__preset\"\n              [class.axp-query-sorts__preset--active]=\"isPresetActive(preset)\"\n              (click)=\"applyPreset(preset)\"\n            >\n              <span class=\"flex min-w-0 items-center gap-2\">\n                <span\n                  class=\"axp-query-sorts__radio\"\n                  [class.axp-query-sorts__radio--on]=\"isPresetActive(preset)\"\n                ></span>\n                <span class=\"min-w-0 truncate font-medium text-sm\">\n                  {{ preset.title | translate | async }}\n                  <!--->\n                  <!-- ----- Optional subtitle from the entity preset ----- -->\n                  @if (preset.description) {\n                    <span class=\"text-neutral-400 font-normal\">\n                      ({{ preset.description | translate | async }})\n                    </span>\n                  }\n                </span>\n              </span>\n              <span class=\"axp-query-sorts__hint shrink-0\">\n                <!--->\n                <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n                @if (preset.icon) {\n                  <ax-icon [class]=\"preset.icon\"></ax-icon>\n                }\n                <!-- ----- Direction arrow when the recipe has no custom icon ----- -->\n                @else if (presetFirstDir(preset) === 'desc') {\n                  <ax-icon class=\"fa-solid fa-arrow-down-long\"></ax-icon>\n                }\n                <!-- ----- Ascending hint when the first sort is ascending ----- -->\n                @else if (presetFirstDir(preset) === 'asc') {\n                  <ax-icon class=\"fa-solid fa-arrow-up-long\"></ax-icon>\n                }\n                <!--->\n                <!-- ----- Optional hint label from the entity preset ----- -->\n                @if (preset.hint) {\n                  <span dir=\"ltr\">{{ preset.hint | translate | async }}</span>\n                }\n              </span>\n            </button>\n          }\n        </div>\n      </section>\n    }\n\n    @if (sortQueries().length) {\n      <!-- ----- Per-field sort toggles from property options.sort ----- -->\n      <section class=\"flex flex-col gap-1\">\n        <!--->\n        <!-- ----- Section title only when quick presets are also shown ----- -->\n        @if (hasPresets()) {\n          <div class=\"axp-query-sorts__section-label\">\n            {{ '@general:terms.interface.sort.custom-fields' | translate | async }}\n          </div>\n        }\n        <div\n          class=\"flex flex-col w-full ax-sorted-list overflow-x-hidden\"\n          cdkDropList\n          (cdkDropListDropped)=\"drop($event)\"\n        >\n          @for (item of sortQueries(); track item.name) {\n            <div\n              class=\"axp-query-sorts__field\"\n              cdkDrag\n              cdkDragBoundary=\".ax-sorted-list\"\n            >\n              <div class=\"flex min-w-0 items-center gap-3\" cdkDragHandle>\n                <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move text-neutral-400\"></ax-icon>\n                <p class=\"font-medium text-sm truncate\">\n                  {{ item.title | translate | async }}\n                </p>\n              </div>\n              <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n                <ax-icon\n                  [class.text-primary]=\"getSortDirection(item) === 'asc'\"\n                  class=\"fa-solid fa-arrow-up-long text-neutral-400\"\n                ></ax-icon>\n                <ax-icon\n                  [class.text-primary]=\"getSortDirection(item) === 'desc'\"\n                  class=\"fa-solid fa-arrow-down-long text-neutral-400\"\n                ></ax-icon>\n              </ax-button>\n            </div>\n          }\n        </div>\n      </section>\n    }\n  </div>\n</div>\n", styles: ["@layer properties;.axp-query-sorts{display:flex;max-height:min(28rem,70vh);min-width:0px;flex-direction:column}.axp-query-sorts__header{flex-shrink:0}.axp-query-sorts__body{min-height:0px;overflow-y:auto}.axp-query-sorts__section-label{padding-inline:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wider, .05em);letter-spacing:var(--tracking-wider, .05em);color:var(--color-neutral-400, oklch(70.8% 0 none));text-transform:uppercase}.axp-query-sorts__preset{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);text-align:start}.axp-query-sorts__preset:hover:not(.axp-query-sorts__preset--active){background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-query-sorts__preset--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-query-sorts__preset--active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-query-sorts__field{display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding-block:calc(var(--spacing, .25rem) * .5)}.axp-query-sorts__radio{display:inline-block;height:calc(var(--spacing, .25rem) * 2.5);width:calc(var(--spacing, .25rem) * 2.5);flex-shrink:0;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-300, oklch(87% 0 none))}.axp-query-sorts__radio--on{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-sorts__hint{display:flex;align-items:center;gap:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-query-sorts__preset--active .axp-query-sorts__hint{color:rgba(var(--ax-sys-color-primary-surface))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-font-weight: initial;--tw-tracking: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
             type: Component,
@@ -11761,8 +11824,41 @@ function normalizeSpreadsheetColumnName(raw) {
         .replace(/^-+|-+$/g, '');
 }
 
+//#region ----   Constants   ----
+/** Portaled editor panels. Clicks here must keep cell focus until the option commits. */
+const AXP_SPREADSHEET_OVERLAY_SELECTOR = [
+    '.ax-combo-box-popup',
+    '.ax-lookup-popup',
+    '.ax-select-box-panel',
+    '.ax-dropdown-panel',
+    '.ax-dropdown',
+    '.ax-popup',
+    'ax-popover',
+].join(', ');
+const AXP_SPREADSHEET_OVERLAY_OPTION_SELECTOR = '[role="option"], .ax-combo-box-option-host';
+function readWidgetValidationRules(widget) {
+    const raw = widget.options?.['validations'];
+    if (raw == null) {
+        return [];
+    }
+    const list = Array.isArray(raw) ? raw : Object.values(raw);
+    return list.filter((item) => {
+        if (item == null || typeof item !== 'object') {
+            return false;
+        }
+        const rule = item;
+        return typeof rule.rule === 'string' && rule.rule.length > 0 && rule.disabled !== true;
+    });
+}
+function cellValidationKey(rowId, columnName) {
+    return `${rowId}\0${columnName}`;
+}
+//#endregion
 //#region ----   Component Definition   ----
 class AXPSpreadsheetComponent {
+    bandColumn(band) {
+        return band.kind === 'leaf' ? band.column : null;
+    }
     //#endregion
     //#region ----   Lifecycle Methods   ----
     constructor() {
@@ -11775,6 +11871,7 @@ class AXPSpreadsheetComponent {
         this.injector = inject(Injector);
         this.widgetRegistry = inject(AXPWidgetRegistryService);
         this.widgetPropertyViewer = inject(AXPWidgetPropertyViewerService);
+        this.validationService = inject(AXValidationService);
         this.chromeDropdowns = viewChildren(AXDropdownButtonComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "chromeDropdowns" }] : /* istanbul ignore next */ []));
         //#endregion
@@ -11862,6 +11959,25 @@ class AXPSpreadsheetComponent {
          */
         this.showCellActions = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showCellActions" }] : /* istanbul ignore next */ []));
+        /**
+         * Leading row-header column (index, row title, add/remove).
+         * Set false when the sheet is only the configured columns.
+         * A row group path still shows the leading column.
+         */
+        this.showRowHeader = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showRowHeader" }] : /* istanbul ignore next */ []));
+        /**
+         * Row property whose equal consecutive values render as one merged title.
+         * Example: '__groupTitle'
+         */
+        this.rowGroupPath = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowGroupPath" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional widget per row `name`.
+         * When set, that row uses this widget instead of the column widget.
+         */
+        this.rowWidgets = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowWidgets" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Outputs   ----
         /**
@@ -11929,6 +12045,9 @@ class AXPSpreadsheetComponent {
          * Key: `${rowIndex}_${columnName}`, Value: any
          */
         this.cellValueCache = new Map();
+        /** Validation message for a cell, keyed by row id and column name. Empty string still means invalid. */
+        this.cellValidationMessages = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellValidationMessages" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----   Computed Properties   ----
         /**
@@ -11939,10 +12058,86 @@ class AXPSpreadsheetComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentColumns" }] : /* istanbul ignore next */ []));
         /**
-         * Excel-style numeric index when the host does not supply a row title column.
+         * Leading column for the row index, row title, or merged row group.
+         */
+        this.showLeadingColumn = computed(() => this.showRowHeader() || !!this.rowGroupPath(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLeadingColumn" }] : /* istanbul ignore next */ []));
+        /**
+         * Numeric row index. Hidden when a row title or a merged row group occupies the leading column.
+         */
+        this.showRowIndex = computed(() => this.showLeadingColumn() && !this.rowTitlePath() && !this.rowGroupPath(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showRowIndex" }] : /* istanbul ignore next */ []));
+        /**
+         * True when at least one column carries a merged group title.
+         */
+        this.hasColumnGroups = computed(() => this.currentColumns().some((column) => (column.groupTitle ?? '').trim().length > 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasColumnGroups" }] : /* istanbul ignore next */ []));
+        /**
+         * First header row: a group band, or a single column that spans both header rows.
+         */
+        this.columnHeaderBands = computed(() => {
+            const bands = [];
+            for (const column of this.currentColumns()) {
+                const title = (column.groupTitle ?? '').trim();
+                const previous = bands[bands.length - 1];
+                if (title && previous?.kind === 'group' && previous.title === title) {
+                    previous.colspan += 1;
+                    continue;
+                }
+                if (title) {
+                    bands.push({ kind: 'group', title, colspan: 1 });
+                    continue;
+                }
+                bands.push({ kind: 'leaf', column });
+            }
+            return bands;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnHeaderBands" }] : /* istanbul ignore next */ []));
+        /**
+         * Leaf headers that sit under a merged column group.
          */
-        this.useExcelRowIndex = computed(() => !this.rowTitlePath(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "useExcelRowIndex" }] : /* istanbul ignore next */ []));
+        this.groupedColumns = computed(() => this.currentColumns().filter((column) => (column.groupTitle ?? '').trim().length > 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupedColumns" }] : /* istanbul ignore next */ []));
+        /**
+         * One entry per body row. `show` is false on rows covered by a rowspan above them.
+         */
+        this.rowLeadingCells = computed(() => {
+            const rows = this.rowsWithIds();
+            const path = this.rowGroupPath();
+            if (!path) {
+                return rows.map(() => ({ show: true, rowspan: 1, title: '' }));
+            }
+            const titles = rows.map((item) => {
+                const value = item.row?.[path];
+                return typeof value === 'string' ? value.trim() : '';
+            });
+            const cells = titles.map((title) => ({ show: true, rowspan: 1, title }));
+            let index = 0;
+            while (index < titles.length) {
+                const title = titles[index];
+                if (!title) {
+                    index += 1;
+                    continue;
+                }
+                let end = index + 1;
+                while (end < titles.length && titles[end] === title) {
+                    end += 1;
+                }
+                cells[index] = { show: true, rowspan: end - index, title };
+                for (let cursor = index + 1; cursor < end; cursor += 1) {
+                    cells[cursor] = { show: false, rowspan: 0, title };
+                }
+                index = end;
+            }
+            return cells;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowLeadingCells" }] : /* istanbul ignore next */ []));
+        this.emptyRowColspan = computed(() => {
+            const addColumn = this.allowAddColumns() && !this.readonly() ? 1 : 0;
+            const leading = this.showLeadingColumn() ? 1 : 0;
+            return this.currentColumns().length + leading + addColumn;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyRowColspan" }] : /* istanbul ignore next */ []));
         /**
          * Get current rows based on mode
          */
@@ -12030,6 +12225,65 @@ class AXPSpreadsheetComponent {
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "supportedColumnWidgets" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Cell Value Methods   ----
+        /**
+         * One form item for the whole sheet.
+         * `ax-form` runs this callback on submit, the same way a text box runs `ax-validation-rule`.
+         */
+        this.sheetValidationOptions = {
+            validate: async () => {
+                if (this.readonly()) {
+                    return { result: true };
+                }
+                for (const item of this.rowsWithIds()) {
+                    for (const column of this.currentColumns()) {
+                        const widget = this.resolveCellWidget(item.row, column);
+                        if (this.isCellReadonly(item.row, column)) {
+                            continue;
+                        }
+                        const rules = readWidgetValidationRules(widget);
+                        if (rules.length === 0) {
+                            continue;
+                        }
+                        const message = await this.firstValidationMessage(get(item.row, column.path), rules);
+                        if (message != null) {
+                            return { result: false, message };
+                        }
+                    }
+                }
+                return { result: true };
+            },
+        };
+        /**
+         * Keep focus on the cell input while the pointer is down on a portaled list.
+         * Combo boxes close on trigger blur before the option click, which drops the selection.
+         */
+        this.onDocumentMouseDown = (event) => {
+            if (!this.editingCell() || !this.isWidgetOverlayTarget(event.target)) {
+                return;
+            }
+            event.preventDefault();
+        };
+        /**
+         * Close the cell after an overlay option has committed its value.
+         */
+        this.onDocumentClick = (event) => {
+            if (!this.editingCell() || !this.isWidgetOverlayOptionTarget(event.target)) {
+                return;
+            }
+            setTimeout(() => {
+                if (this.editingCell()) {
+                    this.commitCellEdit();
+                }
+            });
+        };
+        document.addEventListener('mousedown', this.onDocumentMouseDown, true);
+        document.addEventListener('click', this.onDocumentClick);
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('mousedown', this.onDocumentMouseDown, true);
+            document.removeEventListener('click', this.onDocumentClick);
+        });
         this.shortcutRegistry.register({
             owner: this.destroyRef,
             elementRef: this.elementRef,
@@ -12064,12 +12318,14 @@ class AXPSpreadsheetComponent {
                     keys: ['enter'],
                     title: '@general:widgets.spreadsheet.next-row',
                     allowInEditableFields: true,
+                    when: () => !this.isEditorOverlayOpen(),
                     handler: () => this.handleCellNavigate('down'),
                 },
                 {
                     keys: ['shift+enter'],
                     title: '@general:widgets.spreadsheet.previous-row',
                     allowInEditableFields: true,
+                    when: () => !this.isEditorOverlayOpen(),
                     handler: () => this.handleCellNavigate('up'),
                 },
                 {
@@ -12147,12 +12403,16 @@ class AXPSpreadsheetComponent {
         });
         // Initialize rows from input (fixed mode)
         this.internalRows.set(this.rowsInput());
-        // Watch for rowsInput changes and update internalRows (fixed mode only)
+        // Watch for rowsInput changes and update internalRows (fixed mode only).
+        // Skip equal payloads so a parent echo does not rebuild every cell widget.
         effect(() => {
             const rowsInput = this.rowsInput();
             const rowMode = this.rowMode();
-            // Only update internalRows in fixed mode
-            if (rowMode === 'fixed') {
+            if (rowMode !== 'fixed') {
+                return;
+            }
+            const current = untracked(() => this.internalRows());
+            if (!isEqual(rowsInput, current)) {
                 this.internalRows.set(rowsInput);
             }
         });
@@ -12167,6 +12427,15 @@ class AXPSpreadsheetComponent {
             }
             previousColumnsRef = cols;
         });
+        let previousRowWidgets;
+        effect(() => {
+            const widgets = this.rowWidgets();
+            if (previousRowWidgets !== undefined && previousRowWidgets !== widgets) {
+                this.widgetNodeCache.clear();
+                this.cellValueCache.clear();
+            }
+            previousRowWidgets = widgets;
+        });
         effect(() => {
             const editing = this.editingCell();
             if (!editing) {
@@ -12174,9 +12443,66 @@ class AXPSpreadsheetComponent {
             }
             afterNextRender(() => this.scheduleFocusEditingEditor(), { injector: this.injector });
         });
+        effect((onCleanup) => {
+            const columns = this.currentColumns();
+            const rows = this.rowsWithIds().map((item) => ({
+                rowId: item.rowId,
+                cells: columns
+                    .filter((column) => {
+                    const widget = this.resolveCellWidget(item.row, column);
+                    return !this.isCellReadonly(item.row, column) && readWidgetValidationRules(widget).length > 0;
+                })
+                    .map((column) => ({
+                    columnName: column.name,
+                    value: get(item.row, column.path),
+                    rules: readWidgetValidationRules(this.resolveCellWidget(item.row, column)),
+                })),
+            }));
+            let cancelled = false;
+            onCleanup(() => {
+                cancelled = true;
+            });
+            void this.refreshCellValidation(rows, () => cancelled);
+        });
+    }
+    cellValidationMessage(rowId, columnName) {
+        const key = cellValidationKey(rowId, columnName);
+        const messages = this.cellValidationMessages();
+        if (!messages.has(key)) {
+            return null;
+        }
+        return messages.get(key) ?? '';
+    }
+    async refreshCellValidation(rows, isCancelled) {
+        const next = new Map();
+        for (const row of rows) {
+            for (const cell of row.cells) {
+                const message = await this.firstValidationMessage(cell.value, cell.rules);
+                if (isCancelled()) {
+                    return;
+                }
+                if (message != null) {
+                    next.set(cellValidationKey(row.rowId, cell.columnName), message);
+                }
+            }
+        }
+        if (!isCancelled()) {
+            this.cellValidationMessages.set(next);
+        }
+    }
+    async firstValidationMessage(value, rules) {
+        for (const rule of rules) {
+            const options = {
+                ...(rule.options ?? {}),
+                ...(rule.message ? { message: rule.message } : {}),
+            };
+            const outcome = await this.validationService.validate(rule.rule, value, options);
+            if (!outcome.result) {
+                return outcome.message || rule.message || '';
+            }
+        }
+        return null;
     }
-    //#endregion
-    //#region ----   Cell Value Methods   ----
     /**
      * Get the value for a specific cell by row index
      */
@@ -12245,6 +12571,30 @@ class AXPSpreadsheetComponent {
     isColumnReadonly(column) {
         return this.readonly() || column.readonly === true;
     }
+    /**
+     * Sheet, column, or row-widget readonly.
+     */
+    isCellReadonly(row, column) {
+        return this.isColumnReadonly(column) || this.rowWidgetByName(row)?.readonly === true;
+    }
+    rowWidgetByName(row) {
+        const widgets = this.rowWidgets();
+        if (!widgets || !row) {
+            return undefined;
+        }
+        const name = row['name'];
+        if (typeof name !== 'string' || name.length === 0) {
+            return undefined;
+        }
+        return widgets.find((item) => item.name === name);
+    }
+    resolveCellWidget(row, column) {
+        const override = this.rowWidgetByName(row);
+        if (override?.readonly) {
+            return { type: AXPWidgetsList.Editors.TextBox, options: {} };
+        }
+        return override?.widget ?? column.widget;
+    }
     /**
      * Get widget node for a cell with dynamic path based on row index
      * Path format: rows[rowIndex].column.path
@@ -12256,16 +12606,18 @@ class AXPSpreadsheetComponent {
         const row = rows[rowIndex];
         const currentValue = row ? get(row, column.path, null) : null;
         const cachedValue = this.cellValueCache.get(cacheKey);
+        const source = this.resolveCellWidget(row, column);
         // Get or create widget node
         let widgetNode = this.widgetNodeCache.get(cacheKey);
-        if (!widgetNode) {
+        if (!widgetNode || widgetNode.type !== source.type) {
             // Create path: rows[index].column.path
             const dynamicPath = `rows.${rowIndex}.${column.path}`;
+            const defaultValue = currentValue !== null && currentValue !== undefined ? currentValue : source.defaultValue;
             // Create new widget node
             widgetNode = {
-                ...column.widget,
+                ...source,
                 path: dynamicPath,
-                defaultValue: currentValue !== null && currentValue !== undefined ? currentValue : column.widget.defaultValue,
+                defaultValue,
             };
             // Cache the widget node
             this.widgetNodeCache.set(cacheKey, widgetNode);
@@ -12276,7 +12628,7 @@ class AXPSpreadsheetComponent {
             widgetNode.path = `rows.${rowIndex}.${column.path}`;
             // Only update defaultValue if value actually changed (to prevent re-renders)
             if (cachedValue !== currentValue) {
-                widgetNode.defaultValue = currentValue !== null && currentValue !== undefined ? currentValue : column.widget.defaultValue;
+                widgetNode.defaultValue = currentValue !== null && currentValue !== undefined ? currentValue : source.defaultValue;
                 this.cellValueCache.set(cacheKey, currentValue);
             }
         }
@@ -12299,7 +12651,8 @@ class AXPSpreadsheetComponent {
             }
         }
         const column = this.currentColumns().find((col) => col.name === columnName);
-        if (!column || this.isColumnReadonly(column)) {
+        const row = this.getRowById(rowId);
+        if (!column || this.isCellReadonly(row, column)) {
             return;
         }
         // Don't open if already editing this cell
@@ -12308,7 +12661,6 @@ class AXPSpreadsheetComponent {
             return;
         }
         // Store original value for cancel functionality
-        const row = this.getRowById(rowId);
         if (row) {
             const originalValue = get(row, column.path, null);
             this.originalCellValue.set(originalValue);
@@ -12421,28 +12773,49 @@ class AXPSpreadsheetComponent {
             this.spreadsheetChange.emit([...this.currentRows()]);
         }
     }
+    /** True while a select, lookup, or date panel is open for the active cell. */
+    isEditorOverlayOpen() {
+        return getVisibleAnchoredOverlayPanes(document).length > 0;
+    }
+    isWidgetOverlayTarget(target) {
+        const element = this.eventElement(target);
+        return Boolean(element?.closest(AXP_SPREADSHEET_OVERLAY_SELECTOR));
+    }
+    isWidgetOverlayOptionTarget(target) {
+        const element = this.eventElement(target);
+        return Boolean(element?.closest(AXP_SPREADSHEET_OVERLAY_OPTION_SELECTOR));
+    }
+    eventElement(target) {
+        if (target instanceof Element) {
+            return target;
+        }
+        if (target instanceof Node) {
+            return target.parentElement;
+        }
+        return null;
+    }
     /**
      * Handle blur event to stop editing (when user clicks away from cell)
      */
-    handleCellBlur(rowId, columnName) {
+    handleCellBlur(rowId, columnName, event) {
+        const next = event?.relatedTarget;
+        if (this.isWidgetOverlayTarget(next) || (next instanceof Element && next.closest('.__cell-editor, .__cell-toolbar'))) {
+            return;
+        }
         const commitIfStillEditing = () => {
             const editing = this.editingCell();
             if (editing?.rowId !== rowId || editing?.columnName !== columnName) {
                 return;
             }
-            if (this.showCellActions()) {
-                const activeElement = document.activeElement;
-                if (activeElement?.closest('.__cell-toolbar') || activeElement?.closest('ax-button')) {
-                    return;
-                }
+            const activeElement = document.activeElement;
+            if (this.isWidgetOverlayTarget(activeElement) ||
+                activeElement?.closest('.__cell-editor, .__cell-toolbar')) {
+                return;
             }
             this.commitCellEdit();
         };
-        if (this.showCellActions()) {
-            setTimeout(commitIfStillEditing, 150);
-            return;
-        }
-        commitIfStillEditing();
+        // Defer so an option click can commit before the editor is destroyed.
+        setTimeout(commitIfStillEditing, 150);
     }
     /**
      * Excel-style move: Tab / Shift+Tab change column, Enter / Shift+Enter change row.
@@ -12518,12 +12891,10 @@ class AXPSpreadsheetComponent {
         const target = event.target;
         // Don't close if clicking inside a widget or its elements
         if (target.closest('[axp-widget-renderer]') ||
-            target.closest('.ax-dropdown') ||
-            target.closest('.ax-popup') ||
+            target.closest(AXP_SPREADSHEET_OVERLAY_SELECTOR) ||
             target.closest('.__cell-editor') ||
             target.closest('ax-button') ||
-            target.closest('ax-dropdown-button') ||
-            target.closest('ax-dropdown-panel')) {
+            target.closest('ax-dropdown-button')) {
             return;
         }
         if (this.editingCell()) {
@@ -12696,15 +13067,21 @@ class AXPSpreadsheetComponent {
             return null;
         }
         const selected = this.selectedCell();
-        if (selected &&
-            rows.some((row) => row.rowId === selected.rowId) &&
-            columns.some((column) => column.name === selected.columnName)) {
-            return selected;
+        if (selected) {
+            const selectedRow = rows.find((row) => row.rowId === selected.rowId);
+            const selectedColumn = columns.find((column) => column.name === selected.columnName);
+            if (selectedRow && selectedColumn && !this.isCellReadonly(selectedRow.row, selectedColumn)) {
+                return selected;
+            }
         }
-        return {
-            rowId: rows[0].rowId,
-            columnName: columns[0].name,
-        };
+        for (const row of rows) {
+            for (const column of columns) {
+                if (!this.isCellReadonly(row.row, column)) {
+                    return { rowId: row.rowId, columnName: column.name };
+                }
+            }
+        }
+        return null;
     }
     returnFocusToGrid() {
         this.suppressHostFocusEdit = true;
@@ -12727,54 +13104,69 @@ class AXPSpreadsheetComponent {
         if (columnIndex < 0) {
             columnIndex = 0;
         }
-        if (direction === 'next') {
-            columnIndex += 1;
-            if (columnIndex >= columns.length) {
-                columnIndex = 0;
+        const guard = rows.length * columns.length + 1;
+        for (let step = 0; step < guard; step += 1) {
+            if (direction === 'next') {
+                columnIndex += 1;
+                if (columnIndex >= columns.length) {
+                    columnIndex = 0;
+                    rowIndex += 1;
+                }
+            }
+            else if (direction === 'previous') {
+                columnIndex -= 1;
+                if (columnIndex < 0) {
+                    columnIndex = columns.length - 1;
+                    rowIndex -= 1;
+                }
+            }
+            else if (direction === 'down') {
                 rowIndex += 1;
             }
-        }
-        else if (direction === 'previous') {
-            columnIndex -= 1;
-            if (columnIndex < 0) {
-                columnIndex = columns.length - 1;
+            else {
                 rowIndex -= 1;
             }
-        }
-        else if (direction === 'down') {
-            rowIndex += 1;
-        }
-        else {
-            rowIndex -= 1;
-        }
-        if (rowIndex < 0) {
-            return null;
-        }
-        if (rowIndex >= rows.length) {
-            if (this.rowMode() !== 'dynamic' || !this.allowAddRows() || this.readonly()) {
+            if (rowIndex < 0) {
                 return null;
             }
-            this.handleAddRow();
-            const appended = this.rowsWithIds();
-            const last = appended[appended.length - 1];
-            if (!last) {
+            if (rowIndex >= rows.length) {
+                if (this.rowMode() !== 'dynamic' || !this.allowAddRows() || this.readonly()) {
+                    return null;
+                }
+                this.handleAddRow();
+                const appended = this.rowsWithIds();
+                const last = appended[appended.length - 1];
+                if (!last) {
+                    return null;
+                }
+                return {
+                    rowId: last.rowId,
+                    columnName: columns[columnIndex]?.name ?? columns[0].name,
+                };
+            }
+            const nextRow = rows[rowIndex];
+            const nextColumn = columns[columnIndex];
+            if (!nextRow || !nextColumn) {
                 return null;
             }
+            if (this.rowWidgetByName(nextRow.row)?.readonly === true) {
+                continue;
+            }
             return {
-                rowId: last.rowId,
-                columnName: columns[columnIndex]?.name ?? columns[0].name,
+                rowId: nextRow.rowId,
+                columnName: nextColumn.name,
             };
         }
-        return {
-            rowId: rows[rowIndex].rowId,
-            columnName: columns[columnIndex].name,
-        };
+        return null;
     }
     /**
      * Left/right stay in the text until the caret is at the edge.
      * Up/down always leave a single-line editor; textareas only at the first/last line.
      */
     shouldNavigateWithArrow(direction) {
+        if (this.isEditorOverlayOpen()) {
+            return false;
+        }
         const active = this.getActiveEditorControl();
         if (!active) {
             return true;
@@ -13134,13 +13526,16 @@ class AXPSpreadsheetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null }, allowAddColumns: { classPropertyName: "allowAddColumns", publicName: "allowAddColumns", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveColumns: { classPropertyName: "allowRemoveColumns", publicName: "allowRemoveColumns", isSignal: true, isRequired: false, transformFunction: null }, showCellActions: { classPropertyName: "showCellActions", publicName: "showCellActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", columnChange: "columnChange", columnsChange: "columnsChange", spreadsheetChange: "spreadsheetChange" }, host: { listeners: { "focusin": "handleHostFocusIn($event)" }, properties: { "attr.tabindex": "readonly() ? -1 : 0", "attr.role": "\"grid\"" }, classAttribute: "axp-spreadsheet" }, viewQueries: [{ propertyName: "chromeDropdowns", predicate: AXDropdownButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n  @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty-columns.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{\n          '@general:state-message.empty-columns.description' | translate | async\n        }}\n      </div>\n      @if (allowAddColumns() && !readonly()) {\n        <div class=\"mt-4\">\n          <ng-container\n            [ngTemplateOutlet]=\"addColumnMenu\"\n            [ngTemplateOutletContext]=\"{ look: 'solid', color: 'primary', showText: true }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{ '@general:state-message.empty.description' | translate | async }}\n      </div>\n    </div>\n  } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"useExcelRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (useExcelRowIndex()) {\n            <col class=\"__index-col\" />\n            @for (column of currentColumns(); track column.name) {\n              <col class=\"__data-col\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          } @else {\n            @for (column of currentColumns(); track column.name) {\n              <col [style.width]=\"column.width || null\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          }\n        </colgroup>\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th\n              class=\"__corner-cell\"\n              [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n            >\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions ax-sm\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of currentColumns(); track column.name) {\n              <th\n                class=\"__column-header\"\n                [style.width]=\"useExcelRowIndex() ? null : column.width\"\n              >\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"columnChromeMenu\"\n                  [ngTemplateOutletContext]=\"{ column: column }\"\n                ></ng-container>\n              </th>\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <th class=\"__column-header __column-header--add ax-sm\">\n                <ng-container\n                  [ngTemplateOutlet]=\"addColumnMenu\"\n                  [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n                ></ng-container>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Empty State Row -->\n        <tbody class=\"__tbody\">\n          <tr class=\"__row __row--empty\">\n            <td class=\"__row-header\" [attr.colspan]=\"currentColumns().length + 1 + (allowAddColumns() && !readonly() ? 1 : 0)\">\n              <div class=\"__empty-state-inline\">\n                <div class=\"__empty-icon\">\n                  <i class=\"fa-light fa-list\"></i>\n                </div>\n                <div class=\"__empty-title\">\n                  {{\n                    '@general:state-message.empty-rows.title'\n                      | translate\n                      | async\n                  }}\n                </div>\n                <div class=\"__empty-description\">\n                  {{\n                    '@general:state-message.empty-rows.description'\n                      | translate\n                      | async\n                  }}\n                </div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"useExcelRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (useExcelRowIndex()) {\n            <col class=\"__index-col\" />\n            @for (column of currentColumns(); track column.name) {\n              <col class=\"__data-col\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          } @else {\n            @for (column of currentColumns(); track column.name) {\n              <col [style.width]=\"column.width || null\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          }\n        </colgroup>\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th\n              class=\"__corner-cell\"\n              [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n            >\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions ax-sm\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of currentColumns(); track column.name) {\n              <th\n                class=\"__column-header\"\n                [style.width]=\"useExcelRowIndex() ? null : column.width\"\n              >\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"columnChromeMenu\"\n                  [ngTemplateOutletContext]=\"{ column: column }\"\n                ></ng-container>\n              </th>\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <th class=\"__column-header __column-header--add ax-sm\">\n                <ng-container\n                  [ngTemplateOutlet]=\"addColumnMenu\"\n                  [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n                ></ng-container>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Body Rows -->\n        <tbody class=\"__tbody\">\n          <axp-widgets-container\n            [context]=\"spreadsheetContext()\"\n            (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n          >\n            @for (\n              rowItem of rowsWithIds();\n              track rowItem.rowId;\n              let rowIndex = $index\n            ) {\n              <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                <!-- Row header -->\n                <td\n                  class=\"__row-header\"\n                  [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n                >\n                  <div class=\"__header-content\">\n                    @if (useExcelRowIndex()) {\n                      <div class=\"__row-index\">{{ rowIndex + 1 }}</div>\n                    }\n                    @if (rowTitlePath()) {\n                      <div class=\"__header-title\">\n                        {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n                      </div>\n                    }\n                    @if (rowDescriptionPath()) {\n                      <div class=\"__header-description\">\n                        {{\n                          getRowDescription(rowItem.row, rowDescriptionPath()!)\n                        }}\n                      </div>\n                    }\n                  </div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowChromeMenu\"\n                    [ngTemplateOutletContext]=\"{ rowId: rowItem.rowId }\"\n                  ></ng-container>\n                </td>\n\n                <!-- Spreadsheet cells -->\n                @for (column of currentColumns(); track column.name) {\n                  <td\n                    class=\"__cell\"\n                    [class.__cell--editing]=\"\n                      isCellEditing(rowItem.rowId, column.name)\n                    \"\n                    [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      handleCellClick(rowItem.rowId, column.name, $event)\n                    \"\n                  >\n                    @if (\n                      isCellEditing(rowItem.rowId, column.name) &&\n                      !isColumnReadonly(column)\n                    ) {\n                      <!-- Edit mode: Show widget in edit mode -->\n                      <div\n                        class=\"__cell-editor __cell-editor--flat\"\n                        (focusout)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                        tabindex=\"-1\"\n                      >\n                        <ng-container\n                          axp-widget-renderer\n                          [node]=\"getCellWidgetNode(column, rowIndex)\"\n                          [mode]=\"'edit'\"\n                        ></ng-container>\n                      </div>\n                      <!---->\n                      @if (showCellActions()) {\n                        <!-- ----- Apply and cancel while the cell is being edited ----- -->\n                        <div\n                          class=\"__cell-toolbar ax-sm\"\n                          (click)=\"$event.stopPropagation()\"\n                          (mousedown)=\"\n                            $event.preventDefault(); $event.stopPropagation()\n                          \"\n                          (mouseup)=\"$event.stopPropagation()\"\n                          (focusin)=\"$event.stopPropagation()\"\n                        >\n                          <ax-button\n                            look=\"blank\"\n                            color=\"success\"\n                            (onClick)=\"commitCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.apply.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-check\"></ax-icon>\n                          </ax-button>\n                          <ax-button\n                            look=\"blank\"\n                            color=\"danger\"\n                            (onClick)=\"cancelCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.cancel.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-times\"></ax-icon>\n                          </ax-button>\n                        </div>\n                      }\n                    }\n                    <!-- ----- View mode when the cell is not being edited ----- -->\n                    @else {\n                      <div class=\"__cell-value\">\n                        <!---->\n                        @if (hasCellDisplayValue(rowIndex, column.name)) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        }\n                        <!-- ----- Empty cell placeholder when the value is blank ----- -->\n                        @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n                @if (allowAddColumns() && !readonly()) {\n                  <td class=\"__cell __cell--add-spacer\"></td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n\n<ng-template #columnChromeMenu let-column=\"column\">\n  @if (showColumnChromeMenu()) {\n    <!-- ----- Column insert, move, properties, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.column-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddColumns()) {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-left\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-right\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-previous' | translate | async) ??\n              ''\n            \"\n            [disabled]=\"isFirstColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'previous')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-left-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-next' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'next')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-right-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-divider></ax-divider>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.column-properties' | translate | async) ??\n              ''\n            \"\n            (onClick)=\"handleEditColumnProperties(column.name)\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-pen-to-square\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveColumns()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveColumn(column.name)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowChromeMenu let-rowId=\"rowId\">\n  @if (showRowChromeMenu()) {\n    <!-- ----- Row insert, move, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.row-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddRows() && rowMode() === 'dynamic') {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-up' | translate | async) ?? ''\n            \"\n            [disabled]=\"isFirstRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'up')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-up-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-down' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'down')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-down-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveRows()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveRow(rowId)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #addColumnMenu\n  let-look=\"look\"\n  let-color=\"color\"\n  let-showText=\"showText\"\n>\n  <!-- ----- Add a column by picking a supported widget type ----- -->\n  <ax-dropdown-button\n    class=\"ax-sm\"\n    [class.__add-column-trigger]=\"!showText\"\n    size=\"sm\"\n    [look]=\"look\"\n    [color]=\"color\"\n    [mode]=\"'dropdown'\"\n    [text]=\"\n      showText\n        ? (('@general:widgets.spreadsheet.add-column' | translate | async) ?? '')\n        : ''\n    \"\n    [attr.aria-label]=\"\n      ('@general:widgets.spreadsheet.add-column' | translate | async) ?? ''\n    \"\n    (onClick)=\"handleChromeDropdownClick($event)\"\n  >\n    @if (!showText) {\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    }\n    <ax-button-item-list>\n      @for (widget of supportedColumnWidgets(); track widget.type) {\n        <ax-button-item\n          [text]=\"(widget.title | translate | async) ?? ''\"\n          (onClick)=\"handleAddColumnOfType(widget.type)\"\n        >\n          <ax-prefix>\n            <ax-icon [icon]=\"widget.icon\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-dropdown-button>\n</ng-template>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{--axp-spreadsheet-row-height: var(--ax-sys-size-base, 2.5rem);display:flex;height:100%;width:100%;flex-direction:column;--tw-outline-style: none;outline-style:none}.axp-spreadsheet:focus-visible{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.axp-spreadsheet .__add-column-trigger ax-suffix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button{display:inline-flex;min-width:0px;align-items:center;justify-content:center}.axp-spreadsheet .__header-actions ax-dropdown-button ax-prefix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button ax-button button{width:var(--ax-sys-size-base, 2.5rem);height:var(--ax-sys-size-base, 2.5rem);min-height:0;padding:0}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 10);-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table.__table--cell-editing .__tbody .__row .__cell:not(.__cell--readonly):not(.__cell--editing):hover:before{opacity:0%}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:relative;position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;color:var(--color-neutral-700, oklch(37.1% 0 none));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--add{width:48px;min-width:48px;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{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)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{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)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);position:relative;box-sizing:border-box;width:200px;min-width:200px;cursor:pointer;overflow:hidden;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:0;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer{width:48px;min-width:48px;cursor:default;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:0}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:center;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;height:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:center;justify-content:center;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .grid{display:flex;height:100%;width:100%;gap:0px}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(ax-text-box,ax-number-box,ax-select-box,ax-date-time-box){display:block;height:100%;min-height:0px;width:100%}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container{height:100%;min-height:0;padding:0;border:none;border-radius:0;outline:none;box-shadow:none;background:transparent;background-image:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-within,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input){height:100%;min-height:0;padding:0 .5rem;border:none;outline:none;box-shadow:none;background:transparent}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-error-container{display:none}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table.__table--excel-index{table-layout:fixed;width:100%;min-width:100%}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__index-col{width:50px}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__data-col{width:auto}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__add-col{width:48px}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header:not(.__column-header--add),.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell:not(.__cell--add-spacer){width:auto!important;min-width:0!important;max-width:none!important}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header.__column-header--add,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell.__cell--add-spacer{width:48px!important;min-width:48px!important;max-width:48px!important}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__row-header,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);overflow:hidden}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{box-sizing:border-box;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding:0;text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-500, oklch(55.6% 0 none));width:50px!important;min-width:50px!important;max-width:50px!important}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-actions,:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-actions{position:static;inset:auto;display:flex;justify-content:center}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-content{align-items:center;gap:0px}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-title{display:none}.axp-spreadsheet .__table.__table--excel-index .__row-index{font-size:11px;--tw-leading: 1;line-height:1;color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{vertical-align:middle}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__row-index,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header .__header-actions{display:none}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__header-actions{display:flex}@media(max-width:768px){.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{width:50px;min-width:50px;max-width:50px;padding:0}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@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-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-outline-style: solid;--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--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-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null }, allowAddColumns: { classPropertyName: "allowAddColumns", publicName: "allowAddColumns", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveColumns: { classPropertyName: "allowRemoveColumns", publicName: "allowRemoveColumns", isSignal: true, isRequired: false, transformFunction: null }, showCellActions: { classPropertyName: "showCellActions", publicName: "showCellActions", isSignal: true, isRequired: false, transformFunction: null }, showRowHeader: { classPropertyName: "showRowHeader", publicName: "showRowHeader", isSignal: true, isRequired: false, transformFunction: null }, rowGroupPath: { classPropertyName: "rowGroupPath", publicName: "rowGroupPath", isSignal: true, isRequired: false, transformFunction: null }, rowWidgets: { classPropertyName: "rowWidgets", publicName: "rowWidgets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", columnChange: "columnChange", columnsChange: "columnsChange", spreadsheetChange: "spreadsheetChange" }, host: { listeners: { "focusin": "handleHostFocusIn($event)" }, properties: { "attr.tabindex": "readonly() ? -1 : 0", "attr.role": "\"grid\"" }, classAttribute: "axp-spreadsheet" }, viewQueries: [{ propertyName: "chromeDropdowns", predicate: AXDropdownButtonComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n  @if (!readonly()) {\n    <!-- ----- Hidden form item so cell rules block ax-form submit ----- -->\n    <div class=\"__form-validator\" aria-hidden=\"true\">\n      <ax-text-box [ngModel]=\"''\" tabindex=\"-1\">\n        <ax-validation-rule rule=\"callback\" [options]=\"sheetValidationOptions\"></ax-validation-rule>\n      </ax-text-box>\n    </div>\n  }\n  @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty-columns.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{\n          '@general:state-message.empty-columns.description' | translate | async\n        }}\n      </div>\n      @if (allowAddColumns() && !readonly()) {\n        <div class=\"mt-4\">\n          <ng-container\n            [ngTemplateOutlet]=\"addColumnMenu\"\n            [ngTemplateOutletContext]=\"{ look: 'solid', color: 'primary', showText: true }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{ '@general:state-message.empty.description' | translate | async }}\n      </div>\n    </div>\n  } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"showRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (showLeadingColumn()) {\n            <col class=\"__index-col\" />\n          }\n          @for (column of currentColumns(); track column.name) {\n            <col class=\"__data-col\" [style.width]=\"column.width || null\" />\n          }\n          @if (allowAddColumns() && !readonly()) {\n            <col class=\"__add-col\" />\n          }\n        </colgroup>\n        <thead class=\"__thead\">\n          <ng-container [ngTemplateOutlet]=\"sheetHeader\"></ng-container>\n        </thead>\n\n        <!-- Empty State Row -->\n        <tbody class=\"__tbody\">\n          <tr class=\"__row __row--empty\">\n            <td class=\"__row-header\" [attr.colspan]=\"emptyRowColspan()\">\n              <div class=\"__empty-state-inline\">\n                <div class=\"__empty-icon\">\n                  <i class=\"fa-light fa-list\"></i>\n                </div>\n                <div class=\"__empty-title\">\n                  {{\n                    '@general:state-message.empty-rows.title'\n                      | translate\n                      | async\n                  }}\n                </div>\n                <div class=\"__empty-description\">\n                  {{\n                    '@general:state-message.empty-rows.description'\n                      | translate\n                      | async\n                  }}\n                </div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"showRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (showLeadingColumn()) {\n            <col class=\"__index-col\" />\n          }\n          @for (column of currentColumns(); track column.name) {\n            <col class=\"__data-col\" [style.width]=\"column.width || null\" />\n          }\n          @if (allowAddColumns() && !readonly()) {\n            <col class=\"__add-col\" />\n          }\n        </colgroup>\n        <thead class=\"__thead\">\n          <ng-container [ngTemplateOutlet]=\"sheetHeader\"></ng-container>\n        </thead>\n\n        <!-- Body Rows -->\n        <tbody class=\"__tbody\">\n          <axp-widgets-container\n            [context]=\"spreadsheetContext()\"\n            (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n          >\n            @for (\n              rowItem of rowsWithIds();\n              track rowItem.rowId;\n              let rowIndex = $index\n            ) {\n              <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                @if (showLeadingColumn()) {\n                  <!-- ----- Leading cell for the row index, row title, or merged row group ----- -->\n                  @if (rowLeadingCells()[rowIndex]; as leading) {\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Render the leading cell only on the first row of a merged group ----- -->\n                    @if (leading.show) {\n                      <td\n                        class=\"__row-header\"\n                        [class.__row-header--group]=\"!!leading.title\"\n                        [attr.rowspan]=\"leading.rowspan > 1 ? leading.rowspan : null\"\n                        [style.width.px]=\"showRowIndex() ? 50 : null\"\n                      >\n                        <div class=\"__header-content\">\n                          @if (showRowIndex()) {\n                            <div class=\"__row-index\">{{ rowIndex + 1 }}</div>\n                          }\n                          @if (leading.title) {\n                            <div class=\"__header-title\">\n                              {{ leading.title | translate | async }}\n                            </div>\n                          }\n                          @if (rowTitlePath()) {\n                            <div class=\"__header-title\">\n                              {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n                            </div>\n                          }\n                          @if (rowDescriptionPath()) {\n                            <div class=\"__header-description\">\n                              {{\n                                getRowDescription(rowItem.row, rowDescriptionPath()!)\n                              }}\n                            </div>\n                          }\n                        </div>\n                        @if (!rowGroupPath()) {\n                          <ng-container\n                            [ngTemplateOutlet]=\"rowChromeMenu\"\n                            [ngTemplateOutletContext]=\"{ rowId: rowItem.rowId }\"\n                          ></ng-container>\n                        }\n                      </td>\n                    }\n                  }\n                }\n\n                <!-- Spreadsheet cells -->\n                @for (column of currentColumns(); track column.name) {\n                  <td\n                    class=\"__cell\"\n                    [class.__cell--editing]=\"\n                      isCellEditing(rowItem.rowId, column.name)\n                    \"\n                    [class.__cell--readonly]=\"isCellReadonly(rowItem.row, column)\"\n                    [class.__cell--invalid]=\"\n                      cellValidationMessage(rowItem.rowId, column.name) !== null\n                    \"\n                    [attr.title]=\"cellValidationMessage(rowItem.rowId, column.name)\"\n                    [attr.aria-invalid]=\"\n                      cellValidationMessage(rowItem.rowId, column.name) !== null\n                    \"\n                    (click)=\"\n                      $event.stopPropagation();\n                      handleCellClick(rowItem.rowId, column.name, $event)\n                    \"\n                  >\n                    @if (\n                      isCellEditing(rowItem.rowId, column.name) &&\n                      !isCellReadonly(rowItem.row, column)\n                    ) {\n                      <!-- Edit mode: Show widget in edit mode -->\n                      <div\n                        class=\"__cell-editor __cell-editor--flat\"\n                        (focusout)=\"handleCellBlur(rowItem.rowId, column.name, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <ng-container\n                          axp-widget-renderer\n                          [node]=\"getCellWidgetNode(column, rowIndex)\"\n                          [mode]=\"'edit'\"\n                        ></ng-container>\n                      </div>\n                      <!---->\n                      @if (showCellActions()) {\n                        <!-- ----- Apply and cancel while the cell is being edited ----- -->\n                        <div\n                          class=\"__cell-toolbar ax-sm\"\n                          (click)=\"$event.stopPropagation()\"\n                          (mousedown)=\"\n                            $event.preventDefault(); $event.stopPropagation()\n                          \"\n                          (mouseup)=\"$event.stopPropagation()\"\n                          (focusin)=\"$event.stopPropagation()\"\n                        >\n                          <ax-button\n                            look=\"blank\"\n                            color=\"success\"\n                            (onClick)=\"commitCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.apply.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-check\"></ax-icon>\n                          </ax-button>\n                          <ax-button\n                            look=\"blank\"\n                            color=\"danger\"\n                            (onClick)=\"cancelCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.cancel.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-times\"></ax-icon>\n                          </ax-button>\n                        </div>\n                      }\n                    }\n                    <!-- ----- View mode when the cell is not being edited ----- -->\n                    @else {\n                      <div class=\"__cell-value\">\n                        <!---->\n                        @if (hasCellDisplayValue(rowIndex, column.name)) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        }\n                        <!-- ----- Empty cell placeholder when the value is blank ----- -->\n                        @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n                @if (allowAddColumns() && !readonly()) {\n                  <td class=\"__cell __cell--add-spacer\"></td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n\n<ng-template #columnChromeMenu let-column=\"column\">\n  @if (showColumnChromeMenu()) {\n    <!-- ----- Column insert, move, properties, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.column-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddColumns()) {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-left\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-right\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-previous' | translate | async) ??\n              ''\n            \"\n            [disabled]=\"isFirstColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'previous')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-left-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-next' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'next')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-right-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-divider></ax-divider>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.column-properties' | translate | async) ??\n              ''\n            \"\n            (onClick)=\"handleEditColumnProperties(column.name)\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-pen-to-square\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveColumns()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveColumn(column.name)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowChromeMenu let-rowId=\"rowId\">\n  @if (showRowChromeMenu()) {\n    <!-- ----- Row insert, move, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.row-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddRows() && rowMode() === 'dynamic') {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-up' | translate | async) ?? ''\n            \"\n            [disabled]=\"isFirstRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'up')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-up-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-down' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'down')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-down-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveRows()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveRow(rowId)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #addColumnMenu\n  let-look=\"look\"\n  let-color=\"color\"\n  let-showText=\"showText\"\n>\n  <!-- ----- Add a column by picking a supported widget type ----- -->\n  <ax-dropdown-button\n    class=\"ax-sm\"\n    [class.__add-column-trigger]=\"!showText\"\n    size=\"sm\"\n    [look]=\"look\"\n    [color]=\"color\"\n    [mode]=\"'dropdown'\"\n    [text]=\"\n      showText\n        ? (('@general:widgets.spreadsheet.add-column' | translate | async) ?? '')\n        : ''\n    \"\n    [attr.aria-label]=\"\n      ('@general:widgets.spreadsheet.add-column' | translate | async) ?? ''\n    \"\n    (onClick)=\"handleChromeDropdownClick($event)\"\n  >\n    @if (!showText) {\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    }\n    <ax-button-item-list>\n      @for (widget of supportedColumnWidgets(); track widget.type) {\n        <ax-button-item\n          [text]=\"(widget.title | translate | async) ?? ''\"\n          (onClick)=\"handleAddColumnOfType(widget.type)\"\n        >\n          <ax-prefix>\n            <ax-icon [icon]=\"widget.icon\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-dropdown-button>\n</ng-template>\n\n<ng-template #cornerCell>\n  @if (showLeadingColumn()) {\n    <th\n      class=\"__corner-cell\"\n      [attr.rowspan]=\"hasColumnGroups() ? 2 : null\"\n      [style.width.px]=\"showRowIndex() ? 50 : null\"\n    >\n      @if (title()) {\n        <div class=\"__corner-title\">\n          {{ title() | translate | async }}\n        </div>\n      }\n      @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n        <div class=\"__corner-actions ax-sm\">\n          <ax-button\n            look=\"blank\"\n            color=\"primary\"\n            (onClick)=\"handleAddRow()\"\n            [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n          >\n            <ax-icon icon=\"far fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </th>\n  }\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-rowspan=\"rowspan\">\n  <th\n    class=\"__column-header\"\n    [attr.rowspan]=\"rowspan > 1 ? rowspan : null\"\n    [style.width]=\"showRowIndex() ? null : column.width\"\n  >\n    <div class=\"__header-content\">\n      <div class=\"__header-title\">\n        {{ column.title | translate | async }}\n      </div>\n      <!-- ----- Optional condition under the column title ----- -->\n      @if (column.description) {\n        <div class=\"__header-description\">{{ column.description }}</div>\n      }\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"columnChromeMenu\"\n      [ngTemplateOutletContext]=\"{ column: column }\"\n    ></ng-container>\n  </th>\n</ng-template>\n\n<ng-template #addColumnHeader let-rowspan=\"rowspan\">\n  @if (allowAddColumns() && !readonly()) {\n    <th\n      class=\"__column-header __column-header--add ax-sm\"\n      [attr.rowspan]=\"rowspan > 1 ? rowspan : null\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"addColumnMenu\"\n        [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n      ></ng-container>\n    </th>\n  }\n</ng-template>\n\n<ng-template #sheetHeader>\n  @if (hasColumnGroups()) {\n    <tr class=\"__header-row\">\n      <ng-container [ngTemplateOutlet]=\"cornerCell\"></ng-container>\n      @for (band of columnHeaderBands(); track $index) {\n        <!--------------------------------------------------------------->\n        @if (band.kind === 'group') {\n          <th class=\"__column-header __column-header--group\" [attr.colspan]=\"band.colspan\">\n            <div class=\"__header-content\">\n              <div class=\"__header-title\">\n                {{ band.title | translate | async }}\n              </div>\n            </div>\n          </th>\n        } @else if (bandColumn(band); as column) {\n          <ng-container\n            [ngTemplateOutlet]=\"columnHeader\"\n            [ngTemplateOutletContext]=\"{ column: column, rowspan: 2 }\"\n          ></ng-container>\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"addColumnHeader\"\n        [ngTemplateOutletContext]=\"{ rowspan: 2 }\"\n      ></ng-container>\n    </tr>\n    <tr class=\"__header-row __header-row--leaves\">\n      @for (column of groupedColumns(); track column.name) {\n        <ng-container\n          [ngTemplateOutlet]=\"columnHeader\"\n          [ngTemplateOutletContext]=\"{ column: column, rowspan: 1 }\"\n        ></ng-container>\n      }\n    </tr>\n  } @else {\n    <tr class=\"__header-row\">\n      <ng-container [ngTemplateOutlet]=\"cornerCell\"></ng-container>\n      @for (column of currentColumns(); track column.name) {\n        <ng-container\n          [ngTemplateOutlet]=\"columnHeader\"\n          [ngTemplateOutletContext]=\"{ column: column, rowspan: 1 }\"\n        ></ng-container>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"addColumnHeader\"\n        [ngTemplateOutletContext]=\"{ rowspan: 1 }\"\n      ></ng-container>\n    </tr>\n  }\n</ng-template>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{--axp-spreadsheet-row-height: var(--ax-sys-size-base, 2.5rem);display:flex;height:100%;width:100%;flex-direction:column;--tw-outline-style: none;outline-style:none}.axp-spreadsheet:focus-visible{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.axp-spreadsheet .__add-column-trigger ax-suffix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button{display:inline-flex;min-width:0px;align-items:center;justify-content:center}.axp-spreadsheet .__header-actions ax-dropdown-button ax-prefix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button ax-button button{width:var(--ax-sys-size-base, 2.5rem);height:var(--ax-sys-size-base, 2.5rem);min-height:0;padding:0}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__form-validator{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 10);-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table.__table--cell-editing .__tbody .__row .__cell:not(.__cell--readonly):not(.__cell--editing):hover:before{opacity:0%}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row.__header-row--leaves .__column-header{position:static;top:auto}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:relative;position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;color:var(--color-neutral-700, oklch(37.1% 0 none));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--add{width:48px;min-width:48px;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--group{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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{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)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row:not(.__row--empty){height:var(--axp-spreadsheet-row-height)}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header.__row-header--group{vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{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)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);position:relative;box-sizing:border-box;width:200px;min-width:200px;cursor:pointer;overflow:hidden;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:0;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer{width:48px;min-width:48px;cursor:default;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--invalid{box-shadow:inset 0 0 0 1px rgb(var(--ax-sys-color-danger-500))}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:0}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:stretch;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{position:absolute;inset:0;margin:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;height:auto;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{box-sizing:border-box;display:flex;min-height:0px;width:100%;align-items:stretch;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat>*{display:block;flex:1 1 auto;width:100%;height:100%;min-height:0;margin:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .grid{display:flex;height:100%;width:100%;gap:0px}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(ax-text-box,ax-number-box,ax-select-box,ax-date-time-box,ax-combo-box,ax-lookup,ax-check-box){display:block;height:100%;min-height:0;margin:0;width:100%}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container{height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;padding:0!important;gap:0;border:none;border-radius:0;outline:none;box-shadow:none;background:transparent;background-image:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-within,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input){height:100%;min-height:0;padding:0 .5rem;border:none;outline:none;box-shadow:none;background:transparent}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-error-container{display:none}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table.__table--excel-index{table-layout:fixed;width:100%;min-width:100%}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__index-col{width:50px}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__data-col{width:auto}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__add-col{width:48px}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header:not(.__column-header--add),.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell:not(.__cell--add-spacer){width:auto!important;min-width:0!important;max-width:none!important}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header.__column-header--add,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell.__cell--add-spacer{width:48px!important;min-width:48px!important;max-width:48px!important}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__row-header,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);overflow:hidden}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{box-sizing:border-box;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding:0;text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-500, oklch(55.6% 0 none));width:50px!important;min-width:50px!important;max-width:50px!important}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-actions,:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-actions{position:static;inset:auto;display:flex;justify-content:center}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-content{align-items:center;gap:0px}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-title{display:none}.axp-spreadsheet .__table.__table--excel-index .__row-index{font-size:11px;--tw-leading: 1;line-height:1;color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{vertical-align:middle}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__row-index,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header .__header-actions{display:none}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__header-actions{display:flex}@media(max-width:768px){.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{width:50px;min-width:50px;max-width:50px;padding:0}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@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-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-outline-style: solid;--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--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-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3$5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i2$4.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpreadsheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-spreadsheet', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
+                        AXTextBoxModule,
+                        AXFormModule,
+                        AXValidationModule,
                         AXTranslationModule,
                         AXButtonModule,
                         AXDropdownButtonModule,
@@ -13151,8 +13546,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[attr.tabindex]': 'readonly() ? -1 : 0',
                         '[attr.role]': '"grid"',
                         '(focusin)': 'handleHostFocusIn($event)',
-                    }, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n  @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty-columns.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{\n          '@general:state-message.empty-columns.description' | translate | async\n        }}\n      </div>\n      @if (allowAddColumns() && !readonly()) {\n        <div class=\"mt-4\">\n          <ng-container\n            [ngTemplateOutlet]=\"addColumnMenu\"\n            [ngTemplateOutletContext]=\"{ look: 'solid', color: 'primary', showText: true }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{ '@general:state-message.empty.description' | translate | async }}\n      </div>\n    </div>\n  } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"useExcelRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (useExcelRowIndex()) {\n            <col class=\"__index-col\" />\n            @for (column of currentColumns(); track column.name) {\n              <col class=\"__data-col\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          } @else {\n            @for (column of currentColumns(); track column.name) {\n              <col [style.width]=\"column.width || null\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          }\n        </colgroup>\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th\n              class=\"__corner-cell\"\n              [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n            >\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions ax-sm\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of currentColumns(); track column.name) {\n              <th\n                class=\"__column-header\"\n                [style.width]=\"useExcelRowIndex() ? null : column.width\"\n              >\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"columnChromeMenu\"\n                  [ngTemplateOutletContext]=\"{ column: column }\"\n                ></ng-container>\n              </th>\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <th class=\"__column-header __column-header--add ax-sm\">\n                <ng-container\n                  [ngTemplateOutlet]=\"addColumnMenu\"\n                  [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n                ></ng-container>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Empty State Row -->\n        <tbody class=\"__tbody\">\n          <tr class=\"__row __row--empty\">\n            <td class=\"__row-header\" [attr.colspan]=\"currentColumns().length + 1 + (allowAddColumns() && !readonly() ? 1 : 0)\">\n              <div class=\"__empty-state-inline\">\n                <div class=\"__empty-icon\">\n                  <i class=\"fa-light fa-list\"></i>\n                </div>\n                <div class=\"__empty-title\">\n                  {{\n                    '@general:state-message.empty-rows.title'\n                      | translate\n                      | async\n                  }}\n                </div>\n                <div class=\"__empty-description\">\n                  {{\n                    '@general:state-message.empty-rows.description'\n                      | translate\n                      | async\n                  }}\n                </div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"useExcelRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (useExcelRowIndex()) {\n            <col class=\"__index-col\" />\n            @for (column of currentColumns(); track column.name) {\n              <col class=\"__data-col\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          } @else {\n            @for (column of currentColumns(); track column.name) {\n              <col [style.width]=\"column.width || null\" />\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <col class=\"__add-col\" />\n            }\n          }\n        </colgroup>\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th\n              class=\"__corner-cell\"\n              [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n            >\n              @if (title()) {\n                <div class=\"__corner-title\">\n                  {{ title() | translate | async }}\n                </div>\n              }\n              @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                <div class=\"__corner-actions ax-sm\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n                  >\n                    <ax-icon icon=\"far fa-plus\"></ax-icon>\n                  </ax-button>\n                </div>\n              }\n            </th>\n\n            <!-- Column headers -->\n            @for (column of currentColumns(); track column.name) {\n              <th\n                class=\"__column-header\"\n                [style.width]=\"useExcelRowIndex() ? null : column.width\"\n              >\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\n                <ng-container\n                  [ngTemplateOutlet]=\"columnChromeMenu\"\n                  [ngTemplateOutletContext]=\"{ column: column }\"\n                ></ng-container>\n              </th>\n            }\n            @if (allowAddColumns() && !readonly()) {\n              <th class=\"__column-header __column-header--add ax-sm\">\n                <ng-container\n                  [ngTemplateOutlet]=\"addColumnMenu\"\n                  [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n                ></ng-container>\n              </th>\n            }\n          </tr>\n        </thead>\n\n        <!-- Body Rows -->\n        <tbody class=\"__tbody\">\n          <axp-widgets-container\n            [context]=\"spreadsheetContext()\"\n            (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n          >\n            @for (\n              rowItem of rowsWithIds();\n              track rowItem.rowId;\n              let rowIndex = $index\n            ) {\n              <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                <!-- Row header -->\n                <td\n                  class=\"__row-header\"\n                  [style.width.px]=\"useExcelRowIndex() ? 50 : null\"\n                >\n                  <div class=\"__header-content\">\n                    @if (useExcelRowIndex()) {\n                      <div class=\"__row-index\">{{ rowIndex + 1 }}</div>\n                    }\n                    @if (rowTitlePath()) {\n                      <div class=\"__header-title\">\n                        {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n                      </div>\n                    }\n                    @if (rowDescriptionPath()) {\n                      <div class=\"__header-description\">\n                        {{\n                          getRowDescription(rowItem.row, rowDescriptionPath()!)\n                        }}\n                      </div>\n                    }\n                  </div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"rowChromeMenu\"\n                    [ngTemplateOutletContext]=\"{ rowId: rowItem.rowId }\"\n                  ></ng-container>\n                </td>\n\n                <!-- Spreadsheet cells -->\n                @for (column of currentColumns(); track column.name) {\n                  <td\n                    class=\"__cell\"\n                    [class.__cell--editing]=\"\n                      isCellEditing(rowItem.rowId, column.name)\n                    \"\n                    [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      handleCellClick(rowItem.rowId, column.name, $event)\n                    \"\n                  >\n                    @if (\n                      isCellEditing(rowItem.rowId, column.name) &&\n                      !isColumnReadonly(column)\n                    ) {\n                      <!-- Edit mode: Show widget in edit mode -->\n                      <div\n                        class=\"__cell-editor __cell-editor--flat\"\n                        (focusout)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                        tabindex=\"-1\"\n                      >\n                        <ng-container\n                          axp-widget-renderer\n                          [node]=\"getCellWidgetNode(column, rowIndex)\"\n                          [mode]=\"'edit'\"\n                        ></ng-container>\n                      </div>\n                      <!---->\n                      @if (showCellActions()) {\n                        <!-- ----- Apply and cancel while the cell is being edited ----- -->\n                        <div\n                          class=\"__cell-toolbar ax-sm\"\n                          (click)=\"$event.stopPropagation()\"\n                          (mousedown)=\"\n                            $event.preventDefault(); $event.stopPropagation()\n                          \"\n                          (mouseup)=\"$event.stopPropagation()\"\n                          (focusin)=\"$event.stopPropagation()\"\n                        >\n                          <ax-button\n                            look=\"blank\"\n                            color=\"success\"\n                            (onClick)=\"commitCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.apply.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-check\"></ax-icon>\n                          </ax-button>\n                          <ax-button\n                            look=\"blank\"\n                            color=\"danger\"\n                            (onClick)=\"cancelCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.cancel.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-times\"></ax-icon>\n                          </ax-button>\n                        </div>\n                      }\n                    }\n                    <!-- ----- View mode when the cell is not being edited ----- -->\n                    @else {\n                      <div class=\"__cell-value\">\n                        <!---->\n                        @if (hasCellDisplayValue(rowIndex, column.name)) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        }\n                        <!-- ----- Empty cell placeholder when the value is blank ----- -->\n                        @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n                @if (allowAddColumns() && !readonly()) {\n                  <td class=\"__cell __cell--add-spacer\"></td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n\n<ng-template #columnChromeMenu let-column=\"column\">\n  @if (showColumnChromeMenu()) {\n    <!-- ----- Column insert, move, properties, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.column-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddColumns()) {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-left\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-right\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-previous' | translate | async) ??\n              ''\n            \"\n            [disabled]=\"isFirstColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'previous')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-left-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-next' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'next')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-right-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-divider></ax-divider>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.column-properties' | translate | async) ??\n              ''\n            \"\n            (onClick)=\"handleEditColumnProperties(column.name)\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-pen-to-square\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveColumns()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveColumn(column.name)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowChromeMenu let-rowId=\"rowId\">\n  @if (showRowChromeMenu()) {\n    <!-- ----- Row insert, move, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.row-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddRows() && rowMode() === 'dynamic') {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-up' | translate | async) ?? ''\n            \"\n            [disabled]=\"isFirstRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'up')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-up-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-down' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'down')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-down-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveRows()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveRow(rowId)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #addColumnMenu\n  let-look=\"look\"\n  let-color=\"color\"\n  let-showText=\"showText\"\n>\n  <!-- ----- Add a column by picking a supported widget type ----- -->\n  <ax-dropdown-button\n    class=\"ax-sm\"\n    [class.__add-column-trigger]=\"!showText\"\n    size=\"sm\"\n    [look]=\"look\"\n    [color]=\"color\"\n    [mode]=\"'dropdown'\"\n    [text]=\"\n      showText\n        ? (('@general:widgets.spreadsheet.add-column' | translate | async) ?? '')\n        : ''\n    \"\n    [attr.aria-label]=\"\n      ('@general:widgets.spreadsheet.add-column' | translate | async) ?? ''\n    \"\n    (onClick)=\"handleChromeDropdownClick($event)\"\n  >\n    @if (!showText) {\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    }\n    <ax-button-item-list>\n      @for (widget of supportedColumnWidgets(); track widget.type) {\n        <ax-button-item\n          [text]=\"(widget.title | translate | async) ?? ''\"\n          (onClick)=\"handleAddColumnOfType(widget.type)\"\n        >\n          <ax-prefix>\n            <ax-icon [icon]=\"widget.icon\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-dropdown-button>\n</ng-template>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{--axp-spreadsheet-row-height: var(--ax-sys-size-base, 2.5rem);display:flex;height:100%;width:100%;flex-direction:column;--tw-outline-style: none;outline-style:none}.axp-spreadsheet:focus-visible{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.axp-spreadsheet .__add-column-trigger ax-suffix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button{display:inline-flex;min-width:0px;align-items:center;justify-content:center}.axp-spreadsheet .__header-actions ax-dropdown-button ax-prefix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button ax-button button{width:var(--ax-sys-size-base, 2.5rem);height:var(--ax-sys-size-base, 2.5rem);min-height:0;padding:0}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 10);-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table.__table--cell-editing .__tbody .__row .__cell:not(.__cell--readonly):not(.__cell--editing):hover:before{opacity:0%}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:relative;position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;color:var(--color-neutral-700, oklch(37.1% 0 none));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--add{width:48px;min-width:48px;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{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)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{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)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);position:relative;box-sizing:border-box;width:200px;min-width:200px;cursor:pointer;overflow:hidden;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:0;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer{width:48px;min-width:48px;cursor:default;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:0}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:center;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;height:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:center;justify-content:center;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .grid{display:flex;height:100%;width:100%;gap:0px}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(ax-text-box,ax-number-box,ax-select-box,ax-date-time-box){display:block;height:100%;min-height:0px;width:100%}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container{height:100%;min-height:0;padding:0;border:none;border-radius:0;outline:none;box-shadow:none;background:transparent;background-image:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-within,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input){height:100%;min-height:0;padding:0 .5rem;border:none;outline:none;box-shadow:none;background:transparent}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-error-container{display:none}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table.__table--excel-index{table-layout:fixed;width:100%;min-width:100%}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__index-col{width:50px}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__data-col{width:auto}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__add-col{width:48px}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header:not(.__column-header--add),.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell:not(.__cell--add-spacer){width:auto!important;min-width:0!important;max-width:none!important}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header.__column-header--add,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell.__cell--add-spacer{width:48px!important;min-width:48px!important;max-width:48px!important}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__row-header,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);overflow:hidden}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{box-sizing:border-box;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding:0;text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-500, oklch(55.6% 0 none));width:50px!important;min-width:50px!important;max-width:50px!important}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-actions,:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-actions{position:static;inset:auto;display:flex;justify-content:center}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-content{align-items:center;gap:0px}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-title{display:none}.axp-spreadsheet .__table.__table--excel-index .__row-index{font-size:11px;--tw-leading: 1;line-height:1;color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{vertical-align:middle}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__row-index,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header .__header-actions{display:none}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__header-actions{display:flex}@media(max-width:768px){.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{width:50px;min-width:50px;max-width:50px;padding:0}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@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-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-outline-style: solid;--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--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-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { chromeDropdowns: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXDropdownButtonComponent), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowMode", required: false }] }], rowsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsInput", required: false }] }], rowsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsModel", required: false }] }, { type: i0.Output, args: ["rowsModelChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], emptyCellPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCellPlaceholder", required: false }] }], rowTitlePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTitlePath", required: false }] }], rowDescriptionPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDescriptionPath", required: false }] }], allowAddRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddRows", required: false }] }], allowRemoveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemoveRows", required: false }] }], allowAddColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddColumns", required: false }] }], allowRemoveColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemoveColumns", required: false }] }], showCellActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCellActions", required: false }] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowChange: [{ type: i0.Output, args: ["rowChange"] }], columnChange: [{ type: i0.Output, args: ["columnChange"] }], columnsChange: [{ type: i0.Output, args: ["columnsChange"] }], spreadsheetChange: [{ type: i0.Output, args: ["spreadsheetChange"] }] } });
+                    }, template: "<!--\n  #region ----   Spreadsheet Component Template   ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n  @if (!readonly()) {\n    <!-- ----- Hidden form item so cell rules block ax-form submit ----- -->\n    <div class=\"__form-validator\" aria-hidden=\"true\">\n      <ax-text-box [ngModel]=\"''\" tabindex=\"-1\">\n        <ax-validation-rule rule=\"callback\" [options]=\"sheetValidationOptions\"></ax-validation-rule>\n      </ax-text-box>\n    </div>\n  }\n  @if (isColumnsEmpty()) {\n    <!-- Empty State: Columns are empty (regardless of rows) -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty-columns.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{\n          '@general:state-message.empty-columns.description' | translate | async\n        }}\n      </div>\n      @if (allowAddColumns() && !readonly()) {\n        <div class=\"mt-4\">\n          <ng-container\n            [ngTemplateOutlet]=\"addColumnMenu\"\n            [ngTemplateOutletContext]=\"{ look: 'solid', color: 'primary', showText: true }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  } @else if (isEmpty()) {\n    <!-- Empty State: Both columns and rows are empty -->\n    <div class=\"__empty-state\">\n      <div class=\"__empty-icon\">\n        <i class=\"fa-light fa-table\"></i>\n      </div>\n      <div class=\"__empty-title\">\n        {{ '@general:state-message.empty.title' | translate | async }}\n      </div>\n      <div class=\"__empty-description\">\n        {{ '@general:state-message.empty.description' | translate | async }}\n      </div>\n    </div>\n  } @else if (isRowsEmpty()) {\n    <!-- Empty State: Only rows are empty - Show columns -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"showRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (showLeadingColumn()) {\n            <col class=\"__index-col\" />\n          }\n          @for (column of currentColumns(); track column.name) {\n            <col class=\"__data-col\" [style.width]=\"column.width || null\" />\n          }\n          @if (allowAddColumns() && !readonly()) {\n            <col class=\"__add-col\" />\n          }\n        </colgroup>\n        <thead class=\"__thead\">\n          <ng-container [ngTemplateOutlet]=\"sheetHeader\"></ng-container>\n        </thead>\n\n        <!-- Empty State Row -->\n        <tbody class=\"__tbody\">\n          <tr class=\"__row __row--empty\">\n            <td class=\"__row-header\" [attr.colspan]=\"emptyRowColspan()\">\n              <div class=\"__empty-state-inline\">\n                <div class=\"__empty-icon\">\n                  <i class=\"fa-light fa-list\"></i>\n                </div>\n                <div class=\"__empty-title\">\n                  {{\n                    '@general:state-message.empty-rows.title'\n                      | translate\n                      | async\n                  }}\n                </div>\n                <div class=\"__empty-description\">\n                  {{\n                    '@general:state-message.empty-rows.description'\n                      | translate\n                      | async\n                  }}\n                </div>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <!-- Full Spreadsheet: Both columns and rows are available -->\n    <div class=\"__table-wrapper\">\n      <table\n        class=\"__table\"\n        [class.__table--excel-index]=\"showRowIndex()\"\n        [class.__table--cell-editing]=\"editingCell() != null\"\n      >\n        <colgroup>\n          @if (showLeadingColumn()) {\n            <col class=\"__index-col\" />\n          }\n          @for (column of currentColumns(); track column.name) {\n            <col class=\"__data-col\" [style.width]=\"column.width || null\" />\n          }\n          @if (allowAddColumns() && !readonly()) {\n            <col class=\"__add-col\" />\n          }\n        </colgroup>\n        <thead class=\"__thead\">\n          <ng-container [ngTemplateOutlet]=\"sheetHeader\"></ng-container>\n        </thead>\n\n        <!-- Body Rows -->\n        <tbody class=\"__tbody\">\n          <axp-widgets-container\n            [context]=\"spreadsheetContext()\"\n            (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n          >\n            @for (\n              rowItem of rowsWithIds();\n              track rowItem.rowId;\n              let rowIndex = $index\n            ) {\n              <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n                @if (showLeadingColumn()) {\n                  <!-- ----- Leading cell for the row index, row title, or merged row group ----- -->\n                  @if (rowLeadingCells()[rowIndex]; as leading) {\n                    <!--------------------------------------------------------------->\n                    <!-- ----- Render the leading cell only on the first row of a merged group ----- -->\n                    @if (leading.show) {\n                      <td\n                        class=\"__row-header\"\n                        [class.__row-header--group]=\"!!leading.title\"\n                        [attr.rowspan]=\"leading.rowspan > 1 ? leading.rowspan : null\"\n                        [style.width.px]=\"showRowIndex() ? 50 : null\"\n                      >\n                        <div class=\"__header-content\">\n                          @if (showRowIndex()) {\n                            <div class=\"__row-index\">{{ rowIndex + 1 }}</div>\n                          }\n                          @if (leading.title) {\n                            <div class=\"__header-title\">\n                              {{ leading.title | translate | async }}\n                            </div>\n                          }\n                          @if (rowTitlePath()) {\n                            <div class=\"__header-title\">\n                              {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n                            </div>\n                          }\n                          @if (rowDescriptionPath()) {\n                            <div class=\"__header-description\">\n                              {{\n                                getRowDescription(rowItem.row, rowDescriptionPath()!)\n                              }}\n                            </div>\n                          }\n                        </div>\n                        @if (!rowGroupPath()) {\n                          <ng-container\n                            [ngTemplateOutlet]=\"rowChromeMenu\"\n                            [ngTemplateOutletContext]=\"{ rowId: rowItem.rowId }\"\n                          ></ng-container>\n                        }\n                      </td>\n                    }\n                  }\n                }\n\n                <!-- Spreadsheet cells -->\n                @for (column of currentColumns(); track column.name) {\n                  <td\n                    class=\"__cell\"\n                    [class.__cell--editing]=\"\n                      isCellEditing(rowItem.rowId, column.name)\n                    \"\n                    [class.__cell--readonly]=\"isCellReadonly(rowItem.row, column)\"\n                    [class.__cell--invalid]=\"\n                      cellValidationMessage(rowItem.rowId, column.name) !== null\n                    \"\n                    [attr.title]=\"cellValidationMessage(rowItem.rowId, column.name)\"\n                    [attr.aria-invalid]=\"\n                      cellValidationMessage(rowItem.rowId, column.name) !== null\n                    \"\n                    (click)=\"\n                      $event.stopPropagation();\n                      handleCellClick(rowItem.rowId, column.name, $event)\n                    \"\n                  >\n                    @if (\n                      isCellEditing(rowItem.rowId, column.name) &&\n                      !isCellReadonly(rowItem.row, column)\n                    ) {\n                      <!-- Edit mode: Show widget in edit mode -->\n                      <div\n                        class=\"__cell-editor __cell-editor--flat\"\n                        (focusout)=\"handleCellBlur(rowItem.rowId, column.name, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <ng-container\n                          axp-widget-renderer\n                          [node]=\"getCellWidgetNode(column, rowIndex)\"\n                          [mode]=\"'edit'\"\n                        ></ng-container>\n                      </div>\n                      <!---->\n                      @if (showCellActions()) {\n                        <!-- ----- Apply and cancel while the cell is being edited ----- -->\n                        <div\n                          class=\"__cell-toolbar ax-sm\"\n                          (click)=\"$event.stopPropagation()\"\n                          (mousedown)=\"\n                            $event.preventDefault(); $event.stopPropagation()\n                          \"\n                          (mouseup)=\"$event.stopPropagation()\"\n                          (focusin)=\"$event.stopPropagation()\"\n                        >\n                          <ax-button\n                            look=\"blank\"\n                            color=\"success\"\n                            (onClick)=\"commitCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.apply.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-check\"></ax-icon>\n                          </ax-button>\n                          <ax-button\n                            look=\"blank\"\n                            color=\"danger\"\n                            (onClick)=\"cancelCellEdit()\"\n                            [attr.aria-label]=\"\n                              ('@general:actions.cancel.title' | translate | async) ?? ''\n                            \"\n                          >\n                            <ax-icon icon=\"far fa-times\"></ax-icon>\n                          </ax-button>\n                        </div>\n                      }\n                    }\n                    <!-- ----- View mode when the cell is not being edited ----- -->\n                    @else {\n                      <div class=\"__cell-value\">\n                        <!---->\n                        @if (hasCellDisplayValue(rowIndex, column.name)) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        }\n                        <!-- ----- Empty cell placeholder when the value is blank ----- -->\n                        @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n                @if (allowAddColumns() && !readonly()) {\n                  <td class=\"__cell __cell--add-spacer\"></td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n\n<ng-template #columnChromeMenu let-column=\"column\">\n  @if (showColumnChromeMenu()) {\n    <!-- ----- Column insert, move, properties, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.column-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddColumns()) {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-left\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertColumn(column.name, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-right\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-previous' | translate | async) ??\n              ''\n            \"\n            [disabled]=\"isFirstColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'previous')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-left-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-next' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastColumn(column.name)\"\n            (onClick)=\"handleMoveColumn(column.name, 'next')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-right-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-divider></ax-divider>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.column-properties' | translate | async) ??\n              ''\n            \"\n            (onClick)=\"handleEditColumnProperties(column.name)\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-pen-to-square\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveColumns()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveColumn(column.name)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #rowChromeMenu let-rowId=\"rowId\">\n  @if (showRowChromeMenu()) {\n    <!-- ----- Row insert, move, and delete ----- -->\n    <div class=\"__header-actions ax-sm opacity-30 hover:opacity-100\">\n      <ax-dropdown-button\n        class=\"ax-sm\"\n        size=\"sm\"\n        look=\"blank\"\n        [mode]=\"'dropdown'\"\n        [attr.aria-label]=\"\n          ('@general:widgets.spreadsheet.row-menu' | translate | async) ?? ''\n        \"\n        (onClick)=\"handleChromeDropdownClick($event)\"\n      >\n        <ax-button-item-list>\n          @if (allowAddRows() && rowMode() === 'dynamic') {\n            <!---->\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-before' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'before')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-up\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-button-item\n              [text]=\"\n                ('@general:widgets.spreadsheet.insert-after' | translate | async) ??\n                ''\n              \"\n              color=\"primary\"\n              (onClick)=\"handleInsertRow(rowId, 'after')\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-arrow-down\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n            <ax-divider></ax-divider>\n          }\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-up' | translate | async) ?? ''\n            \"\n            [disabled]=\"isFirstRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'up')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-up-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          <ax-button-item\n            [text]=\"\n              ('@general:widgets.spreadsheet.move-down' | translate | async) ?? ''\n            \"\n            [disabled]=\"isLastRow(rowId)\"\n            (onClick)=\"handleMoveRow(rowId, 'down')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-arrow-down-long\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n          @if (allowRemoveRows()) {\n            <!---->\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [text]=\"('@general:actions.delete.title' | translate | async) ?? ''\"\n              color=\"danger\"\n              (onClick)=\"handleRemoveRow(rowId)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n              </ax-prefix>\n            </ax-button-item>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </div>\n  }\n</ng-template>\n\n<ng-template\n  #addColumnMenu\n  let-look=\"look\"\n  let-color=\"color\"\n  let-showText=\"showText\"\n>\n  <!-- ----- Add a column by picking a supported widget type ----- -->\n  <ax-dropdown-button\n    class=\"ax-sm\"\n    [class.__add-column-trigger]=\"!showText\"\n    size=\"sm\"\n    [look]=\"look\"\n    [color]=\"color\"\n    [mode]=\"'dropdown'\"\n    [text]=\"\n      showText\n        ? (('@general:widgets.spreadsheet.add-column' | translate | async) ?? '')\n        : ''\n    \"\n    [attr.aria-label]=\"\n      ('@general:widgets.spreadsheet.add-column' | translate | async) ?? ''\n    \"\n    (onClick)=\"handleChromeDropdownClick($event)\"\n  >\n    @if (!showText) {\n      <ax-prefix>\n        <ax-icon icon=\"far fa-plus\"></ax-icon>\n      </ax-prefix>\n    }\n    <ax-button-item-list>\n      @for (widget of supportedColumnWidgets(); track widget.type) {\n        <ax-button-item\n          [text]=\"(widget.title | translate | async) ?? ''\"\n          (onClick)=\"handleAddColumnOfType(widget.type)\"\n        >\n          <ax-prefix>\n            <ax-icon [icon]=\"widget.icon\"></ax-icon>\n          </ax-prefix>\n        </ax-button-item>\n      }\n    </ax-button-item-list>\n  </ax-dropdown-button>\n</ng-template>\n\n<ng-template #cornerCell>\n  @if (showLeadingColumn()) {\n    <th\n      class=\"__corner-cell\"\n      [attr.rowspan]=\"hasColumnGroups() ? 2 : null\"\n      [style.width.px]=\"showRowIndex() ? 50 : null\"\n    >\n      @if (title()) {\n        <div class=\"__corner-title\">\n          {{ title() | translate | async }}\n        </div>\n      }\n      @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n        <div class=\"__corner-actions ax-sm\">\n          <ax-button\n            look=\"blank\"\n            color=\"primary\"\n            (onClick)=\"handleAddRow()\"\n            [attr.aria-label]=\"('@general:widgets.spreadsheet.add-row' | translate | async) ?? ''\"\n          >\n            <ax-icon icon=\"far fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </th>\n  }\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-rowspan=\"rowspan\">\n  <th\n    class=\"__column-header\"\n    [attr.rowspan]=\"rowspan > 1 ? rowspan : null\"\n    [style.width]=\"showRowIndex() ? null : column.width\"\n  >\n    <div class=\"__header-content\">\n      <div class=\"__header-title\">\n        {{ column.title | translate | async }}\n      </div>\n      <!-- ----- Optional condition under the column title ----- -->\n      @if (column.description) {\n        <div class=\"__header-description\">{{ column.description }}</div>\n      }\n    </div>\n    <ng-container\n      [ngTemplateOutlet]=\"columnChromeMenu\"\n      [ngTemplateOutletContext]=\"{ column: column }\"\n    ></ng-container>\n  </th>\n</ng-template>\n\n<ng-template #addColumnHeader let-rowspan=\"rowspan\">\n  @if (allowAddColumns() && !readonly()) {\n    <th\n      class=\"__column-header __column-header--add ax-sm\"\n      [attr.rowspan]=\"rowspan > 1 ? rowspan : null\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"addColumnMenu\"\n        [ngTemplateOutletContext]=\"{ look: 'blank', color: 'primary', showText: false }\"\n      ></ng-container>\n    </th>\n  }\n</ng-template>\n\n<ng-template #sheetHeader>\n  @if (hasColumnGroups()) {\n    <tr class=\"__header-row\">\n      <ng-container [ngTemplateOutlet]=\"cornerCell\"></ng-container>\n      @for (band of columnHeaderBands(); track $index) {\n        <!--------------------------------------------------------------->\n        @if (band.kind === 'group') {\n          <th class=\"__column-header __column-header--group\" [attr.colspan]=\"band.colspan\">\n            <div class=\"__header-content\">\n              <div class=\"__header-title\">\n                {{ band.title | translate | async }}\n              </div>\n            </div>\n          </th>\n        } @else if (bandColumn(band); as column) {\n          <ng-container\n            [ngTemplateOutlet]=\"columnHeader\"\n            [ngTemplateOutletContext]=\"{ column: column, rowspan: 2 }\"\n          ></ng-container>\n        }\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"addColumnHeader\"\n        [ngTemplateOutletContext]=\"{ rowspan: 2 }\"\n      ></ng-container>\n    </tr>\n    <tr class=\"__header-row __header-row--leaves\">\n      @for (column of groupedColumns(); track column.name) {\n        <ng-container\n          [ngTemplateOutlet]=\"columnHeader\"\n          [ngTemplateOutletContext]=\"{ column: column, rowspan: 1 }\"\n        ></ng-container>\n      }\n    </tr>\n  } @else {\n    <tr class=\"__header-row\">\n      <ng-container [ngTemplateOutlet]=\"cornerCell\"></ng-container>\n      @for (column of currentColumns(); track column.name) {\n        <ng-container\n          [ngTemplateOutlet]=\"columnHeader\"\n          [ngTemplateOutletContext]=\"{ column: column, rowspan: 1 }\"\n        ></ng-container>\n      }\n      <ng-container\n        [ngTemplateOutlet]=\"addColumnHeader\"\n        [ngTemplateOutletContext]=\"{ rowspan: 1 }\"\n      ></ng-container>\n    </tr>\n  }\n</ng-template>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{--axp-spreadsheet-row-height: var(--ax-sys-size-base, 2.5rem);display:flex;height:100%;width:100%;flex-direction:column;--tw-outline-style: none;outline-style:none}.axp-spreadsheet:focus-visible{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-surface))}.axp-spreadsheet .__add-column-trigger ax-suffix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button{display:inline-flex;min-width:0px;align-items:center;justify-content:center}.axp-spreadsheet .__header-actions ax-dropdown-button ax-prefix{display:none}.axp-spreadsheet .__header-actions ax-dropdown-button ax-button button{width:var(--ax-sys-size-base, 2.5rem);height:var(--ax-sys-size-base, 2.5rem);min-height:0;padding:0}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__form-validator{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;padding-bottom:calc(var(--spacing, .25rem) * 10);-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table.__table--cell-editing .__tbody .__row .__cell:not(.__cell--readonly):not(.__cell--editing):hover:before{opacity:0%}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row.__header-row--leaves .__column-header{position:static;top:auto}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:relative;position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;color:var(--color-neutral-700, oklch(37.1% 0 none));z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--add{width:48px;min-width:48px;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--group{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-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{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)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row:not(.__row--empty){height:var(--axp-spreadsheet-row-height)}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-600, oklch(43.9% 0 none));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header.__row-header--group{vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{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)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions ax-dropdown-button{min-width:0px}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);position:relative;box-sizing:border-box;width:200px;min-width:200px;cursor:pointer;overflow:hidden;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding:0;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer{width:48px;min-width:48px;cursor:default;padding-inline:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--add-spacer:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--invalid{box-shadow:inset 0 0 0 1px rgb(var(--ax-sys-color-danger-500))}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:0}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{box-sizing:border-box;display:flex;height:100%;min-height:0px;width:100%;align-items:stretch;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px 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);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{position:absolute;inset:0;margin:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;height:auto;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{box-sizing:border-box;display:flex;min-height:0px;width:100%;align-items:stretch;overflow:hidden;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat>*{display:block;flex:1 1 auto;width:100%;height:100%;min-height:0;margin:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .grid{display:flex;height:100%;width:100%;gap:0px}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(ax-text-box,ax-number-box,ax-select-box,ax-date-time-box,ax-combo-box,ax-lookup,ax-check-box){display:block;height:100%;min-height:0;margin:0;width:100%}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container{height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;padding:0!important;gap:0;border:none;border-radius:0;outline:none;box-shadow:none;background:transparent;background-image:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-within,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-editor-container:focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input){height:100%;min-height:0;padding:0 .5rem;border:none;outline:none;box-shadow:none;background:transparent}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus,.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat :is(input,textarea,select,.ax-input):focus-visible{border:none;outline:none;box-shadow:none}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor--flat .ax-error-container{display:none}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding:0}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table.__table--excel-index{table-layout:fixed;width:100%;min-width:100%}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__index-col{width:50px}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__data-col{width:auto}.axp-spreadsheet .__table.__table--excel-index>colgroup>.__add-col{width:48px}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header:not(.__column-header--add),.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell:not(.__cell--add-spacer){width:auto!important;min-width:0!important;max-width:none!important}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__column-header.__column-header--add,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__cell.__cell--add-spacer{width:48px!important;min-width:48px!important;max-width:48px!important}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__row-header,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row>.__cell{height:var(--axp-spreadsheet-row-height);min-height:var(--axp-spreadsheet-row-height);max-height:var(--axp-spreadsheet-row-height);overflow:hidden}.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{box-sizing:border-box;background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);padding:0;text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-500, oklch(55.6% 0 none));width:50px!important;min-width:50px!important;max-width:50px!important}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-actions,:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-actions{position:static;inset:auto;display:flex;justify-content:center}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__header-content{align-items:center;gap:0px}:is(.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header) .__corner-title{display:none}.axp-spreadsheet .__table.__table--excel-index .__row-index{font-size:11px;--tw-leading: 1;line-height:1;color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{vertical-align:middle}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__row-index,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header .__header-actions{display:none}.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header:hover .__header-actions{display:flex}@media(max-width:768px){.axp-spreadsheet .__table.__table--excel-index .__thead .__header-row .__corner-cell,.axp-spreadsheet .__table.__table--excel-index .__tbody .__row .__row-header{width:50px;min-width:50px;max-width:50px;padding:0}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@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-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-outline-style: solid;--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--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-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { chromeDropdowns: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXDropdownButtonComponent), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowMode", required: false }] }], rowsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsInput", required: false }] }], rowsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsModel", required: false }] }, { type: i0.Output, args: ["rowsModelChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], emptyCellPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCellPlaceholder", required: false }] }], rowTitlePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTitlePath", required: false }] }], rowDescriptionPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDescriptionPath", required: false }] }], allowAddRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddRows", required: false }] }], allowRemoveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemoveRows", required: false }] }], allowAddColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddColumns", required: false }] }], allowRemoveColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemoveColumns", required: false }] }], showCellActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCellActions", required: false }] }], showRowHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRowHeader", required: false }] }], rowGroupPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupPath", required: false }] }], rowWidgets: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowWidgets", required: false }] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowChange: [{ type: i0.Output, args: ["rowChange"] }], columnChange: [{ type: i0.Output, args: ["columnChange"] }], columnsChange: [{ type: i0.Output, args: ["columnsChange"] }], spreadsheetChange: [{ type: i0.Output, args: ["spreadsheetChange"] }] } });
 
 //#endregion
 
@@ -13624,7 +14019,7 @@ class AXPStopwatchComponent {
             </div>
             }
         </div>
-    `, isInline: true, styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [":host{display:inline-flex}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPStopwatchComponent, decorators: [{
             type: Component,
@@ -13880,7 +14275,7 @@ class AXPTableColumnsEditorPopupComponent extends AXBasePageComponent {
         ></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPTableColumnsEditorComponent, selector: "axp-table-columns-editor", inputs: ["columns", "editorContext"], outputs: ["columnsChange", "editorContextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPTableColumnsEditorComponent, selector: "axp-table-columns-editor", inputs: ["columns", "editorContext"], outputs: ["columnsChange", "editorContextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTableColumnsEditorPopupComponent, decorators: [{
             type: Component,
@@ -13922,18 +14317,29 @@ var tableColumnsEditorPopup_component = /*#__PURE__*/Object.freeze({
 class AXPTableColumnsEditorService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.translationService = inject(AXTranslationService);
     }
     async open(options) {
-        const component = await Promise.resolve().then(function () { return tableColumnsEditorPopup_component; }).then((m) => m.AXPTableColumnsEditorPopupComponent);
-        const title = options?.title ??
-            (await this.translationService.translateAsync('@general:widgets.table-columns-editor.popup-title'));
-        const result = await this.popupService.open(component, {
-            title,
-            size: 'lg',
+        let title = options?.title ?? '';
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return tableColumnsEditorPopup_component; }).then((m) => m.AXPTableColumnsEditorPopupComponent),
             data: {
-                columns: options?.columns ?? [],
+                title: options?.title ?? null,
+                columns: (options?.columns ?? []).map((column) => column.name),
+            },
+            prepare: async () => {
+                if (!options?.title) {
+                    title = await this.translationService.translateAsync('@general:widgets.table-columns-editor.popup-title');
+                }
             },
+            show: (component) => this.popupService.open(component, {
+                title,
+                size: 'lg',
+                data: {
+                    columns: options?.columns ?? [],
+                },
+            }),
         });
         const columns = result?.data?.columns;
         return Array.isArray(columns) ? columns : null;
@@ -13988,7 +14394,7 @@ class AXPTableDataEditorComponent {
         }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPSpreadsheetComponent, selector: "axp-spreadsheet", inputs: ["title", "columns", "rowMode", "rowsInput", "rowsModel", "readonly", "emptyCellPlaceholder", "rowTitlePath", "rowDescriptionPath", "allowAddRows", "allowRemoveRows", "allowAddColumns", "allowRemoveColumns", "showCellActions"], outputs: ["rowsModelChange", "cellChange", "rowChange", "columnChange", "columnsChange", "spreadsheetChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPSpreadsheetComponent, selector: "axp-spreadsheet", inputs: ["title", "columns", "rowMode", "rowsInput", "rowsModel", "readonly", "emptyCellPlaceholder", "rowTitlePath", "rowDescriptionPath", "allowAddRows", "allowRemoveRows", "allowAddColumns", "allowRemoveColumns", "showCellActions", "showRowHeader", "rowGroupPath", "rowWidgets"], outputs: ["rowsModelChange", "cellChange", "rowChange", "columnChange", "columnsChange", "spreadsheetChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTableDataEditorComponent, decorators: [{
             type: Component,
@@ -14089,7 +14495,7 @@ class AXPTableDataEditorPopupComponent extends AXBasePageComponent {
         ></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPTableDataEditorComponent, selector: "axp-table-data-editor", inputs: ["columns", "rowsModel"], outputs: ["rowsModelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPTableDataEditorComponent, selector: "axp-table-data-editor", inputs: ["columns", "rowsModel"], outputs: ["rowsModelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTableDataEditorPopupComponent, decorators: [{
             type: Component,
@@ -14134,19 +14540,31 @@ var tableDataEditorPopup_component = /*#__PURE__*/Object.freeze({
 class AXPTableDataEditorService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
         this.translationService = inject(AXTranslationService);
     }
     async open(options) {
-        const component = await Promise.resolve().then(function () { return tableDataEditorPopup_component; }).then((m) => m.AXPTableDataEditorPopupComponent);
-        const title = options?.title ??
-            (await this.translationService.translateAsync('@general:widgets.table-data-editor.popup-title'));
-        const result = await this.popupService.open(component, {
-            title,
-            size: 'lg',
+        let title = options?.title ?? '';
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return tableDataEditorPopup_component; }).then((m) => m.AXPTableDataEditorPopupComponent),
             data: {
-                columns: options.columns ?? [],
-                rows: options.rows ?? [],
+                title: options?.title ?? null,
+                columns: (options.columns ?? []).map((column) => column.name),
+                rowCount: options.rows?.length ?? 0,
             },
+            prepare: async () => {
+                if (!options?.title) {
+                    title = await this.translationService.translateAsync('@general:widgets.table-data-editor.popup-title');
+                }
+            },
+            show: (component) => this.popupService.open(component, {
+                title,
+                size: 'lg',
+                data: {
+                    columns: options.columns ?? [],
+                    rows: options.rows ?? [],
+                },
+            }),
         });
         const rows = result?.data?.rows;
         return Array.isArray(rows) ? rows : null;
@@ -14264,7 +14682,7 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
         </ax-suffix>
       </ax-footer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$4.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$4.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
             type: Component,
@@ -14313,6 +14731,7 @@ var templateViewer_component = /*#__PURE__*/Object.freeze({
 class AXPTemplateViewerService {
     constructor() {
         this.popupService = inject(AXPopupService);
+        this.dialogOpener = inject(AXPDialogOpener);
     }
     /**
      * Show a template viewer dialog with the given configuration
@@ -14320,14 +14739,22 @@ class AXPTemplateViewerService {
      * @returns Promise resolving to viewer result with form values and cancellation status
      */
     async showTemplate(config) {
-        const component = await Promise.resolve().then(function () { return templateViewer_component; }).then(c => c.AXPTemplateViewerComponent);
-        const result = await this.popupService.open(component, {
-            title: config.title || 'Template Viewer',
-            size: config.size || 'lg',
-            closeButton: false,
-            closeOnBackdropClick: false,
-            draggable: false,
-            data: { config }
+        const templateName = typeof config.template === 'string' ? config.template : config.template?.name;
+        const result = await this.dialogOpener.openPopup({
+            load: () => Promise.resolve().then(function () { return templateViewer_component; }).then((c) => c.AXPTemplateViewerComponent),
+            data: {
+                title: config.title ?? null,
+                templateName: templateName ?? null,
+                readOnly: config.readOnly === true,
+            },
+            show: (component) => this.popupService.open(component, {
+                title: config.title || 'Template Viewer',
+                size: config.size || 'lg',
+                closeButton: false,
+                closeOnBackdropClick: false,
+                draggable: false,
+                data: { config },
+            }),
         });
         return result?.data || { context: config.context, cancelled: true, metadata: config.metadata };
     }
@@ -15177,7 +15604,7 @@ class AXPUserCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPUserCardComponent, isStandalone: true, selector: "axp-user-card", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-user-card lightest-surface dark:dark-surface\">\n  <!-- ----- Presence badge in the top-right of the card ----- -->\n  @if (showPresence()) {\n    <span\n      class=\"axp-user-card__presence\"\n      [axTooltip]=\"tooltipText()\"\n      [axTooltipDisabled]=\"tooltipDisabled()\"\n      axTooltipPlacement=\"bottom\"\n    >\n      <ax-badge\n        size=\"sm\"\n        look=\"twotone\"\n        [color]=\"presenceBadgeColor()\"\n        [text]=\"(presenceLabelKey() | translate | async) ?? ''\"\n      ></ax-badge>\n    </span>\n  }\n\n  <div class=\"axp-user-card__identity\">\n    <axp-user-avatar [size]=\"56\" [userId]=\"userId()\" [showPresence]=\"false\"></axp-user-avatar>\n    <div class=\"axp-user-card__names\">\n      <div class=\"axp-user-card__name\">{{ displayName() }}</div>\n      <!-- ----- Username when the identity cache has one ----- -->\n      @if (username()) {\n        <div class=\"axp-user-card__username\">@{{ username() }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- ----- Placeholder extras while contributed items are still loading ----- -->\n  @if (itemsLoading()) {\n    <div class=\"axp-user-card__badges\" aria-hidden=\"true\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge\"></ax-skeleton>\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge axp-user-card__skeleton-badge--wide\"></ax-skeleton>\n    </div>\n    <div class=\"axp-user-card__actions\" aria-hidden=\"true\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-action\"></ax-skeleton>\n    </div>\n  }\n\n  <!-- ----- Contributed identity chips (position, business unit, \u2026) ----- -->\n  @if (!itemsLoading() && extraRows().length > 0) {\n    <div class=\"axp-user-card__badges\">\n      @for (row of extraRows(); track row.id) {\n        <span\n          class=\"axp-user-card__badge\"\n          [axTooltip]=\"(row.label | translate | async) ?? ''\"\n          axTooltipPlacement=\"bottom\"\n        >\n          <ax-badge\n            size=\"sm\"\n            look=\"twotone\"\n            color=\"primary\"\n            [text]=\"(row.value | translate | async) ?? ''\"\n          ></ax-badge>\n        </span>\n      }\n    </div>\n  }\n\n  <!-- ----- Contributed CTAs: button, or dropdown when the action has nested items ----- -->\n  @if (!itemsLoading() && extraActions().length > 0) {\n    <div class=\"axp-user-card__actions\">\n      @for (action of extraActions(); track action.name || action.title) {\n        <ax-button\n          class=\"axp-user-card__action ax-xs\"\n          look=\"outline\"\n          [text]=\"(actionTitle(action) | translate | async) ?? ''\"\n          [disabled]=\"action.disabled\"\n          [color]=\"action.color\"\n          (onClick)=\"onActionClick(action)\"\n        >\n          <!-- ----- Action icon when the contributor provided one ----- -->\n          @if (action.icon) {\n            <ax-prefix>\n              <ax-icon [icon]=\"action.icon\"></ax-icon>\n            </ax-prefix>\n          }\n          <!-- ----- Nested items turn the CTA into a dropdown ----- -->\n          @if (nestedActions(action).length > 0) {\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                @for (sub of nestedActions(action); track sub.name || sub.title) {\n                  <!-- ----- Visible nested action ----- -->\n                  @if (sub.visible != false) {\n                    <ax-button-item\n                      [text]=\"(actionTitle(sub) | translate | async) ?? ''\"\n                      [color]=\"sub.color\"\n                      [disabled]=\"sub.disabled\"\n                      (onClick)=\"onNestedActionClick(sub)\"\n                    >\n                      <!-- ----- Nested action icon ----- -->\n                      @if (sub.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"sub.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                    <!-- ----- Divider after a nested item marked as a break ----- -->\n                    @if (sub.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;:host{display:block;min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card{position:relative;display:flex;width:100%;max-width:24rem;min-width:20rem;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px 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)}.axp-user-card-overlay,.axp-user-card-overlay.ax-overlay-container,.axp-user-card-overlay.ax-overlay-pane,.axp-user-card-overlay .ax-overlay-pane,.axp-user-card-overlay .overlay-pane{min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card-overlay--pending,.axp-user-card-overlay--pending.ax-overlay-container,.axp-user-card-overlay--pending.ax-overlay-pane,.axp-user-card-overlay--pending .ax-overlay-pane,.axp-user-card-overlay--pending .overlay-pane{visibility:hidden;pointer-events:none}.axp-user-card__presence{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 3);top:calc(var(--spacing, .25rem) * 3);z-index:10;display:inline-flex;flex-shrink:0}.axp-user-card__identity{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 16)}.axp-user-card__names{min-width:0px;flex:1}.axp-user-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-user-card__username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-user-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__badge{max-width:100%}.axp-user-card__actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__action{min-width:0px}.axp-user-card__skeleton-badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 20);border-radius:calc(infinity * 1px)}.axp-user-card__skeleton-badge--wide{width:calc(var(--spacing, .25rem) * 36)}.axp-user-card__skeleton-action{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 24);border-radius:var(--radius-md, .375rem)}@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;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-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;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "component", type: i2$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6$1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPUserCardComponent, isStandalone: true, selector: "axp-user-card", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-user-card lightest-surface dark:dark-surface\">\n  <!-- ----- Presence badge in the top-right of the card ----- -->\n  @if (showPresence()) {\n    <span\n      class=\"axp-user-card__presence\"\n      [axTooltip]=\"tooltipText()\"\n      [axTooltipDisabled]=\"tooltipDisabled()\"\n      axTooltipPlacement=\"bottom\"\n    >\n      <ax-badge\n        size=\"sm\"\n        look=\"twotone\"\n        [color]=\"presenceBadgeColor()\"\n        [text]=\"(presenceLabelKey() | translate | async) ?? ''\"\n      ></ax-badge>\n    </span>\n  }\n\n  <div class=\"axp-user-card__identity\">\n    <axp-user-avatar [size]=\"56\" [userId]=\"userId()\" [showPresence]=\"false\"></axp-user-avatar>\n    <div class=\"axp-user-card__names\">\n      <div class=\"axp-user-card__name\">{{ displayName() }}</div>\n      <!-- ----- Username when the identity cache has one ----- -->\n      @if (username()) {\n        <div class=\"axp-user-card__username\">@{{ username() }}</div>\n      }\n    </div>\n  </div>\n\n  <!-- ----- Placeholder extras while contributed items are still loading ----- -->\n  @if (itemsLoading()) {\n    <div class=\"axp-user-card__badges\" aria-hidden=\"true\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge\"></ax-skeleton>\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge axp-user-card__skeleton-badge--wide\"></ax-skeleton>\n    </div>\n    <div class=\"axp-user-card__actions\" aria-hidden=\"true\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-action\"></ax-skeleton>\n    </div>\n  }\n\n  <!-- ----- Contributed identity chips (position, business unit, \u2026) ----- -->\n  @if (!itemsLoading() && extraRows().length > 0) {\n    <div class=\"axp-user-card__badges\">\n      @for (row of extraRows(); track row.id) {\n        <span\n          class=\"axp-user-card__badge\"\n          [axTooltip]=\"(row.label | translate | async) ?? ''\"\n          axTooltipPlacement=\"bottom\"\n        >\n          <ax-badge\n            size=\"sm\"\n            look=\"twotone\"\n            color=\"primary\"\n            [text]=\"(row.value | translate | async) ?? ''\"\n          ></ax-badge>\n        </span>\n      }\n    </div>\n  }\n\n  <!-- ----- Contributed CTAs: button, or dropdown when the action has nested items ----- -->\n  @if (!itemsLoading() && extraActions().length > 0) {\n    <div class=\"axp-user-card__actions\">\n      @for (action of extraActions(); track action.name || action.title) {\n        <ax-button\n          class=\"axp-user-card__action ax-xs\"\n          look=\"outline\"\n          [text]=\"(actionTitle(action) | translate | async) ?? ''\"\n          [disabled]=\"action.disabled\"\n          [color]=\"action.color\"\n          (onClick)=\"onActionClick(action)\"\n        >\n          <!-- ----- Action icon when the contributor provided one ----- -->\n          @if (action.icon) {\n            <ax-prefix>\n              <ax-icon [icon]=\"action.icon\"></ax-icon>\n            </ax-prefix>\n          }\n          <!-- ----- Nested items turn the CTA into a dropdown ----- -->\n          @if (nestedActions(action).length > 0) {\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                @for (sub of nestedActions(action); track sub.name || sub.title) {\n                  <!-- ----- Visible nested action ----- -->\n                  @if (sub.visible != false) {\n                    <ax-button-item\n                      [text]=\"(actionTitle(sub) | translate | async) ?? ''\"\n                      [color]=\"sub.color\"\n                      [disabled]=\"sub.disabled\"\n                      (onClick)=\"onNestedActionClick(sub)\"\n                    >\n                      <!-- ----- Nested action icon ----- -->\n                      @if (sub.icon) {\n                        <ax-prefix>\n                          <ax-icon [icon]=\"sub.icon\"></ax-icon>\n                        </ax-prefix>\n                      }\n                    </ax-button-item>\n                    <!-- ----- Divider after a nested item marked as a break ----- -->\n                    @if (sub.break) {\n                      <ax-divider></ax-divider>\n                    }\n                  }\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          }\n        </ax-button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;:host{display:block;min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card{position:relative;display:flex;width:100%;max-width:24rem;min-width:20rem;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px 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)}.axp-user-card-overlay,.axp-user-card-overlay.ax-overlay-container,.axp-user-card-overlay.ax-overlay-pane,.axp-user-card-overlay .ax-overlay-pane,.axp-user-card-overlay .overlay-pane{min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card-overlay--pending,.axp-user-card-overlay--pending.ax-overlay-container,.axp-user-card-overlay--pending.ax-overlay-pane,.axp-user-card-overlay--pending .ax-overlay-pane,.axp-user-card-overlay--pending .overlay-pane{visibility:hidden;pointer-events:none}.axp-user-card__presence{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 3);top:calc(var(--spacing, .25rem) * 3);z-index:10;display:inline-flex;flex-shrink:0}.axp-user-card__identity{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 16)}.axp-user-card__names{min-width:0px;flex:1}.axp-user-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-user-card__username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-user-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__badge{max-width:100%}.axp-user-card__actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__action{min-width:0px}.axp-user-card__skeleton-badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 20);border-radius:calc(infinity * 1px)}.axp-user-card__skeleton-badge--wide{width:calc(var(--spacing, .25rem) * 36)}.axp-user-card__skeleton-action{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 24);border-radius:var(--radius-md, .375rem)}@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;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-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;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6$2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardComponent, decorators: [{
             type: Component,
@@ -15691,7 +16118,7 @@ class AXPQueryViewsComponent {
         console.log(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryViewsComponent, isStandalone: true, selector: "axp-query-views", inputs: { views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { views: "viewsChange", selectedView: "selectedViewChange", viewContextMenu: "viewContextMenu" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"font-semibold w-full\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item\n      (onClick)=\"setView(item)\"\n      (contextmenu)=\"onTabContextMenu($event, item)\"\n      [key]=\"item.name\"\n      [text]=\"(item.title | translate | async) || 'item.title'\"\n    ></ax-tab-item>\n  }\n  <!-- <ax-tab-item\n      (onClick)=\"createNew()\"\n      [key]=\"'create-new'\"\n      [text]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n", dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryViewsComponent, isStandalone: true, selector: "axp-query-views", inputs: { views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { views: "viewsChange", selectedView: "selectedViewChange", viewContextMenu: "viewContextMenu" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"font-semibold w-full\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item\n      (onClick)=\"setView(item)\"\n      (contextmenu)=\"onTabContextMenu($event, item)\"\n      [key]=\"item.name\"\n      [text]=\"(item.title | translate | async) || 'item.title'\"\n    ></ax-tab-item>\n  }\n  <!-- <ax-tab-item\n      (onClick)=\"createNew()\"\n      [key]=\"'create-new'\"\n      [text]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n    >\n    </ax-tab-item> -->\n</ax-tabs>\n", dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "renderMode", "stacked", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i6$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryViewsComponent, decorators: [{
             type: Component,
@@ -15801,7 +16228,7 @@ class AXPQueryViewSaveButtonComponent {
         this.save.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryViewSaveButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryViewSaveButtonComponent, isStandalone: true, selector: "axp-query-view-save-button", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save" }, host: { classAttribute: "axp-query-view-save-button-host" }, ngImport: i0, template: "<!-- ----- Save current list layout as a named view ----- -->\n@if (visible()) {\n  <div\n    class=\"axp-query-view-save-button\"\n    animate.enter=\"axp-query-view-save-button--enter\"\n    animate.leave=\"axp-query-view-save-button--leave\"\n  >\n    <ax-button\n      [title]=\"'@general:terms.interface.view.save-as'\"\n      [iconOnly]=\"true\"\n      [color]=\"'primary'\"\n      [look]=\"'outline'\"\n      (onClick)=\"onSave()\"\n    >\n      <ax-prefix>\n        <i class=\"fa-light fa-floppy-disk\"></i>\n      </ax-prefix>\n    </ax-button>\n  </div>\n}\n", styles: [".axp-query-view-save-button-host{display:contents}.axp-query-view-save-button{display:flex;flex:0 0 auto;align-items:center;overflow:hidden;max-width:var(--ax-sys-size-base)}.axp-query-view-save-button--enter{animation:axp-query-view-save-button-in .22s ease-out both}.axp-query-view-save-button--leave{animation:axp-query-view-save-button-out .18s ease-in both}@keyframes axp-query-view-save-button-in{0%{opacity:0;max-width:0;transform:scale(.92)}to{opacity:1;max-width:var(--ax-sys-size-base);transform:scale(1)}}@keyframes axp-query-view-save-button-out{0%{opacity:1;max-width:var(--ax-sys-size-base);transform:scale(1)}to{opacity:0;max-width:0;transform:scale(.92)}}.axp-query-view-save-button ax-button,.axp-query-view-save-button ax-button button{min-width:var(--ax-sys-size-base);width:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryViewSaveButtonComponent, isStandalone: true, selector: "axp-query-view-save-button", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save" }, host: { classAttribute: "axp-query-view-save-button-host" }, ngImport: i0, template: "<!-- ----- Save current list layout as a named view ----- -->\n@if (visible()) {\n  <div\n    class=\"axp-query-view-save-button\"\n    animate.enter=\"axp-query-view-save-button--enter\"\n    animate.leave=\"axp-query-view-save-button--leave\"\n  >\n    <ax-button\n      [title]=\"'@general:terms.interface.view.save-as'\"\n      [iconOnly]=\"true\"\n      [color]=\"'primary'\"\n      [look]=\"'outline'\"\n      (onClick)=\"onSave()\"\n    >\n      <ax-prefix>\n        <i class=\"fa-light fa-floppy-disk\"></i>\n      </ax-prefix>\n    </ax-button>\n  </div>\n}\n", styles: [".axp-query-view-save-button-host{display:contents}.axp-query-view-save-button{display:flex;flex:0 0 auto;align-items:center;overflow:hidden;max-width:var(--ax-sys-size-base)}.axp-query-view-save-button--enter{animation:axp-query-view-save-button-in .22s ease-out both}.axp-query-view-save-button--leave{animation:axp-query-view-save-button-out .18s ease-in both}@keyframes axp-query-view-save-button-in{0%{opacity:0;max-width:0;transform:scale(.92)}to{opacity:1;max-width:var(--ax-sys-size-base);transform:scale(1)}}@keyframes axp-query-view-save-button-out{0%{opacity:1;max-width:var(--ax-sys-size-base);transform:scale(1)}to{opacity:0;max-width:0;transform:scale(.92)}}.axp-query-view-save-button ax-button,.axp-query-view-save-button ax-button button{min-width:var(--ax-sys-size-base);width:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryViewSaveButtonComponent, decorators: [{
             type: Component,
@@ -16393,7 +16820,7 @@ class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
         </ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode", "layoutProfile", "bindingExpressionEditorMode"], outputs: ["onChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode", "layoutProfile", "bindingExpressionEditorMode"], outputs: ["onChanged"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
             type: Component,