@acorex-platform/framework-client 0.0.32 → 0.0.37

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

@@ -1,7 +1,7 @@
 import { getSystemActions, resolveToSurfaceClass, AXPFileStorageStatus, AXP_QUERY_QUICK_SEARCH_FIELD, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsCatalog, AXPRegionalSetting, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
 import * as i1$2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i1$6 from '@acorex/cdk/common';
+import * as i1$5 from '@acorex/cdk/common';
 import { AXCommonModule } from '@acorex/cdk/common';
 import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
@@ -29,40 +29,39 @@ 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';
-import * as i5$1 from '@acorex/components/dropdown';
+import * as i5 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i5 from '@acorex/components/search-box';
+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_DISTRIBUTED_EVENT_LISTENER_PROVIDER, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPDeviceService } from '@acorex-platform/framework-client/core';
 export { AXPLogoComponent } from '@acorex-platform/framework-client/core';
 import * as i2$2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
-import * as i3$2 from '@acorex/components/switch';
+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$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 { AXTextBoxModule } from '@acorex/components/text-box';
 import * as i2$3 from '@acorex/components/check-box';
 import { AXCheckBoxModule } from '@acorex/components/check-box';
-import * as i1$5 from '@acorex/components/label';
+import * as i3$4 from '@acorex/components/label';
 import { AXLabelModule } from '@acorex/components/label';
-import * as i3$3 from '@acorex-platform/framework-client/layout/widget-core';
+import * as i3$5 from '@acorex-platform/framework-client/layout/widget-core';
 import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetContainerComponent } from '@acorex-platform/framework-client/layout/widget-core';
-import * as i3$4 from '@acorex/components/dropdown-button';
+import * as i3$6 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i7 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPopupService } from '@acorex/components/popup';
 import { moveItemInArray as moveItemInArray$1, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
-import * as i2$4 from '@acorex/components/select-box';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
+import { AXLookupComponent } from '@acorex/components/lookup';
 import { AXToastService } from '@acorex/components/toast';
 import { getFileExtension, AXFileService } from '@acorex/core/file';
 import { AXDialogService } from '@acorex/components/dialog';
@@ -74,22 +73,22 @@ import * as i7$1 from '@acorex/cdk/list-navigation';
 import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
 import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
 import { AXSelectionListModule } from '@acorex/components/selection-list';
-import * as i5$2 from '@acorex/components/tag-box';
+import * as i5$1 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 { resolveEntityListFilterQueryField, resolveEntityListFilterContextField } from '@acorex-platform/framework-shared/entity';
-import * as i1$7 from '@acorex/components/image-editor';
+import * as i1$6 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 { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i4$2 from '@acorex/components/code-editor';
 import { AXCodeEditorModule } from '@acorex/components/code-editor';
 import * as i8 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
-import * as i1$8 from '@acorex/components/menu';
+import * as i1$7 from '@acorex/components/menu';
 import { AXMenuModule } from '@acorex/components/menu';
 import { AXSchedulerComponent } from '@acorex/components/scheduler';
 import { AXSafePipe } from '@acorex/core/pipes';
@@ -1257,7 +1256,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", "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: i5.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", "size", "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$1.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,
@@ -1412,7 +1411,7 @@ class AXPColorChooserComponent {
         this.dropdownWidth.set(`${Math.max(hostWidth, POPOVER_MIN_WIDTH_PX)}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPColorChooserComponent, isStandalone: true, selector: "axp-color-chooser", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, selectedClass: { classPropertyName: "selectedClass", publicName: "selectedClass", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { classSelected: "classSelected" }, host: { listeners: { "click": "hostClickListener()" }, classAttribute: "axp-color-chooser" }, viewQueries: [{ propertyName: "paletteDropdown", first: true, predicate: ["paletteDropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"__root\" [class.__disabled]=\"disabled()\" [class.__readonly]=\"readonly()\">\n  @if (usePopover()) {\n    <!-- ----- Same shell as ax-select-box: dropdown-box + input slot + panel ----- -->\n    <ax-dropdown-box\n      #paletteDropdown\n      [disabled]=\"disabled()\"\n      [popoverWidth]=\"dropdownWidth()\"\n      (onOpened)=\"handleDropdownOpened()\"\n      (onClosed)=\"handleDropdownClosed()\"\n    >\n      <ng-container input>\n        <div class=\"ax-editor ax-content ax-input\">\n          <ng-container *ngTemplateOutlet=\"selectedItem\"></ng-container>\n        </div>\n        @if (allowClear() && hasSelection() && isInteractive()) {\n          <button\n            type=\"button\"\n            class=\"ax-general-button-icon\"\n            tabindex=\"-1\"\n            (click)=\"handleClear($event)\"\n          >\n            <span class=\"ax-icon ax-icon-close\"></span>\n          </button>\n        }\n        <button type=\"button\" class=\"ax-general-button-icon\" [disabled]=\"!isInteractive()\" tabindex=\"-1\">\n          <span\n            class=\"ax-icon\"\n            [class.ax-icon-chevron-down]=\"!dropdownOpen()\"\n            [class.ax-icon-chevron-up]=\"dropdownOpen()\"\n          ></span>\n        </button>\n      </ng-container>\n      <ng-container panel>\n        <div class=\"__popover\" [style.min-width]=\"dropdownWidth()\">\n          <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: true }\"></ng-container>\n        </div>\n      </ng-container>\n    </ax-dropdown-box>\n  }\n  <!-- ----- Single named row stays inline at select height ----- -->\n  @else {\n    <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: false }\"></ng-container>\n    <!-- ----- Clear under the single inline strip ----- -->\n    @if (allowClear()) {\n      <button\n        type=\"button\"\n        class=\"__clear\"\n        [class.__selected]=\"selectedClass() == null\"\n        [disabled]=\"!isInteractive()\"\n        (click)=\"handleClear($event)\"\n      >\n        <span class=\"ax-icon ax-icon-close\"></span>\n      </button>\n    }\n  }\n</div>\n\n<ng-template #selectedItem>\n  @if (selectedSwatch(); as swatch) {\n    <!-- ----- Selected value as a surface-colored pill ----- -->\n    <div class=\"__selected-item {{ swatch.className }}\">\n      <span class=\"__selected-text\">\n        <!-- ----- Group title before the selected variant ----- -->\n        @if (selectedGroup()?.title; as groupTitle) {\n          {{ groupTitle | translate | async }}\n          <span class=\"__trigger-sep\">\u00B7</span>\n        }\n        {{ displayLabel(swatch.label) | translate | async }}\n      </span>\n    </div>\n  }\n  <!-- ----- Empty state uses the same control height as a select ----- -->\n  @else {\n    <div class=\"ax-placeholder\">\n      {{ '@platform-layout-widgets:widgets.color-chooser.placeholder' | translate | async }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #paletteGroups let-showTitles=\"showTitles\">\n  <div class=\"__groups\" [class.__look-strip]=\"look() === 'strip'\" [class.__look-swatches]=\"look() === 'swatches'\">\n    @for (group of resolvedGroups(); track group.id) {\n      <div class=\"__group\">\n        <!-- ----- Named row title inside the dropdown list ----- -->\n        @if (showTitles && group.title) {\n          <div class=\"__group-title\">{{ group.title | translate | async }}</div>\n        }\n        <!-- ----- Coolors bar: thin columns, hover expands and shows the label ----- -->\n        <div class=\"__strip\" role=\"listbox\">\n          @for (swatch of group.swatches; track swatch.className) {\n            <button\n              type=\"button\"\n              class=\"__column {{ swatch.className }}\"\n              [class.__selected]=\"isSelected(swatch.className)\"\n              [disabled]=\"!isInteractive()\"\n              [attr.aria-label]=\"displayLabel(swatch.label)\"\n              [attr.aria-selected]=\"isSelected(swatch.className)\"\n              (click)=\"handleSelect(swatch)\"\n            >\n              <span class=\"__label\">{{ displayLabel(swatch.label) | translate | async }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-height:var(--ax-sys-size-base, 2.5rem);width:100%}:host ax-dropdown-box{width:100%}:host .ax-editor-container{padding-block:0}:host .ax-content{display:flex;min-height:var(--ax-sys-size-base, 2.5rem);min-width:0;flex:1;cursor:pointer;align-items:center;outline:none;-webkit-user-select:none;user-select:none}.__root{display:flex;flex-direction:column;gap:.5rem}.__selected-item{display:inline-flex;align-items:center;max-width:100%;min-height:1.5rem;padding-inline:.5rem;border-radius:.375rem}.__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__placeholder{opacity:.65}.__trigger-sep{margin-inline:.25rem}.__popover{box-sizing:border-box;width:100%;max-height:min(24rem,70vh);overflow:auto;padding:.75rem}.__groups{display:flex;flex-direction:column;gap:.75rem;min-width:0}.__group-title{font-size:.75rem;font-weight:500;color:rgb(var(--ax-sys-color-on-lighter-surface))}.__strip{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;height:var(--ax-sys-size-base, 2.5rem);overflow:hidden;border-radius:.5rem}.__column{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:0;appearance:none;cursor:pointer;transition:flex .22s ease}.__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ax-sys-text-xs-base, .75rem);font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .16s ease}.__look-strip .__column.__selected,.__look-strip .__column:hover:not(:disabled),.__look-strip .__column:focus-visible:not(:disabled){flex:4 1 0}.__look-strip .__column.__selected .__label,.__look-strip .__column:hover:not(:disabled) .__label,.__look-strip .__column:focus-visible:not(:disabled) .__label{opacity:1}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover),.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible){flex:1 1 0}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover) .__label,.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible) .__label{opacity:0}.__column.__selected{box-shadow:inset 0 0 0 2px rgb(var(--ax-sys-color-on-lighter-surface) / .4)}.__column:disabled{cursor:not-allowed}.__clear{align-self:flex-start;display:inline-flex;height:1.75rem;width:1.75rem;align-items:center;justify-content:center;border-radius:999px;border:1px dashed rgb(var(--ax-sys-color-border-lighter-surface));background:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));font-size:.75rem}.__clear.__selected,.__clear:focus-visible:not(:disabled){outline:2px solid rgb(var(--ax-sys-color-primary));outline-offset:2px}.__clear:disabled{cursor:not-allowed;opacity:.5}.__look-swatches .__strip{height:auto;flex-wrap:wrap;gap:.25rem;overflow:visible;border-radius:0}.__look-swatches .__column{flex:0 0 2rem;width:2rem;height:2rem;min-width:2rem;border-radius:.375rem;transition:transform .16s ease}.__look-swatches .__label{display:none}.__look-swatches .__column:hover:not(:disabled),.__look-swatches .__column:focus-visible:not(:disabled){flex:0 0 2rem;transform:scale(1.08)}.__disabled .__column,.__readonly .__column,.__disabled .__clear,.__readonly .__clear,.__disabled .ax-content,.__readonly .ax-content{cursor:default}\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: AXTranslationModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { 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: AXPColorChooserComponent, isStandalone: true, selector: "axp-color-chooser", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, selectedClass: { classPropertyName: "selectedClass", publicName: "selectedClass", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { classSelected: "classSelected" }, host: { listeners: { "click": "hostClickListener()" }, classAttribute: "axp-color-chooser" }, viewQueries: [{ propertyName: "paletteDropdown", first: true, predicate: ["paletteDropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"__root\" [class.__disabled]=\"disabled()\" [class.__readonly]=\"readonly()\">\n  @if (usePopover()) {\n    <!-- ----- Same shell as ax-select-box: dropdown-box + input slot + panel ----- -->\n    <ax-dropdown-box\n      #paletteDropdown\n      [disabled]=\"disabled()\"\n      [popoverWidth]=\"dropdownWidth()\"\n      (onOpened)=\"handleDropdownOpened()\"\n      (onClosed)=\"handleDropdownClosed()\"\n    >\n      <ng-container input>\n        <div class=\"ax-editor ax-content ax-input\">\n          <ng-container *ngTemplateOutlet=\"selectedItem\"></ng-container>\n        </div>\n        @if (allowClear() && hasSelection() && isInteractive()) {\n          <button\n            type=\"button\"\n            class=\"ax-general-button-icon\"\n            tabindex=\"-1\"\n            (click)=\"handleClear($event)\"\n          >\n            <span class=\"ax-icon ax-icon-close\"></span>\n          </button>\n        }\n        <button type=\"button\" class=\"ax-general-button-icon\" [disabled]=\"!isInteractive()\" tabindex=\"-1\">\n          <span\n            class=\"ax-icon\"\n            [class.ax-icon-chevron-down]=\"!dropdownOpen()\"\n            [class.ax-icon-chevron-up]=\"dropdownOpen()\"\n          ></span>\n        </button>\n      </ng-container>\n      <ng-container panel>\n        <div class=\"__popover\" [style.min-width]=\"dropdownWidth()\">\n          <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: true }\"></ng-container>\n        </div>\n      </ng-container>\n    </ax-dropdown-box>\n  }\n  <!-- ----- Single named row stays inline at select height ----- -->\n  @else {\n    <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: false }\"></ng-container>\n    <!-- ----- Clear under the single inline strip ----- -->\n    @if (allowClear()) {\n      <button\n        type=\"button\"\n        class=\"__clear\"\n        [class.__selected]=\"selectedClass() == null\"\n        [disabled]=\"!isInteractive()\"\n        (click)=\"handleClear($event)\"\n      >\n        <span class=\"ax-icon ax-icon-close\"></span>\n      </button>\n    }\n  }\n</div>\n\n<ng-template #selectedItem>\n  @if (selectedSwatch(); as swatch) {\n    <!-- ----- Selected value as a surface-colored pill ----- -->\n    <div class=\"__selected-item {{ swatch.className }}\">\n      <span class=\"__selected-text\">\n        <!-- ----- Group title before the selected variant ----- -->\n        @if (selectedGroup()?.title; as groupTitle) {\n          {{ groupTitle | translate | async }}\n          <span class=\"__trigger-sep\">\u00B7</span>\n        }\n        {{ displayLabel(swatch.label) | translate | async }}\n      </span>\n    </div>\n  }\n  <!-- ----- Empty state uses the same control height as a select ----- -->\n  @else {\n    <div class=\"ax-placeholder\">\n      {{ '@platform-layout-widgets:widgets.color-chooser.placeholder' | translate | async }}\n    </div>\n  }\n</ng-template>\n\n<ng-template #paletteGroups let-showTitles=\"showTitles\">\n  <div class=\"__groups\" [class.__look-strip]=\"look() === 'strip'\" [class.__look-swatches]=\"look() === 'swatches'\">\n    @for (group of resolvedGroups(); track group.id) {\n      <div class=\"__group\">\n        <!-- ----- Named row title inside the dropdown list ----- -->\n        @if (showTitles && group.title) {\n          <div class=\"__group-title\">{{ group.title | translate | async }}</div>\n        }\n        <!-- ----- Coolors bar: thin columns, hover expands and shows the label ----- -->\n        <div class=\"__strip\" role=\"listbox\">\n          @for (swatch of group.swatches; track swatch.className) {\n            <button\n              type=\"button\"\n              class=\"__column {{ swatch.className }}\"\n              [class.__selected]=\"isSelected(swatch.className)\"\n              [disabled]=\"!isInteractive()\"\n              [attr.aria-label]=\"displayLabel(swatch.label)\"\n              [attr.aria-selected]=\"isSelected(swatch.className)\"\n              (click)=\"handleSelect(swatch)\"\n            >\n              <span class=\"__label\">{{ displayLabel(swatch.label) | translate | async }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;min-height:var(--ax-sys-size-base, 2.5rem);width:100%}:host ax-dropdown-box{width:100%}:host .ax-editor-container{padding-block:0}:host .ax-content{display:flex;min-height:var(--ax-sys-size-base, 2.5rem);min-width:0;flex:1;cursor:pointer;align-items:center;outline:none;-webkit-user-select:none;user-select:none}.__root{display:flex;flex-direction:column;gap:.5rem}.__selected-item{display:inline-flex;align-items:center;max-width:100%;min-height:1.5rem;padding-inline:.5rem;border-radius:.375rem}.__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__placeholder{opacity:.65}.__trigger-sep{margin-inline:.25rem}.__popover{box-sizing:border-box;width:100%;max-height:min(24rem,70vh);overflow:auto;padding:.75rem}.__groups{display:flex;flex-direction:column;gap:.75rem;min-width:0}.__group-title{font-size:.75rem;font-weight:500;color:rgb(var(--ax-sys-color-on-lighter-surface))}.__strip{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;height:var(--ax-sys-size-base, 2.5rem);overflow:hidden;border-radius:.5rem}.__column{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:0;appearance:none;cursor:pointer;transition:flex .22s ease}.__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ax-sys-text-xs-base, .75rem);font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .16s ease}.__look-strip .__column.__selected,.__look-strip .__column:hover:not(:disabled),.__look-strip .__column:focus-visible:not(:disabled){flex:4 1 0}.__look-strip .__column.__selected .__label,.__look-strip .__column:hover:not(:disabled) .__label,.__look-strip .__column:focus-visible:not(:disabled) .__label{opacity:1}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover),.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible){flex:1 1 0}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover) .__label,.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible) .__label{opacity:0}.__column.__selected{box-shadow:inset 0 0 0 2px rgb(var(--ax-sys-color-on-lighter-surface) / .4)}.__column:disabled{cursor:not-allowed}.__clear{align-self:flex-start;display:inline-flex;height:1.75rem;width:1.75rem;align-items:center;justify-content:center;border-radius:999px;border:1px dashed rgb(var(--ax-sys-color-border-lighter-surface));background:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));font-size:.75rem}.__clear.__selected,.__clear:focus-visible:not(:disabled){outline:2px solid rgb(var(--ax-sys-color-primary));outline-offset:2px}.__clear:disabled{cursor:not-allowed;opacity:.5}.__look-swatches .__strip{height:auto;flex-wrap:wrap;gap:.25rem;overflow:visible;border-radius:0}.__look-swatches .__column{flex:0 0 2rem;width:2rem;height:2rem;min-width:2rem;border-radius:.375rem;transition:transform .16s ease}.__look-swatches .__label{display:none}.__look-swatches .__column:hover:not(:disabled),.__look-swatches .__column:focus-visible:not(:disabled){flex:0 0 2rem;transform:scale(1.08)}.__disabled .__column,.__readonly .__column,.__disabled .__clear,.__readonly .__clear,.__disabled .ax-content,.__readonly .ax-content{cursor:default}\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: AXTranslationModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { 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: AXPColorChooserComponent, decorators: [{
             type: Component,
@@ -1618,7 +1617,7 @@ class AXPColumnItemListComponent {
         </div>
       </div>
     </ax-popover>
-  `, 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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: 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", "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,
@@ -1701,7 +1700,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 } }, 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 max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\"\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$2.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 } }, 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 max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\"\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,
@@ -1797,7 +1796,9 @@ class AXPTextCommandColumnComponent extends AXDataTableColumnComponent {
         ], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "contentFooterTemplate", first: true, predicate: ["footer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #header>
       <div
-        class="axp-widget-column-header w-full flex items-center select-none"
+        class="axp-widget-column-header w-full select-none"
+        [class.flex]="!sortEnabled"
+        [class.items-center]="!sortEnabled"
         [class.axp-widget-column-header--sortable]="sortEnabled"
         [class.axp-widget-column-header--sort-active]="
           headerSortDirection === 'asc' || headerSortDirection === 'desc'
@@ -1811,9 +1812,7 @@ class AXPTextCommandColumnComponent extends AXDataTableColumnComponent {
           >{{ caption | translate | async }}</span
         >
         @if (sortEnabled) {
-          <span
-            class="axp-widget-column-header__sort flex items-center gap-0.5 shrink-0"
-          >
+          <span class="axp-widget-column-header__sort">
             @if (headerSortPriority !== undefined && headerSortPriority > 1) {
               <span
                 class="axp-widget-column-header__sort-priority text-xs opacity-70"
@@ -1846,14 +1845,16 @@ class AXPTextCommandColumnComponent extends AXDataTableColumnComponent {
       }
     </ng-template>
     <ng-template #footer></ng-template>
-  `, isInline: true, styles: ["@layer properties;.axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__caption{min-width:0px}.axp-widget-column-header__caption--with-sort{flex:1;flex:1 1 0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header__sort-priority{--tw-leading: 1;line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}@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-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;.axp-widget-column-header--sortable{position:relative;width:100%;min-width:0px;cursor:pointer}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header--sortable:hover .axp-widget-column-header__caption,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__caption,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__caption{padding-inline-end:calc(var(--spacing, .25rem) * 5)}.axp-widget-column-header__caption{display:block;width:100%;min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-widget-column-header__sort{position:absolute;inset-block:0;inset-inline-end:0;z-index:1;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5);opacity:0;transition:opacity .15s ease}.axp-widget-column-header__sort i{display:block;--tw-leading: 1;line-height:1;font-size:.625rem}.axp-widget-column-header__sort-priority{--tw-leading: 1;line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}@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-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTextCommandColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-text-command-column', template: `
     <ng-template #header>
       <div
-        class="axp-widget-column-header w-full flex items-center select-none"
+        class="axp-widget-column-header w-full select-none"
+        [class.flex]="!sortEnabled"
+        [class.items-center]="!sortEnabled"
         [class.axp-widget-column-header--sortable]="sortEnabled"
         [class.axp-widget-column-header--sort-active]="
           headerSortDirection === 'asc' || headerSortDirection === 'desc'
@@ -1867,9 +1868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           >{{ caption | translate | async }}</span
         >
         @if (sortEnabled) {
-          <span
-            class="axp-widget-column-header__sort flex items-center gap-0.5 shrink-0"
-          >
+          <span class="axp-widget-column-header__sort">
             @if (headerSortPriority !== undefined && headerSortPriority > 1) {
               <span
                 class="axp-widget-column-header__sort-priority text-xs opacity-70"
@@ -1907,7 +1906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             provide: AXDataTableColumnComponent,
                             useExisting: forwardRef(() => AXPTextCommandColumnComponent),
                         },
-                    ], styles: ["@layer properties;.axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__caption{min-width:0px}.axp-widget-column-header__caption--with-sort{flex:1;flex:1 1 0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header__sort-priority{--tw-leading: 1;line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}@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-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], styles: ["@layer properties;.axp-widget-column-header--sortable{position:relative;width:100%;min-width:0px;cursor:pointer}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header--sortable:hover .axp-widget-column-header__caption,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__caption,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__caption{padding-inline-end:calc(var(--spacing, .25rem) * 5)}.axp-widget-column-header__caption{display:block;width:100%;min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-widget-column-header__sort{position:absolute;inset-block:0;inset-inline-end:0;z-index:1;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * .5);opacity:0;transition:opacity .15s ease}.axp-widget-column-header__sort i{display:block;--tw-leading: 1;line-height:1;font-size:.625rem}.axp-widget-column-header__sort-priority{--tw-leading: 1;line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}@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-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { caption: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2070,9 +2069,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: i1$5.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: 
+                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: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.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: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$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,
@@ -2672,7 +2671,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$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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"] }, { 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: i5.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: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "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: i7.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$5.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"] }, { 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: i3$5.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "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: i7.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,
@@ -2809,7 +2808,7 @@ class AXPDragDropListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDragDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDragDropListComponent, isStandalone: true, selector: "axp-drag-drop-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", itemClick: "itemClick", dropListDropped: "dropListDropped" }, host: { classAttribute: "axp-drag-drop-list" }, ngImport: i0, template: "<div\n  class=\"axp-drag-drop-list-container divide-y\"\n  [attr.id]=\"listId()\"\n  [attr.data-orientation]=\"orientation()\"\n  axDropList\n  [dropListGroup]=\"dropListGroup()\"\n  [dropListOrientation]=\"orientation()\"\n  (dropListDropped)=\"onDrop($event)\"\n  [sortingDisabled]=\"disable()\"\n>\n  @if (items().length === 0) {\n    <div class=\"axp-drag-drop-list-empty\">\n      <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n    </div>\n  }\n\n  @for (item of items(); track item.id; let i = $index) {\n    <div\n      class=\"axp-drag-drop-list-item\"\n      [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n      [class]=\"item.cssClass\"\n      axDrag\n      [dragDisabled]=\"item.disabled || false\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n        <i class=\"fa-solid fa-bars\"></i>\n      </div>\n\n      <div class=\"axp-drag-drop-list-item-content\">\n        {{ item.content }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-container{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);border-radius:.25rem;padding:calc(var(--spacing, .25rem) * 2);background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.axp-drag-drop-list-empty-message{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));font-style:italic;color:var(--ax-text-secondary-color, #9e9e9e)}.axp-drag-drop-list-item{display:flex;cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);-webkit-user-select:none;user-select:none;background-color:rgb(var(--ax-sys-color-lightest-surface));transition:all .2s ease}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px #00000026;opacity:.9}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px #0003;opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{--tw-border-style: dashed;border-style:dashed;opacity:30%}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}.axp-drag-drop-list-item-handle{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{height:100%;width:100%}.axp-drag-drop-list-item-content{min-width:0px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom: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)))}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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"], exportAs: ["axDropList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDragDropListComponent, isStandalone: true, selector: "axp-drag-drop-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", itemClick: "itemClick", dropListDropped: "dropListDropped" }, host: { classAttribute: "axp-drag-drop-list" }, ngImport: i0, template: "<div\n  class=\"axp-drag-drop-list-container divide-y\"\n  [attr.id]=\"listId()\"\n  [attr.data-orientation]=\"orientation()\"\n  axDropList\n  [dropListGroup]=\"dropListGroup()\"\n  [dropListOrientation]=\"orientation()\"\n  (dropListDropped)=\"onDrop($event)\"\n  [sortingDisabled]=\"disable()\"\n>\n  @if (items().length === 0) {\n    <div class=\"axp-drag-drop-list-empty\">\n      <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n    </div>\n  }\n\n  @for (item of items(); track item.id; let i = $index) {\n    <div\n      class=\"axp-drag-drop-list-item\"\n      [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n      [class]=\"item.cssClass\"\n      axDrag\n      [dragDisabled]=\"item.disabled || false\"\n      (click)=\"onItemClick(item)\"\n    >\n      <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n        <i class=\"fa-solid fa-bars\"></i>\n      </div>\n\n      <div class=\"axp-drag-drop-list-item-content\">\n        {{ item.content }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-container{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);border-radius:.25rem;padding:calc(var(--spacing, .25rem) * 2);background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.axp-drag-drop-list-empty-message{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));font-style:italic;color:var(--ax-text-secondary-color, #9e9e9e)}.axp-drag-drop-list-item{display:flex;cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 2);-webkit-user-select:none;user-select:none;background-color:rgb(var(--ax-sys-color-lightest-surface));transition:all .2s ease}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px #00000026;opacity:.9}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px #0003;opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{--tw-border-style: dashed;border-style:dashed;opacity:30%}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{pointer-events:none;cursor:not-allowed;opacity:50%}.axp-drag-drop-list-item-handle{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{height:100%;width:100%}.axp-drag-drop-list-item-content{min-width:0px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom: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)))}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDragDropListComponent, decorators: [{
             type: Component,
@@ -3052,20 +3051,20 @@ 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 } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-select-box\n        class=\"ax-sm\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-select-box>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (selectedField()?.field && filterNode().type) {\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      } @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-select-box{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-select-box{min-width:140px}.__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}@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: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { 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: i1$5.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.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 } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\">\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\"\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 (selectedField()?.field && filterNode().type) {\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      } @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 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}@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: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$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,
             args: [{ selector: 'axp-condition-builder-condition', standalone: true, imports: [
                         CommonModule,
                         FormsModule,
-                        AXSelectBoxModule,
+                        AXLookupComponent,
                         AXDecoratorModule,
                         AXCheckBoxModule,
                         AXLabelModule,
                         AXPWidgetCoreModule,
                         AXTranslationModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"__condition-row\">\n  <div class=\"__item-content\">\n    <!-- Field Selector -->\n    <div class=\"__field-selector\">\n      <ax-select-box\n        class=\"ax-sm\"\n        [dataSource]=\"availableFields()\"\n        [ngModel]=\"selectedFieldValue()\"\n        (onValueChanged)=\"onFieldChange($event)\"\n        valueField=\"value\"\n        textField=\"text\"\n        [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n        [look]=\"'outline'\">\n      </ax-select-box>\n    </div>\n\n    <!-- Filter Widget (Operator + Value) -->\n    <div class=\"__operator-selector\">\n      @if (selectedField()?.field && filterNode().type) {\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      } @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-select-box{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-select-box{min-width:140px}.__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}@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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"__condition-row\">\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\"\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 (selectedField()?.field && filterNode().type) {\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      } @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 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}@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"] }]
         }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], filterDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDefinitions", required: false }] }], onResolveWidget: [{ type: i0.Input, args: [{ isSignal: true, alias: "onResolveWidget", required: false }] }], showFillByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFillByUser", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }] } });
 
 //#endregion
@@ -3416,7 +3415,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 } }, 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                    (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", "size", "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: i3$4.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], 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"], exportAs: ["axDropList"] }, { kind: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser"], 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 } }, 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                    (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: i3$6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], 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"], 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,
@@ -4515,8 +4514,15 @@ class AXPFileViewerComponent {
         ...(ngDevMode ? [{ debugName: "fallbackContent" }] : /* istanbul ignore next */ []));
         this.fallbackContentInputs = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fallbackContentInputs" }] : /* istanbul ignore next */ []));
+        this.emptyContent = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyContent" }] : /* istanbul ignore next */ []));
+        this.emptyContentInputs = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyContentInputs" }] : /* istanbul ignore next */ []));
+        this.headerActions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----- Outputs -----
+        this.headerActionClick = output();
         this.fullscreenClosed = output();
         //#endregion
         //#region ----- View Queries -----
@@ -4540,6 +4546,10 @@ class AXPFileViewerComponent {
         ...(ngDevMode ? [{ debugName: "boundFallbackContent" }] : /* istanbul ignore next */ []));
         this.boundFallbackContentInputs = computed(() => this.fallbackContentInputs(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "boundFallbackContentInputs" }] : /* istanbul ignore next */ []));
+        this.boundEmptyContent = computed(() => this.emptyContent(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "boundEmptyContent" }] : /* istanbul ignore next */ []));
+        this.boundEmptyContentInputs = computed(() => this.emptyContentInputs(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "boundEmptyContentInputs" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----- Lifecycle -----
         this.objectUrls = new Set();
@@ -4592,15 +4602,15 @@ class AXPFileViewerComponent {
         return resolveFileListItemUrl(file, this.fileStorageService, (url) => this.trackObjectUrl(url));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXPFileViewerComponent, isStandalone: true, selector: "axp-file-viewer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, galleryMode: { classPropertyName: "galleryMode", publicName: "galleryMode", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, headerContent: { classPropertyName: "headerContent", publicName: "headerContent", isSignal: true, isRequired: false, transformFunction: null }, headerContentInputs: { classPropertyName: "headerContentInputs", publicName: "headerContentInputs", isSignal: true, isRequired: false, transformFunction: null }, fallbackContent: { classPropertyName: "fallbackContent", publicName: "fallbackContent", isSignal: true, isRequired: false, transformFunction: null }, fallbackContentInputs: { classPropertyName: "fallbackContentInputs", publicName: "fallbackContentInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullscreenClosed: "fullscreenClosed" }, host: { properties: { "style.height": "height()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "container", first: true, predicate: AXFileViewerContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-file-viewer-container\n  class=\"axp-file-viewer h-full w-full\"\n  [items]=\"resolvedItems()\"\n  [startIndex]=\"startIndex()\"\n  [thumbnail]=\"thumbnail()\"\n  [pagination]=\"pagination()\"\n  [download]=\"download()\"\n  [fullscreen]=\"fullscreen()\"\n  [galleryMode]=\"galleryMode()\"\n  [headerContent]=\"boundHeaderContent()\"\n  [headerContentInputs]=\"boundHeaderContentInputs()\"\n  [fallbackContent]=\"boundFallbackContent()\"\n  [fallbackContentInputs]=\"boundFallbackContentInputs()\"\n  [loading]=\"loading()\"\n  (fullscreenClosed)=\"fullscreenClosed.emit()\"\n/>\n", dependencies: [{ kind: "component", type: AXFileViewerContainerComponent, selector: "ax-file-viewer-container", inputs: ["items", "startIndex", "thumbnail", "pagination", "download", "fullscreen", "galleryMode", "headerContent", "headerContentInputs", "fallbackContent", "fallbackContentInputs", "loading"], outputs: ["fullscreenClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXPFileViewerComponent, isStandalone: true, selector: "axp-file-viewer", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, startIndex: { classPropertyName: "startIndex", publicName: "startIndex", isSignal: true, isRequired: false, transformFunction: null }, thumbnail: { classPropertyName: "thumbnail", publicName: "thumbnail", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, galleryMode: { classPropertyName: "galleryMode", publicName: "galleryMode", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, headerContent: { classPropertyName: "headerContent", publicName: "headerContent", isSignal: true, isRequired: false, transformFunction: null }, headerContentInputs: { classPropertyName: "headerContentInputs", publicName: "headerContentInputs", isSignal: true, isRequired: false, transformFunction: null }, fallbackContent: { classPropertyName: "fallbackContent", publicName: "fallbackContent", isSignal: true, isRequired: false, transformFunction: null }, fallbackContentInputs: { classPropertyName: "fallbackContentInputs", publicName: "fallbackContentInputs", isSignal: true, isRequired: false, transformFunction: null }, emptyContent: { classPropertyName: "emptyContent", publicName: "emptyContent", isSignal: true, isRequired: false, transformFunction: null }, emptyContentInputs: { classPropertyName: "emptyContentInputs", publicName: "emptyContentInputs", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerActionClick: "headerActionClick", fullscreenClosed: "fullscreenClosed" }, host: { properties: { "style.height": "height()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "container", first: true, predicate: AXFileViewerContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-file-viewer-container\n  class=\"axp-file-viewer h-full w-full\"\n  [items]=\"resolvedItems()\"\n  [startIndex]=\"startIndex()\"\n  [thumbnail]=\"thumbnail()\"\n  [pagination]=\"pagination()\"\n  [download]=\"download()\"\n  [fullscreen]=\"fullscreen()\"\n  [galleryMode]=\"galleryMode()\"\n  [headerContent]=\"boundHeaderContent()\"\n  [headerContentInputs]=\"boundHeaderContentInputs()\"\n  [fallbackContent]=\"boundFallbackContent()\"\n  [fallbackContentInputs]=\"boundFallbackContentInputs()\"\n  [emptyContent]=\"boundEmptyContent()\"\n  [emptyContentInputs]=\"boundEmptyContentInputs()\"\n  [headerActions]=\"headerActions()\"\n  [loading]=\"loading()\"\n  (headerActionClick)=\"headerActionClick.emit($event)\"\n  (fullscreenClosed)=\"fullscreenClosed.emit()\"\n/>\n", dependencies: [{ kind: "component", type: AXFileViewerContainerComponent, selector: "ax-file-viewer-container", inputs: ["items", "startIndex", "thumbnail", "pagination", "download", "fullscreen", "headerActions", "galleryMode", "headerContent", "headerContentInputs", "fallbackContent", "fallbackContentInputs", "emptyContent", "emptyContentInputs", "loading"], outputs: ["headerActionClick", "fullscreenClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-file-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'block',
                         '[style.height]': 'height()',
-                    }, imports: [AXFileViewerContainerComponent], template: "<ax-file-viewer-container\n  class=\"axp-file-viewer h-full w-full\"\n  [items]=\"resolvedItems()\"\n  [startIndex]=\"startIndex()\"\n  [thumbnail]=\"thumbnail()\"\n  [pagination]=\"pagination()\"\n  [download]=\"download()\"\n  [fullscreen]=\"fullscreen()\"\n  [galleryMode]=\"galleryMode()\"\n  [headerContent]=\"boundHeaderContent()\"\n  [headerContentInputs]=\"boundHeaderContentInputs()\"\n  [fallbackContent]=\"boundFallbackContent()\"\n  [fallbackContentInputs]=\"boundFallbackContentInputs()\"\n  [loading]=\"loading()\"\n  (fullscreenClosed)=\"fullscreenClosed.emit()\"\n/>\n" }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], startIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIndex", required: false }] }], thumbnail: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnail", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], galleryMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "galleryMode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], headerContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContent", required: false }] }], headerContentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContentInputs", required: false }] }], fallbackContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackContent", required: false }] }], fallbackContentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackContentInputs", required: false }] }], fullscreenClosed: [{ type: i0.Output, args: ["fullscreenClosed"] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXFileViewerContainerComponent), { isSignal: true }] }] } });
+                    }, imports: [AXFileViewerContainerComponent], template: "<ax-file-viewer-container\n  class=\"axp-file-viewer h-full w-full\"\n  [items]=\"resolvedItems()\"\n  [startIndex]=\"startIndex()\"\n  [thumbnail]=\"thumbnail()\"\n  [pagination]=\"pagination()\"\n  [download]=\"download()\"\n  [fullscreen]=\"fullscreen()\"\n  [galleryMode]=\"galleryMode()\"\n  [headerContent]=\"boundHeaderContent()\"\n  [headerContentInputs]=\"boundHeaderContentInputs()\"\n  [fallbackContent]=\"boundFallbackContent()\"\n  [fallbackContentInputs]=\"boundFallbackContentInputs()\"\n  [emptyContent]=\"boundEmptyContent()\"\n  [emptyContentInputs]=\"boundEmptyContentInputs()\"\n  [headerActions]=\"headerActions()\"\n  [loading]=\"loading()\"\n  (headerActionClick)=\"headerActionClick.emit($event)\"\n  (fullscreenClosed)=\"fullscreenClosed.emit()\"\n/>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], startIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "startIndex", required: false }] }], thumbnail: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnail", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], galleryMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "galleryMode", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], headerContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContent", required: false }] }], headerContentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContentInputs", required: false }] }], fallbackContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackContent", required: false }] }], fallbackContentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackContentInputs", required: false }] }], emptyContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyContent", required: false }] }], emptyContentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyContentInputs", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], headerActionClick: [{ type: i0.Output, args: ["headerActionClick"] }], fullscreenClosed: [{ type: i0.Output, args: ["fullscreenClosed"] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXFileViewerContainerComponent), { isSignal: true }] }] } });
 
 //#endregion
 //#region ----- Component -----
@@ -4655,7 +4665,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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,
@@ -5951,7 +5961,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 }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], 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 p-2\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  <ax-button\n    (keydown)=\"handleButtonKeyDown($event)\"\n    (onClick)=\"openFilterPopover()\"\n    #filterButton\n    [look]=\"'blank'\"\n  >\n    <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <div class=\"min-w-0 flex-1\" (click)=\"handleTagBoxClick($event)\">\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    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\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\n      class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n      [class.!bg-primary]=\"item.field === 'all'\"\n      [class.!text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item, $event)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (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\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:min-w-72 w-full rounded-md md:max-h-96 lg:w-[450px] md:overflow-auto\"\n  >\n    <axp-widgets-container\n      #widgetsContainer\n      [context]=\"context()\"\n      (onContextChanged)=\"onContextChanged($event)\"\n    >\n      @if (activeFilter()) {\n        <div\n          class=\"flex flex-col lightest-surface shadow-md\"\n          (keydown.enter)=\"onEnterKeyPressed($event)\"\n        >\n          <ax-header class=\"border-b border-border-light px-4 py-2 font-semibold\">{{\n            $safeNavigationMigration(activeFilter()?.title)! | translate | async\n          }}</ax-header>\n          <ax-content class=\"p-4\">\n            <div class=\"mb-2\">\n              <ax-badge\n                [text]=\"\n                  (getActiveOperator(activeFilter())! | translate | async) || ''\n                \"\n              ></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: resolveFilterContextField(activeFilter()!),\n                options: $safeNavigationMigration(activeFilter()?.widget?.options),\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer\n            class=\"border-t flex justify-end border-border-light w-full px-4 py-2\"\n          >\n            <ax-button\n              class=\"ax-sm\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div\n          axListNavigation\n          #list=\"axListNavigation\"\n          class=\"axp-list-items border-none\"\n        >\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"w-full border-t border-light my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"\n                caseItem.isActive() && !isFilterDisabled(field)\n              \"\n              [class.axp-query-filters__advance-item--disabled]=\"\n                isFilterDisabled(field)\n              \"\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-end gap-2\">\n                <ax-icon class=\"w-5\" [class]=\"'fa-light ' + field.icon\">\n                </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{width:100%;min-width:0px}axp-query-filters>.flex>.min-w-0.flex-1{min-width:0px}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.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}@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: "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", "size", "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: "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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$2.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: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7$1.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7$1.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 }); }
+    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 }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], 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 p-2\"\n  (keydown.control.space)=\"openFilterPopover()\"\n>\n  <ax-button\n    (keydown)=\"handleButtonKeyDown($event)\"\n    (onClick)=\"openFilterPopover()\"\n    #filterButton\n    [look]=\"'blank'\"\n  >\n    <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <div class=\"min-w-0 flex-1\" (click)=\"handleTagBoxClick($event)\">\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    [placeholder]=\"\n      (filtersDefinitions().length === 0\n        ? '@general:terms.interface.filter.no-filter-definitions'\n        : '@general:terms.interface.filter.placeholder'\n      )\n        | translate\n        | async\n    \"\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\n      class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n      [class.!bg-primary]=\"item.field === 'all'\"\n      [class.!text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item, $event)\"\n    >\n      <span>{{ item.query }}</span>\n      @if (!item.readOnly) {\n        <button (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\n  [offsetY]=\"activeFilter() ? -30 : 0\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div\n    class=\"md:min-w-72 w-full rounded-md md:max-h-96 lg:w-[450px] md:overflow-auto\"\n  >\n    <axp-widgets-container\n      #widgetsContainer\n      [context]=\"context()\"\n      (onContextChanged)=\"onContextChanged($event)\"\n    >\n      @if (activeFilter()) {\n        <div\n          class=\"flex flex-col lightest-surface shadow-md\"\n          (keydown.enter)=\"onEnterKeyPressed($event)\"\n        >\n          <ax-header class=\"border-b border-border-light px-4 py-2 font-semibold\">{{\n            $safeNavigationMigration(activeFilter()?.title)! | translate | async\n          }}</ax-header>\n          <ax-content class=\"p-4\">\n            <div class=\"mb-2\">\n              <ax-badge\n                [text]=\"\n                  (getActiveOperator(activeFilter())! | translate | async) || ''\n                \"\n              ></ax-badge>\n            </div>\n            <ng-container\n              #widgetRenderer=\"widgetRenderer\"\n              axp-widget-renderer\n              [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: resolveFilterContextField(activeFilter()!),\n                options: $safeNavigationMigration(activeFilter()?.widget?.options),\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer\n            class=\"border-t flex justify-end border-border-light w-full px-4 py-2\"\n          >\n            <ax-button\n              class=\"ax-sm\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div\n          axListNavigation\n          #list=\"axListNavigation\"\n          class=\"axp-list-items border-none\"\n        >\n          <!-- @if (tagBox.inputValue()) {\n            @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n              <div\n                axListNavigationItem\n                #caseItem=\"axListNavigationItem\"\n                [class.axp-state-focused]=\"caseItem.isActive()\"\n                tabindex=\"0\"\n                (click)=\"handleSelectInlineFilter(inlineFilter)\"\n                (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n              >\n                {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n                  tagBox.inputValue()\n                }}'\n              </div>\n            }\n            <span class=\"w-full border-t border-light my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"\n                caseItem.isActive() && !isFilterDisabled(field)\n              \"\n              [class.axp-query-filters__advance-item--disabled]=\"\n                isFilterDisabled(field)\n              \"\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-end gap-2\">\n                <ax-icon class=\"w-5\" [class]=\"'fa-light ' + field.icon\">\n                </ax-icon>\n                {{ field.title | translate | async }}\n              </div>\n            </div>\n          }\n        </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{width:100%;min-width:0px}axp-query-filters>.flex>.min-w-0.flex-1{min-width:0px}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.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}@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: "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: "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: "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", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.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: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7$1.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7$1.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,
@@ -6041,7 +6051,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: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.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: i1$5.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", "size", "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: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$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,
@@ -6180,7 +6190,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
         </ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, styles: ["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"], 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", "size", "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 }); }
+  `, isInline: true, styles: ["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"], 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: 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,
@@ -6902,7 +6912,7 @@ 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-oE8CeLE8.mjs');
+        const { AXPBindingExpressionEditorPopupComponent } = await import('./acorex-platform-framework-client-layout-components-binding-expression-editor-popup.component-Bp2cNCPO.mjs');
         const result = await this.popupService.open(AXPBindingExpressionEditorPopupComponent, {
             title: '@general:widgets.triggers.edit-binding-expression',
             size: 'lg',
@@ -6918,7 +6928,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 }], ngImport: i0, template: "<ax-form>\n  <axp-widgets-container\n    [context]=\"context()\"\n    (onContextChanged)=\"handleContextChange($event)\"\n  >\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template\n      #propertyRow\n      let-prop=\"prop\"\n      let-translateTitle=\"translateTitle\"\n    >\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\">{{\n                prop.title | translate | async\n              }}</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\n                [toggleable]=\"true\"\n                [selected]=\"isExpressionMode(prop)\"\n                look=\"twotone\"\n                [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\"\n                class=\"shrink-0\"\n                [title]=\"\n                  (isExpressionMode(prop)\n                    ? '@general:terms.common.expression'\n                    : '@general:terms.common.value'\n                  )\n                    | translate\n                    | async\n                \"\n                (selectedChange)=\"setExpressionMode(prop, $event)\"\n              >\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          @if (bindingExpressionEditorMode() === 'inline') {\n            <div class=\"w-full overflow-hidden\" style=\"direction: ltr\">\n              <ax-code-editor\n                [ngModel]=\"getBindingExpressionValue(prop)\"\n                (ngModelChange)=\"setBindingExpressionValue(prop, $event)\"\n                language=\"javascript\"\n                [lineNumbers]=\"true\"\n                class=\"w-full\"\n              >\n              </ax-code-editor>\n            </div>\n          } @else {\n            <ax-button\n              look=\"twotone\"\n              color=\"primary\"\n              size=\"sm\"\n              class=\"w-full\"\n              [text]=\"\n                '@general:widgets.triggers.open-editor' | translate | async\n              \"\n              (onClick)=\"openBindingEditor(prop)\"\n              [title]=\"\n                '@general:widgets.triggers.edit-binding-expression'\n                  | translate\n                  | async\n              \"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n        } @else if (prop.schema.interface) {\n          <ng-container\n            axp-widget-renderer\n            [node]=\"prop.schema.interface\"\n            [mode]=\"'edit'\"\n          >\n          </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\n              look=\"default\"\n              (onActiveTabChanged)=\"handleTabChange($event)\"\n              [look]=\"'with-line'\"\n            >\n              @for (tab of tabs(); track $index) {\n                <ax-tab-item\n                  [text]=\"(tab.title | translate | async) ?? ''\"\n                  [key]=\"$index.toString()\"\n                  [active]=\"currentTabIndex() === $index\"\n                >\n                </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\n                class=\"mb-0!\"\n                [caption]=\"(group.title | translate | async) ?? ''\"\n                [isCollapsed]=\"group.isCollapsed\"\n                (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n              >\n                <div class=\"flex flex-col\">\n                  @for (p of group.props; track $index) {\n                    @if (isPropertyVisible(p)) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          propertyRow;\n                          context: { prop: p, translateTitle: true }\n                        \"\n                      >\n                      </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\n                *ngTemplateOutlet=\"\n                  propertyRow;\n                  context: { prop: p, translateTitle: true }\n                \"\n              >\n              </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-accordion-header{border-top-style:var(--tw-border-style);border-top-width:1px;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.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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i4$2.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { 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: 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: AXTabsModule }, { kind: "component", type: i8.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i8.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.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 }], ngImport: i0, template: "<ax-form>\n  <axp-widgets-container\n    [context]=\"context()\"\n    (onContextChanged)=\"handleContextChange($event)\"\n  >\n    <!-- #region Shared property row template (used in both advanced and simple modes) -->\n    <ng-template\n      #propertyRow\n      let-prop=\"prop\"\n      let-translateTitle=\"translateTitle\"\n    >\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\">{{\n                prop.title | translate | async\n              }}</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\n                [toggleable]=\"true\"\n                [selected]=\"isExpressionMode(prop)\"\n                look=\"twotone\"\n                [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\"\n                class=\"shrink-0\"\n                [title]=\"\n                  (isExpressionMode(prop)\n                    ? '@general:terms.common.expression'\n                    : '@general:terms.common.value'\n                  )\n                    | translate\n                    | async\n                \"\n                (selectedChange)=\"setExpressionMode(prop, $event)\"\n              >\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          @if (bindingExpressionEditorMode() === 'inline') {\n            <div class=\"w-full overflow-hidden\" style=\"direction: ltr\">\n              <ax-code-editor\n                [ngModel]=\"getBindingExpressionValue(prop)\"\n                (ngModelChange)=\"setBindingExpressionValue(prop, $event)\"\n                language=\"javascript\"\n                [lineNumbers]=\"true\"\n                class=\"w-full\"\n              >\n              </ax-code-editor>\n            </div>\n          } @else {\n            <ax-button\n              look=\"twotone\"\n              color=\"primary\"\n              size=\"sm\"\n              class=\"w-full\"\n              [text]=\"\n                '@general:widgets.triggers.open-editor' | translate | async\n              \"\n              (onClick)=\"openBindingEditor(prop)\"\n              [title]=\"\n                '@general:widgets.triggers.edit-binding-expression'\n                  | translate\n                  | async\n              \"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n        } @else if (prop.schema.interface) {\n          <ng-container\n            axp-widget-renderer\n            [node]=\"prop.schema.interface\"\n            [mode]=\"'edit'\"\n          >\n          </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\n              look=\"default\"\n              (onActiveTabChanged)=\"handleTabChange($event)\"\n              [look]=\"'with-line'\"\n            >\n              @for (tab of tabs(); track $index) {\n                <ax-tab-item\n                  [text]=\"(tab.title | translate | async) ?? ''\"\n                  [key]=\"$index.toString()\"\n                  [active]=\"currentTabIndex() === $index\"\n                >\n                </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\n                class=\"mb-0!\"\n                [caption]=\"(group.title | translate | async) ?? ''\"\n                [isCollapsed]=\"group.isCollapsed\"\n                (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n              >\n                <div class=\"flex flex-col\">\n                  @for (p of group.props; track $index) {\n                    @if (isPropertyVisible(p)) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          propertyRow;\n                          context: { prop: p, translateTitle: true }\n                        \"\n                      >\n                      </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\n                *ngTemplateOutlet=\"\n                  propertyRow;\n                  context: { prop: p, translateTitle: true }\n                \"\n              >\n              </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-accordion-header{border-top-style:var(--tw-border-style);border-top-width:1px;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.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: AXCodeEditorModule }, { kind: "component", type: i4$2.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { 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: 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: AXTabsModule }, { kind: "component", type: i8.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i8.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$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,
@@ -7061,7 +7071,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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,
@@ -7354,16 +7364,16 @@ class AXPItemConfiguratorComponent {
         ...(ngDevMode ? [{ debugName: "isConfigured" }] : /* istanbul ignore next */ []));
         this.visibleHeaderActions = computed(() => (this.headerActions() ?? []).filter((a) => a != null && a.visible !== false && !a.items?.length), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visibleHeaderActions" }] : /* istanbul ignore next */ []));
-        this.itemSelectBox = viewChild('itemSelectBox', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "itemSelectBox" }] : /* istanbul ignore next */ []));
+        this.itemLookup = viewChild(AXLookupComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemLookup" }] : /* istanbul ignore next */ []));
         effect(() => {
             if (!this.isEditMode()) {
                 return;
             }
             const scheduleFocus = () => {
                 setTimeout(() => {
-                    this.itemSelectBox()?.focus();
-                    this.itemSelectBox()?.open();
+                    this.itemLookup()?.focus();
+                    this.itemLookup()?.open();
                 }, 0);
             };
             scheduleFocus();
@@ -7461,7 +7471,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: "itemSelectBox", first: true, predicate: ["itemSelectBox"], 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-select-box\n        #itemSelectBox\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        [itemTemplate]=\"itemTemplate\"\n        [itemHeight]=\"72\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-search-box></ax-search-box>\n        <ax-clear-button></ax-clear-button>\n      </ax-select-box>\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-context>\n    @let item = context.data;\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?.data?.icon) {\n        <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ $safeNavigationMigration(item?.data?.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-select-box{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", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { 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: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.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: "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,
@@ -7470,12 +7480,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         FormsModule,
                         AXFormModule,
                         AXButtonModule,
-                        AXSelectBoxModule,
+                        AXLookupComponent,
                         AXDecoratorModule,
                         AXTranslationModule,
-                        AXSearchBoxModule,
-                    ], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n    <div class=\"__item-selector\">\n      <ax-select-box\n        #itemSelectBox\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        [itemTemplate]=\"itemTemplate\"\n        [itemHeight]=\"72\"\n        [selectedTemplate]=\"selectedTemplate\"\n        (onClosed)=\"exitEditMode()\"\n      >\n        <ax-search-box></ax-search-box>\n        <ax-clear-button></ax-clear-button>\n      </ax-select-box>\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-context>\n    @let item = context.data;\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?.data?.icon) {\n        <i [class]=\"item.data.icon\"></i>\n      }\n      <span>\n        {{ $safeNavigationMigration(item?.data?.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-select-box{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"] }]
-        }], ctorParameters: () => [], propDecorators: { selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }, { type: i0.Output, args: ["selectedItemIdChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], itemSelectBox: [{ type: i0.ViewChild, args: ['itemSelectBox', { isSignal: true }] }] } });
+                    ], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }, { type: i0.Output, args: ["selectedItemIdChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], itemLookup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupComponent), { isSignal: true }] }] } });
 //#region ----   Helpers   ----
 function isPropertyDefinitionArray(value) {
     if (!Array.isArray(value) || value.length === 0) {
@@ -7531,7 +7540,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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,
@@ -7614,7 +7623,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.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.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,
@@ -8416,7 +8425,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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$1.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", "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 }); }
+    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,
@@ -8769,7 +8778,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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"], 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,
@@ -9078,7 +9087,7 @@ class AXPResourceAppointmentComponent {
         this.resourceAppointmentService.executeCommand(event.item.data?.command, providerName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPResourceAppointmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPResourceAppointmentComponent, isStandalone: true, selector: "axp-resource-appointment", inputs: { showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, providerName: { classPropertyName: "providerName", publicName: "providerName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXPResourceAppointmentService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-resource-appointment__container flex flex-col min-h-0 h-full\">\n  @if (isReady()) {\n    <!-- TODO: Add weekly view 'timeline-weekly' -->\n    <ax-scheduler\n      #scheduler\n      [views]=\"['timeline-day', 'timeline-month']\"\n      [dataSource]=\"schedulerAppointments()\"\n      [resources]=\"schedulerResources()\"\n      [startingDate]=\"currentDate()\"\n      [selectedView]=\"currentView()\"\n      [draggable]=\"false\"\n      (onRangeChanged)=\"handleRangeChanged($event)\"\n      class=\"axp-resource-appointment__scheduler bg-lightest dark:bg-darkest flex-1\"\n    ></ax-scheduler>\n\n    <ax-context-menu\n      #contextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    ></ax-context-menu>\n  } @else {\n    <div class=\"axp-resource-appointment__loading flex items-center justify-center w-full h-full\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host .axp-resource-appointment__scheduler{--ax-comp-scheduler-width: 100%;height:100%;width:100%;min-height:400px}:host .axp-resource-appointment__loading{min-height:300px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$8.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPResourceAppointmentComponent, isStandalone: true, selector: "axp-resource-appointment", inputs: { showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, providerName: { classPropertyName: "providerName", publicName: "providerName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXPResourceAppointmentService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-resource-appointment__container flex flex-col min-h-0 h-full\">\n  @if (isReady()) {\n    <!-- TODO: Add weekly view 'timeline-weekly' -->\n    <ax-scheduler\n      #scheduler\n      [views]=\"['timeline-day', 'timeline-month']\"\n      [dataSource]=\"schedulerAppointments()\"\n      [resources]=\"schedulerResources()\"\n      [startingDate]=\"currentDate()\"\n      [selectedView]=\"currentView()\"\n      [draggable]=\"false\"\n      (onRangeChanged)=\"handleRangeChanged($event)\"\n      class=\"axp-resource-appointment__scheduler bg-lightest dark:bg-darkest flex-1\"\n    ></ax-scheduler>\n\n    <ax-context-menu\n      #contextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    ></ax-context-menu>\n  } @else {\n    <div class=\"axp-resource-appointment__loading flex items-center justify-center w-full h-full\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host .axp-resource-appointment__scheduler{--ax-comp-scheduler-width: 100%;height:100%;width:100%;min-height:400px}:host .axp-resource-appointment__loading{min-height:300px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$7.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPResourceAppointmentComponent, decorators: [{
             type: Component,
@@ -9443,7 +9452,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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,
@@ -9522,7 +9531,7 @@ class AXPQuerySortsComponent {
         this.emitActiveSortQueries();
     }
     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 }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"flex flex-col justify-center gap-4 select-none\">\n  <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 max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\"\n    >\n      @for (item of sortQueries(); 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\n              class=\"fa-solid fa-grip-dots-vertical cursor-move\"\n            ></ax-icon>\n            <p class=\"font-medium text-sm\">\n              {{ item.title | translate | async }}\n            </p>\n          </div>\n          <ax-button\n            [color]=\"'blank'\"\n            class=\"ax-sm\"\n            (click)=\"changeItemSort(item)\"\n          >\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  </div>\n</div>\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: AXTabsModule }, { 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", "size", "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 }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"flex flex-col justify-center gap-4 select-none\">\n  <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 max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\"\n    >\n      @for (item of sortQueries(); 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\n              class=\"fa-solid fa-grip-dots-vertical cursor-move\"\n            ></ax-icon>\n            <p class=\"font-medium text-sm\">\n              {{ item.title | translate | async }}\n            </p>\n          </div>\n          <ax-button\n            [color]=\"'blank'\"\n            class=\"ax-sm\"\n            (click)=\"changeItemSort(item)\"\n          >\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  </div>\n</div>\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: AXTabsModule }, { 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,
@@ -10159,7 +10168,7 @@ 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 } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", spreadsheetChange: "spreadsheetChange" }, host: { classAttribute: "axp-spreadsheet" }, 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    </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 class=\"__table\">\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th class=\"__corner-cell\">\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\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"'Add Row'\"\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 columns(); track column.name) {\n              <th class=\"__column-header\" [style.width]=\"column.width\">\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\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]=\"columns().length + 1\">\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 class=\"__table\">\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th class=\"__corner-cell\">\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\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"'Add Row'\"\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 columns(); track column.name) {\n              <th class=\"__column-header\" [style.width]=\"column.width\">\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\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 class=\"__row-header\">\n                  <div class=\"__header-content\">\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 (allowRemoveRows() && !readonly()) {\n                    <div\n                      class=\"__header-actions ax-sm opacity-30 hover:opacity-100\"\n                    >\n                      <ax-button\n                        look=\"blank\"\n                        color=\"danger\"\n                        (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\"\n                        [attr.aria-label]=\"'Remove Row'\"\n                      >\n                        <ax-icon icon=\"far fa-times\"></ax-icon>\n                      </ax-button>\n                    </div>\n                  }\n                </td>\n\n                <!-- Spreadsheet cells -->\n                @for (column of columns(); 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\"\n                        (blur)=\"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                      <!-- Floating toolbar for commit/cancel -->\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]=\"'Commit'\"\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]=\"'Cancel'\"\n                        >\n                          <ax-icon icon=\"far fa-times\"></ax-icon>\n                        </ax-button>\n                      </div>\n                    } @else {\n                      <!-- View mode: Show widget in view mode or placeholder -->\n                      <div class=\"__cell-value\">\n                        @if (\n                          getCellValue(rowIndex, column.name) !== null &&\n                          getCellValue(rowIndex, column.name) !== undefined\n                        ) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        } @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.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;-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 .__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-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);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: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-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);text-align:center;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;z-index:2}.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)}@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-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);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);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)}@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{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);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--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:1px}@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{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.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;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;padding: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)));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{display:flex;width:100%;align-items:center;justify-content:center}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.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)))}}@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;}@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;--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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.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 } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", spreadsheetChange: "spreadsheetChange" }, host: { classAttribute: "axp-spreadsheet" }, 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    </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 class=\"__table\">\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th class=\"__corner-cell\">\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\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"'Add Row'\"\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 columns(); track column.name) {\n              <th class=\"__column-header\" [style.width]=\"column.width\">\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\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]=\"columns().length + 1\">\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 class=\"__table\">\n        <!-- Header Row -->\n        <thead class=\"__thead\">\n          <tr class=\"__header-row\">\n            <!-- Corner cell (title) -->\n            <th class=\"__corner-cell\">\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\">\n                  <ax-button\n                    look=\"blank\"\n                    color=\"primary\"\n                    (onClick)=\"handleAddRow()\"\n                    [attr.aria-label]=\"'Add Row'\"\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 columns(); track column.name) {\n              <th class=\"__column-header\" [style.width]=\"column.width\">\n                <div class=\"__header-content\">\n                  <div class=\"__header-title\">\n                    {{ column.title | translate | async }}\n                  </div>\n                </div>\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 class=\"__row-header\">\n                  <div class=\"__header-content\">\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 (allowRemoveRows() && !readonly()) {\n                    <div\n                      class=\"__header-actions ax-sm opacity-30 hover:opacity-100\"\n                    >\n                      <ax-button\n                        look=\"blank\"\n                        color=\"danger\"\n                        (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\"\n                        [attr.aria-label]=\"'Remove Row'\"\n                      >\n                        <ax-icon icon=\"far fa-times\"></ax-icon>\n                      </ax-button>\n                    </div>\n                  }\n                </td>\n\n                <!-- Spreadsheet cells -->\n                @for (column of columns(); 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\"\n                        (blur)=\"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                      <!-- Floating toolbar for commit/cancel -->\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]=\"'Commit'\"\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]=\"'Cancel'\"\n                        >\n                          <ax-icon icon=\"far fa-times\"></ax-icon>\n                        </ax-button>\n                      </div>\n                    } @else {\n                      <!-- View mode: Show widget in view mode or placeholder -->\n                      <div class=\"__cell-value\">\n                        @if (\n                          getCellValue(rowIndex, column.name) !== null &&\n                          getCellValue(rowIndex, column.name) !== undefined\n                        ) {\n                          <ng-container\n                            axp-widget-renderer\n                            [node]=\"getCellWidgetNode(column, rowIndex)\"\n                            [mode]=\"'view'\"\n                          ></ng-container>\n                        } @else {\n                          <span class=\"__cell-placeholder\">{{\n                            emptyCellPlaceholder()\n                          }}</span>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </axp-widgets-container>\n        </tbody>\n      </table>\n    </div>\n  }\n</div>\n<!--\n  #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.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;-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 .__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-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);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: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-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);text-align:center;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;z-index:2}.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)}@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-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);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);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)}@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{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);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--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:1px}@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{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.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;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;padding: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)));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{display:flex;width:100%;align-items:center;justify-content:center}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.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)))}}@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;}@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;--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}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$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,
@@ -10645,7 +10654,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], 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,
@@ -10901,7 +10910,7 @@ class AXPTableColumnsEditorPopupComponent extends AXBasePageComponent {
         ></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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,
@@ -11110,7 +11119,7 @@ class AXPTableDataEditorPopupComponent extends AXBasePageComponent {
         ></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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,
@@ -11277,7 +11286,7 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
         </ax-suffix>
       </ax-footer>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.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", "size", "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: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$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,
@@ -12159,7 +12168,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$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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$1.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.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.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,
@@ -12665,11 +12674,11 @@ 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" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"font-semibold\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [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: i8.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i8.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" }, 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 (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\"></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: i8.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "reorderable", "reorderDelay", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged", "onTabsReordered"] }, { kind: "component", type: i8.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,
-            args: [{ selector: 'axp-query-views', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTabsModule, AXTranslationModule, CommonModule], template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"font-semibold\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [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" }]
+            args: [{ selector: 'axp-query-views', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTabsModule, AXTranslationModule, CommonModule], template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"font-semibold w-full\">\n  @for (item of views(); track item.name) {\n    <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\"></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" }]
         }], propDecorators: { tabs: [{ type: i0.ViewChild, args: ['tabs', { isSignal: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }, { type: i0.Output, args: ["viewsChange"] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: true }] }, { type: i0.Output, args: ["selectedViewChange"] }] } });
 
 //#region ----   Component   ----
@@ -13052,7 +13061,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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "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"], 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"], 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,
@@ -13337,5 +13346,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPFileChooserCompressImagesHook, AXPFileChooserDirective, AXPFileChooserHookKeys, AXPFileChooserService, AXPFileChooserZipFilesHook, AXPFileUploaderDirective, AXPFileUploaderHookKeys, AXPFileUploaderService, AXPFileViewerComponent, AXPFileViewerFallbackContentComponent, AXPFileViewerService, AXPImageEditorPopupComponent, AXPImageEditorService, AXPInfiniteScrollDirective, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSignatureEditorService, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPTextCommandColumnComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPUserCardComponent, AXPUserCardDirective, AXPUserCardService, AXPVirtualKeypadComponent, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_FILE_CHOOSER_DEFAULT_ZIP_ARCHIVE_NAME, AXP_FILE_CHOOSER_HOOK_PROVIDERS, AXP_FILE_CHOOSER_OPTION_KEYS, AXP_FILE_CHOOSER_PROVIDERS, AXP_FILE_UPLOADER_PROVIDERS, AXP_INFINITE_SCROLL_DEFAULT_ROOT_MARGIN, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_PAGE_LAYOUT_ELEMENT_ID, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_SYSTEM_FILE_CHOOSER_PROVIDER, AXP_SYSTEM_FILE_UPLOADER_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, USER_CARD_HOVER_OPEN_DELAY_MS, USER_CARD_ITEMS_HOOK, USER_CARD_ITEMS_SKELETON_DELAY_MS, buildFileChooserOptions, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, compressImageFile, createZipArchive, fileListItemToFileViewerItem, fileMatchesAccept, filterFileProvidersByContext, filterFilesByAcceptAndMaxSize, formatAcceptForDisplay, formatMaxFileSizeForDisplay, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, isUnrestrictedFileAccept, mapFileListToViewerItems, mergeInfiniteScrollPage, normalizeFileViewerBoundValue, notifyFileAcceptRejections, observeInfiniteScroll, preparePropertyForViewer, preparePropertyViewerTabs, provideFileChooserHooks, registerFieldDefinitions, resolveExcludedFileProviderKeys, resolveFileChooserAccept, resolveFileChooserExtension, resolveFileListItemUrl, resolveFileUploaderEmptyStateDescription, resolveInfiniteScrollRoot, sortUserCardActions, sortUserCardRows, validateFileChooserItems, visibleUserCardActions, withValidationsOnEditorNode };
+export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorChooserComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPFileChooserCompressImagesHook, AXPFileChooserDirective, AXPFileChooserHookKeys, AXPFileChooserService, AXPFileChooserZipFilesHook, AXPFileUploaderDirective, AXPFileUploaderHookKeys, AXPFileUploaderService, AXPFileViewerComponent, AXPFileViewerFallbackContentComponent, AXPFileViewerService, AXPImageEditorPopupComponent, AXPImageEditorService, AXPInfiniteScrollDirective, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSignatureEditorService, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPTextCommandColumnComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPUserCardComponent, AXPUserCardDirective, AXPUserCardService, AXPVirtualKeypadComponent, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_FILE_CHOOSER_DEFAULT_ZIP_ARCHIVE_NAME, AXP_FILE_CHOOSER_HOOK_PROVIDERS, AXP_FILE_CHOOSER_OPTION_KEYS, AXP_FILE_CHOOSER_PROVIDERS, AXP_FILE_UPLOADER_PROVIDERS, AXP_INFINITE_SCROLL_DEFAULT_ROOT_MARGIN, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_PAGE_LAYOUT_ELEMENT_ID, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_SYSTEM_FILE_CHOOSER_PROVIDER, AXP_SYSTEM_FILE_UPLOADER_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, USER_CARD_HOVER_OPEN_DELAY_MS, USER_CARD_ITEMS_HOOK, USER_CARD_ITEMS_SKELETON_DELAY_MS, buildFileChooserOptions, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, compressImageFile, createAttachedFileProviderMenu, createZipArchive, fileListItemToFileViewerItem, fileMatchesAccept, filterFileProvidersByContext, filterFilesByAcceptAndMaxSize, formatAcceptForDisplay, formatMaxFileSizeForDisplay, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, isUnrestrictedFileAccept, mapFileListToViewerItems, mergeInfiniteScrollPage, normalizeFileViewerBoundValue, notifyFileAcceptRejections, observeInfiniteScroll, preparePropertyForViewer, preparePropertyViewerTabs, provideFileChooserHooks, registerFieldDefinitions, resolveExcludedFileProviderKeys, resolveFileChooserAccept, resolveFileChooserExtension, resolveFileListItemUrl, resolveFileUploaderEmptyStateDescription, resolveInfiniteScrollRoot, sortUserCardActions, sortUserCardRows, validateFileChooserItems, visibleUserCardActions, withValidationsOnEditorNode };
 //# sourceMappingURL=acorex-platform-framework-client-layout-components.mjs.map