@acorex/platform 21.0.0-next.70 → 21.0.0-next.72

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

@@ -10,13 +10,13 @@ import * as i2 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import * as i4 from '@acorex/core/format';
 import { AXFormatModule, AXFormatService } from '@acorex/core/format';
-import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, compareMultiLanguageStrings, AXPIconLogoConfig, AXPComponentLogoConfig, AXPImageUrlLogoConfig, containsHtmlMarkup, AXPDataGenerator, extractTextFromHtml } from '@acorex/platform/core';
+import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPKeyboardShortcutPriority, compareMultiLanguageStrings, AXPDeviceService, AXPImageUrlLogoConfig, AXPComponentLogoConfig, AXPIconLogoConfig, containsHtmlMarkup, isFormValueEqual, AXPDataGenerator, extractTextFromHtml } from '@acorex/platform/core';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXPLayoutRendererComponent, AXPLayoutBuilderService, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex/platform/layout/builder';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, HostListener, ViewChildren, EventEmitter, Output, TemplateRef, contentChildren, ChangeDetectorRef, Input } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, ViewChildren, EventEmitter, Output, TemplateRef, contentChildren, Input } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import * as i1$1 from '@acorex/components/avatar';
@@ -61,6 +61,7 @@ import * as i2$5 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i7 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$1 from '@acorex/components/tag-box';
 import { AXTagBoxModule } from '@acorex/components/tag-box';
@@ -80,7 +81,6 @@ import { AXCodeEditorModule } from '@acorex/components/code-editor';
 import * as i8 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXToastService } from '@acorex/components/toast';
-import { AXPlatform } from '@acorex/core/platform';
 import { AXDialogService } from '@acorex/components/dialog';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
 import * as i2$8 from '@acorex/components/loading';
@@ -2114,7 +2114,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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=\"ax-w-full ax-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=\"ax-flex-1 ax-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().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=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content{display:flex;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);padding:1rem;background:var(--surface-color);flex-shrink:0;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area ax-data-table{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;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"], 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", "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", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { 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: "21.2.9", 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=\"ax-w-full ax-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=\"ax-flex-1 ax-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().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=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n      } -->\n    </ax-button>\n  </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content{display:flex;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);padding:1rem;background:var(--surface-color);flex-shrink:0;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area ax-data-table{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;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"], 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", "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", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { 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: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
             type: Component,
@@ -2863,6 +2863,10 @@ class AXPQueryFiltersComponent {
         this.filterOperatorMiddleware = inject(AXPFilterOperatorMiddlewareService);
         this.settingsService = inject(AXPSettingsService);
         this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
+        this.shortcutRegistry = inject(AXPKeyboardShortcutRegistry);
+        this.destroyRef = inject(DestroyRef);
+        this.elementRef = inject((ElementRef));
+        this.filterFocusShortcutKeys = chordToKbdItemKeys('ctrl+f');
         this.filtersDefinitions = input([], ...(ngDevMode ? [{ debugName: "filtersDefinitions" }] : /* istanbul ignore next */ []));
         this.initialFilters = input([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : /* istanbul ignore next */ []));
         this.onFiltersChanged = output();
@@ -3050,9 +3054,12 @@ class AXPQueryFiltersComponent {
             Promise.all(filters.map(async (filter) => {
                 const val = context[filter.field]?.value;
                 const displayText = context[filter.field]?.displayText;
-                const displayValue = displayText ? displayText : await this.getDisplayValue(filter, val);
+                const rawDisplay = displayText != null && displayText !== '' ? displayText : await this.getDisplayValue(filter, val);
+                const displayValue = this.formatFilterDisplayValue(rawDisplay);
                 return {
                     ...filter,
+                    readOnly: filter.readOnly === true ||
+                        filter.widget?.options?.['readonly'] === true,
                     query: `${this.translate.translateSync(filter.title)} ${this.translate.translateSync(this.getActiveOperator(filter)) || ''} '${displayValue}'`,
                 };
             })).then((results) => {
@@ -3166,11 +3173,30 @@ class AXPQueryFiltersComponent {
                 }
             }
         }, ...(ngDevMode ? [{ debugName: "#focusEffect" }] : /* istanbul ignore next */ []));
+        this.shortcutRegistry.register({
+            owner: this.destroyRef,
+            elementRef: this.elementRef,
+            id: 'query-filters',
+            priority: AXPKeyboardShortcutPriority.Page,
+            group: '@general:keyboard-shortcuts.groups.filters',
+            when: () => this.filtersDefinitions().length > 0,
+            shortcuts: [
+                {
+                    keys: ['ctrl+f'],
+                    title: '@general:keyboard-shortcuts.actions.focus-filters',
+                    allowInEditableFields: true,
+                    handler: () => {
+                        this.tagBox()?.focus();
+                    },
+                },
+            ],
+        });
     }
     convertQueriesToDefinitions(queries) {
         const definitions = this.filtersDefinitions();
         return queries.map((q) => {
             const definition = definitions.find((p) => p.field === q.field);
+            const readOnly = q.readOnly === true;
             return {
                 field: q.field,
                 operator: q.operator,
@@ -3179,6 +3205,7 @@ class AXPQueryFiltersComponent {
                 widget: definition?.widget,
                 filterType: definition?.filterType,
                 hidden: q.hidden,
+                ...(readOnly ? { readOnly: true } : {}),
             };
         });
     }
@@ -3383,6 +3410,25 @@ class AXPQueryFiltersComponent {
         }
         return Boolean(this.disabledByField()[field]);
     }
+    /**
+     * Resolves filter chip labels; translates i18n keys stored in select `displayText` or datasource titles.
+     */
+    formatFilterDisplayValue(value) {
+        if (value == null || value === '') {
+            return '';
+        }
+        const parts = Array.isArray(value) ? value : [value];
+        return parts
+            .map((part) => {
+            const text = String(part ?? '').trim();
+            if (!text) {
+                return '';
+            }
+            return text.startsWith('@') ? this.translate.translateSync(text) || text : text;
+        })
+            .filter(Boolean)
+            .join(', ');
+    }
     createExpressionScope(filtersContext) {
         const base = (filtersContext ?? {});
         return {
@@ -3489,19 +3535,8 @@ class AXPQueryFiltersComponent {
      * This reactive approach eliminates the need for setTimeout
      */
     #focusEffect;
-    async handleKeyboardEvent(event) {
-        if (event.ctrlKey) {
-            switch (event.code) {
-                case 'KeyF':
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.tagBox()?.focus();
-                    break;
-            }
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 } }, outputs: { onFiltersChanged: "onFiltersChanged" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], 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 class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\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=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\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  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></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: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\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=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </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: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.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}\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: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "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$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.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.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: "21.2.9", 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 } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], 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 class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [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    \" #tagBox>\n    <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n      <ax-kbd class=\"look-text\">\n        <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n      </ax-kbd>\n    </ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\">\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  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n          }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n          </div>\n          <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\" [mode]=\"'edit'\">\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n            (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      } @else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\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=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n        @for (field of filterFields(); track field.field) {\n        <div axListNavigationItem #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n          [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n          [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n          [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\" (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\">\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-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:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.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}\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$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "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$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.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.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: "21.2.9", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
             type: Component,
@@ -3510,6 +3545,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         FormsModule,
                         AXButtonModule,
                         AXDecoratorModule,
+                        AXKBDComponent,
+                        AXKBDItemComponent,
                         AXTranslationModule,
                         AXPopoverModule,
                         AXSelectionListModule,
@@ -3517,14 +3554,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPWidgetCoreModule,
                         AXListNavigationModule,
                         AXBadgeModule,
-                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\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=\"ax-hidden md:ax-block\"><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\"\n      [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\"\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  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n        <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n          <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n            activeFilter()?.title! | translate | async\n          }}</ax-header>\n          <ax-content class=\"ax-p-4\">\n            <div class=\"ax-mb-2\">\n              <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></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: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\"\n              [mode]=\"'edit'\"\n            >\n            </ng-container>\n          </ax-content>\n          <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n            <ax-button\n              class=\"ax-xs\"\n              [text]=\"'@general:actions.apply.title' | translate | async\"\n              (onClick)=\"handleApplyFilter()\"\n            ></ax-button>\n          </ax-footer>\n        </div>\n      } @else {\n        <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\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=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n          @for (field of filterFields(); track field.field) {\n            <div\n              axListNavigationItem\n              #caseItem=\"axListNavigationItem\"\n              [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n              [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n              [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n              [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n              (click)=\"handleSelectField(field)\"\n              (keydown)=\"handleFieldKeyDown($event, field)\"\n            >\n              <div class=\"ax-flex ax-items-end ax-gap-2\">\n                <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </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: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.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}\n"] }]
-        }], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n  <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n    <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n  </ax-button>\n  <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n    [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n    [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [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    \" #tagBox>\n    <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n      <ax-kbd class=\"look-text\">\n        <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n      </ax-kbd>\n    </ax-suffix>\n  </ax-tag-box>\n\n  <ng-template #tagTemplate let-item let-index=\"index\">\n    <div\n      class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n      [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n      (click)=\"handleTagClick(item)\">\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  [target]=\"tagBoxInput\"\n  [openOn]=\"'toggle'\"\n  (onOpened)=\"onPopoverOpened($event)\"\n  [closeOn]=\"'clickOut'\"\n  (onClosed)=\"handlePopoverClosed($event)\"\n  [adaptivityEnabled]=\"true\"\n  #popover\n>\n  <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n    <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n      @if (activeFilter()) {\n      <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n        <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n          activeFilter()?.title! | translate | async\n          }}</ax-header>\n        <ax-content class=\"ax-p-4\">\n          <div class=\"ax-mb-2\">\n            <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n          </div>\n          <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n                type: activeFilter()?.widget?.type || 'text-editor',\n                path: activeFilter()?.field,\n                options: activeFilter()?.widget?.options,\n              }\" [mode]=\"'edit'\">\n          </ng-container>\n        </ax-content>\n        <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n          <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n            (onClick)=\"handleApplyFilter()\"></ax-button>\n        </ax-footer>\n      </div>\n      } @else {\n      <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\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=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n          } -->\n        @for (field of filterFields(); track field.field) {\n        <div axListNavigationItem #caseItem=\"axListNavigationItem\"\n          [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n          [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n          [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n          [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\" (click)=\"handleSelectField(field)\"\n          (keydown)=\"handleFieldKeyDown($event, field)\">\n          <div class=\"ax-flex ax-items-end ax-gap-2\">\n            <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n            {{ field.title | translate | async }}\n          </div>\n        </div>\n        }\n      </div>\n      }\n    </axp-widgets-container>\n  </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-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:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
                 type: ViewChildren,
                 args: ['caseItem']
-            }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], handleKeyboardEvent: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
+            }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
 //#endregion
 class AXPPreloadFiltersComponent {
@@ -4738,7 +4772,7 @@ class AXPItemConfiguratorComponent {
         return action.disabled === true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\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 class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\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 [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\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 class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-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        {{ item?.data?.text | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["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:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}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 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight: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:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}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:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\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$5.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: "21.2.9", 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 #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [itemHeight]=\"72\" [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\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 class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\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 [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\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 class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-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        {{ item?.data?.text | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["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:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}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 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight: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:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}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:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\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$5.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPItemConfiguratorComponent, decorators: [{
             type: Component,
@@ -4751,7 +4785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         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 #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\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 class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\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 [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\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 class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-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        {{ item?.data?.text | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["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:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}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 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight: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:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}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:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"] }]
+                    ], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n  @if (isEditMode()) {\n  <div class=\"__item-selector\">\n    <ax-select-box #itemSelectBox [ngModel]=\"selectedItemId()\" [dataSource]=\"availableItems()\"\n      [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n      (onValueChanged)=\"onSelectionChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n      [itemHeight]=\"72\" [selectedTemplate]=\"selectedTemplate\" (onClosed)=\"exitEditMode()\">\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 class=\"__item-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\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 [disabled]=\"!canConfigure() || readonly()\"\n          [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n          [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openConfigureDialog()\">\n          <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n        </ax-button>\n        }\n        @for (action of visibleHeaderActions(); track action.name ?? $index) {\n        <ax-button look=\"blank\" size=\"sm\" [color]=\"action.color ?? 'default'\"\n          [disabled]=\"readonly() || isHeaderActionDisabled(action)\" [title]=\"(action.title | translate | async) ?? ''\"\n          [class.ax-icon-only]=\"action.iconOnly === true\" (onClick)=\"onHeaderActionClick(action)\">\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 class=\"__item-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n    <i class=\"fa-solid fa-puzzle-piece\"></i>\n    <span>\n      {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select an item type' }}\n    </span>\n  </div>\n  }\n  }\n\n  <ng-template #itemTemplate let-context>\n    @let item = context.data;\n    <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n      @if (item.icon) {\n      <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n      }\n      <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-min-w-0\">\n        <div class=\"ax-text-sm ax-font-medium\">\n          {{ item.text | translate | async }}\n        </div>\n        @if (item.description) {\n        <div class=\"ax-text-xs ax-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        {{ item?.data?.text | translate | async }}\n      </span>\n    </div>\n  </ng-template>\n</div>", styles: ["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:.75rem}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}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 1 0%;align-items:center;gap:.5rem}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight: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:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-item-configurator .__item-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}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:.5rem}axp-item-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-item-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}\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 }] }] } });
 //#region ----   Helpers   ----
 function isPropertyDefinitionArray(value) {
@@ -4883,71 +4917,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class AXPLogoComponent {
     constructor() {
-        this.isCompactLogo = false;
-        this.compactLogoSize = 32;
-        this.platform = inject(AXPlatform);
+        //#region ---- Inputs ----
+        this.source = input(...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Services & Dependencies ----
         this.themeStore = inject(AXPLayoutThemeService);
         this.platformConfig = inject(AXP_PLATFORM_CONFIG_TOKEN);
-        this.cdr = inject(ChangeDetectorRef);
-        effect(() => {
-            this.themeStore.menuVerticalMode();
-            this.updateActiveSource();
-        });
-    }
-    ngOnInit() {
-        this.platform.themeMode$.subscribe(() => {
-            this.updateActiveSource();
-        });
-    }
-    ngOnChanges() {
-        this.inputSource = this.source;
-        this.updateActiveSource();
-    }
-    updateActiveSource() {
-        const compactIcon = this.themeStore.menuVerticalMode() === AXPMenuVerticalMode.Compact
-            ? this.platformConfig.logo?.icon
-            : undefined;
-        if (compactIcon?.dark) {
-            this.activeSource = compactIcon.dark;
-        }
-        else if (compactIcon) {
-            this.activeSource = compactIcon.light;
-        }
-        else if (this.inputSource?.dark && this.inputSource?.light) {
-            this.activeSource = this.platform.isDark() ? this.inputSource.dark : this.inputSource.light;
-        }
-        else {
-            this.activeSource = this.inputSource;
-        }
-        this.isCompactLogo =
-            this.themeStore.menuVerticalMode() === AXPMenuVerticalMode.Compact && !!compactIcon;
-        this.setLogoType();
-        this.cdr.markForCheck();
-    }
-    setLogoType() {
-        switch (true) {
-            case this.activeSource instanceof AXPImageUrlLogoConfig:
-                this.logoType = 'url';
-                break;
-            case this.activeSource instanceof AXPComponentLogoConfig:
-                this.logoType = 'component';
-                break;
-            case this.activeSource instanceof AXPIconLogoConfig:
-                this.logoType = 'icon';
-                break;
-            default:
-                break;
-        }
+        this.deviceService = inject(AXPDeviceService);
+        //#endregion
+        //#region ---- Computed Properties ----
+        this.compactLogoSize = 32;
+        /**
+         * Resolves menu mode with mobile overlay viewports forcing full logo display.
+         */
+        this.resolvedMenuMode = computed(() => {
+            this.deviceService.screenSize();
+            if (!this.deviceService.isLarge()) {
+                return AXPMenuVerticalMode.Full;
+            }
+            return this.themeStore.effectiveMenuVerticalMode();
+        }, ...(ngDevMode ? [{ debugName: "resolvedMenuMode" }] : /* istanbul ignore next */ []));
+        this.activeSource = computed(() => {
+            this.themeStore.isDarkMode();
+            const inputSource = this.source();
+            const compactIcon = this.resolvedMenuMode() === AXPMenuVerticalMode.Compact
+                ? this.platformConfig.logo?.icon
+                : undefined;
+            if (compactIcon?.dark) {
+                return compactIcon.dark;
+            }
+            if (compactIcon) {
+                return compactIcon.light;
+            }
+            if (inputSource?.dark && inputSource?.light) {
+                return this.themeStore.isDarkMode() ? inputSource.dark : inputSource.light;
+            }
+            return inputSource;
+        }, ...(ngDevMode ? [{ debugName: "activeSource" }] : /* istanbul ignore next */ []));
+        this.isCompactLogo = computed(() => this.resolvedMenuMode() === AXPMenuVerticalMode.Compact &&
+            !!this.platformConfig.logo?.icon, ...(ngDevMode ? [{ debugName: "isCompactLogo" }] : /* istanbul ignore next */ []));
+        this.logoType = computed(() => {
+            const activeSource = this.activeSource();
+            if (activeSource instanceof AXPImageUrlLogoConfig) {
+                return 'url';
+            }
+            if (activeSource instanceof AXPComponentLogoConfig) {
+                return 'component';
+            }
+            if (activeSource instanceof AXPIconLogoConfig) {
+                return 'icon';
+            }
+            return undefined;
+        }, ...(ngDevMode ? [{ debugName: "logoType" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: "source" }, host: { classAttribute: "ax-flex ax-justify-center" }, usesOnChanges: true, ngImport: i0, template: "@switch (logoType) {\n  @case ('url') {\n    <ax-image\n      [width]=\"isCompactLogo ? compactLogoSize : activeSource.width\"\n      [height]=\"isCompactLogo ? compactLogoSize : activeSource.height\"\n      [src]=\"activeSource.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource.component\"></ng-container>\n  }\n  @case ('icon') {\n    <i [class]=\"activeSource.icon\" [style.color]=\"activeSource.color\"></i>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLogoComponent, isStandalone: true, selector: "axp-logo", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ax-flex ax-justify-center" }, ngImport: i0, template: "@switch (logoType()) {\n  @case ('url') {\n    @let logo = activeSource();\n    <ax-image\n      [width]=\"isCompactLogo() ? compactLogoSize : logo?.width\"\n      [height]=\"isCompactLogo() ? compactLogoSize : logo?.height\"\n      [src]=\"logo?.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource()?.component\"></ng-container>\n  }\n  @case ('icon') {\n    @let logo = activeSource();\n    <i [class]=\"logo?.icon\" [style.color]=\"logo?.color\"></i>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$1.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXDecoratorModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLogoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-logo', imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { class: 'ax-flex ax-justify-center' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (logoType) {\n  @case ('url') {\n    <ax-image\n      [width]=\"isCompactLogo ? compactLogoSize : activeSource.width\"\n      [height]=\"isCompactLogo ? compactLogoSize : activeSource.height\"\n      [src]=\"activeSource.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource.component\"></ng-container>\n  }\n  @case ('icon') {\n    <i [class]=\"activeSource.icon\" [style.color]=\"activeSource.color\"></i>\n  }\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { source: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'axp-logo', imports: [CommonModule, AXImageModule, AXDecoratorModule], host: { class: 'ax-flex ax-justify-center' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (logoType()) {\n  @case ('url') {\n    @let logo = activeSource();\n    <ax-image\n      [width]=\"isCompactLogo() ? compactLogoSize : logo?.width\"\n      [height]=\"isCompactLogo() ? compactLogoSize : logo?.height\"\n      [src]=\"logo?.url\"\n    ></ax-image>\n  }\n  @case ('component') {\n    <ng-container *ngComponentOutlet=\"activeSource()?.component\"></ng-container>\n  }\n  @case ('icon') {\n    @let logo = activeSource();\n    <i [class]=\"logo?.icon\" [style.color]=\"logo?.color\"></i>\n  }\n}\n" }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }] } });
 
 //#endregion
 //#region ---- Template Directives ----
@@ -5722,7 +5751,7 @@ class AXPMenuCustomizerComponent {
         this.toastService.warning(message);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMenuCustomizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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=\"ax-p-2 ax-text-xs ax-text-neutral-500 ax-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: [".axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem;border-bottom-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));flex-shrink:0}.axp-menu-customizer__toolbar-spacer{min-width:1rem;flex:1 1 0%}.axp-menu-customizer__container{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-height:0px;flex:1 1 0%;overflow:auto}.axp-menu-customizer__tree{display:flex;flex-direction:column;gap:.5rem}.axp-menu-customizer__tree ax-tree-view{flex:1 1 0%}.axp-menu-customizer__item{display:flex;flex:1 1 0%;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem .75rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item--hidden{opacity:.5}.axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer__item--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.axp-menu-customizer__item--group{padding-top:.75rem;padding-bottom:.75rem;--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item-icon{display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1));flex-shrink:0}.axp-menu-customizer__item-text{min-width:0px;flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-menu-customizer__item-group{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));letter-spacing:.025em}.axp-menu-customizer__item-group i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-divider,.axp-menu-customizer__item-path{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));min-width:0px}.axp-menu-customizer__item-divider i,.axp-menu-customizer__item-path i{flex-shrink:0;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-name{display:inline-flex;align-items:center;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));-webkit-user-select:all;user-select:all;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:.6;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:1}\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: i6.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", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "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: "21.2.9", 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=\"ax-p-2 ax-text-xs ax-text-neutral-500 ax-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: [".axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem;border-bottom-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));flex-shrink:0}.axp-menu-customizer__toolbar-spacer{min-width:1rem;flex:1 1 0%}.axp-menu-customizer__container{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-height:0px;flex:1 1 0%;overflow:auto}.axp-menu-customizer__tree{display:flex;flex-direction:column;gap:.5rem}.axp-menu-customizer__tree ax-tree-view{flex:1 1 0%}.axp-menu-customizer__item{display:flex;flex:1 1 0%;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem .75rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item--hidden{opacity:.5}.axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer__item--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.axp-menu-customizer__item--group{padding-top:.75rem;padding-bottom:.75rem;--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item-icon{display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1));flex-shrink:0}.axp-menu-customizer__item-text{min-width:0px;flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-menu-customizer__item-group{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));letter-spacing:.025em}.axp-menu-customizer__item-group i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-divider,.axp-menu-customizer__item-path{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));min-width:0px}.axp-menu-customizer__item-divider i,.axp-menu-customizer__item-path i{flex-shrink:0;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-name{display:inline-flex;align-items:center;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));-webkit-user-select:all;user-select:all;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:.6;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:1}\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: i6.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", "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", "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: "21.2.9", ngImport: i0, type: AXPMenuCustomizerComponent, decorators: [{
             type: Component,
@@ -6375,7 +6404,7 @@ class AXPSectionItemsBuilderComponent {
         /** Set on local {@link commit}; cleared on external sync or {@link markClean}. */
         this.pendingCommitSnapshot = null;
         /** True when the live model differs from the external baseline. */
-        this.isDirty = computed(() => !isEqual(this.normalizeValue(this.vm()), this.baseline()), ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
+        this.isDirty = computed(() => !isFormValueEqual(this.normalizeValue(this.vm()), this.baseline()), ...(ngDevMode ? [{ debugName: "isDirty" }] : /* istanbul ignore next */ []));
         this.sectionsModel = computed(() => this.normalizeValue(this.vm()), ...(ngDevMode ? [{ debugName: "sectionsModel" }] : /* istanbul ignore next */ []));
         this.sectionRows = computed(() => {
             const def = this.definition();
@@ -6402,16 +6431,22 @@ class AXPSectionItemsBuilderComponent {
                 return;
             }
             if (this.pendingCommitSnapshot != null) {
-                untracked(() => this.vm.set(normalized));
-                if (isEqual(normalized, this.baseline())) {
-                    this.pendingCommitSnapshot = null;
-                    this.baseline.set(cloneDeep(normalized));
+                if (!isEqual(normalized, current)) {
+                    // Parent discard/reload pushed a new external model — accept as the clean baseline.
+                    untracked(() => {
+                        this.vm.set(normalized);
+                        this.baseline.set(cloneDeep(normalized));
+                        this.pendingCommitSnapshot = null;
+                    });
+                    return;
                 }
+                this.pendingCommitSnapshot = null;
                 return;
             }
             untracked(() => {
                 this.vm.set(normalized);
                 this.baseline.set(cloneDeep(normalized));
+                this.pendingCommitSnapshot = null;
             });
         });
     }
@@ -6724,7 +6759,9 @@ class AXPQuerySortsComponent {
         });
     }
     emitActiveSortQueries() {
-        this.sortQueriesChange.emit(this.sortQueries().filter((q) => q.dir !== undefined));
+        this.sortQueriesChange.emit(this.sortQueries()
+            .filter((q) => q.dir !== undefined)
+            .map((q) => ({ name: q.name, dir: q.dir })));
     }
     drop(event) {
         const sq = [...this.sortQueries()];
@@ -6774,6 +6811,9 @@ class AXPSpreadsheetComponent {
         //#endregion
         //#region ----   Services & Dependencies   ----
         this.translationService = inject(AXTranslationService);
+        this.shortcutRegistry = inject(AXPKeyboardShortcutRegistry);
+        this.destroyRef = inject(DestroyRef);
+        this.elementRef = inject((ElementRef));
         //#endregion
         //#region ----   Computed Properties for Translations   ----
         /**
@@ -6944,6 +6984,20 @@ class AXPSpreadsheetComponent {
             const rows = this.currentRows();
             return (columns && columns.length > 0) && (!rows || rows.length === 0);
         }, ...(ngDevMode ? [{ debugName: "isRowsEmpty" }] : /* istanbul ignore next */ []));
+        this.shortcutRegistry.register({
+            owner: this.destroyRef,
+            elementRef: this.elementRef,
+            id: 'spreadsheet-cancel-edit',
+            priority: AXPKeyboardShortcutPriority.Panel,
+            when: () => this.editingCell() != null,
+            shortcuts: [
+                {
+                    keys: ['escape'],
+                    title: '@general:actions.cancel.title',
+                    handler: () => this.cancelCellEdit(),
+                },
+            ],
+        });
         // Initialize rows from input (fixed mode)
         this.internalRows.set(this.rowsInput());
         // Watch for rowsInput changes and update internalRows (fixed mode only)
@@ -7196,16 +7250,6 @@ class AXPSpreadsheetComponent {
             }
         }, 150);
     }
-    /**
-     * Handle Escape key to cancel editing
-     */
-    handleKeyDown(event) {
-        if (event.key === 'Escape' && this.editingCell()) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.cancelCellEdit();
-        }
-    }
     /**
      * Commit cell edit (save changes and close editing mode)
      */
@@ -7359,7 +7403,7 @@ class AXPSpreadsheetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: { listeners: { "document:keydown": "handleKeyDown($event)" }, 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\">{{ '@general:state-message.empty-columns.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty-columns.description' | translate | async }}\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\">{{ '@general:state-message.empty.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate | async }}</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\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\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\">{{ column.title | translate | async }}</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\">{{ '@general:state-message.empty-rows.title' | translate | async\n                                }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty-rows.description' |\n                                translate |\n                                async }}</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\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\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\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                <axp-widgets-container [context]=\"spreadsheetContext()\"\n                    (onContextChanged)=\"handleSpreadsheetContextChange($event)\">\n                    @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\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\">{{ getRowTitle(rowItem.row, rowTitlePath()!) }}</div>\n                                }\n                                @if (rowDescriptionPath()) {\n                                <div class=\"__header-description\">{{ getRowDescription(rowItem.row,\n                                    rowDescriptionPath()!) }}</div>\n                                }\n                            </div>\n                            @if (allowRemoveRows() && !readonly()) {\n                            <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                                <ax-button look=\"blank\" color=\"danger\"\n                                    (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\" [attr.aria-label]=\"'Remove Row'\">\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 class=\"__cell\" [class.__cell--editing]=\"isCellEditing(rowItem.rowId, column.name)\"\n                            [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                            (click)=\"$event.stopPropagation(); handleCellClick(rowItem.rowId, column.name, $event)\">\n                            @if (isCellEditing(rowItem.rowId, column.name) && !isColumnReadonly(column)) {\n                            <!-- Edit mode: Show widget in edit mode -->\n                            <div class=\"__cell-editor\" (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                                tabindex=\"-1\">\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'edit'\"></ng-container>\n                            </div>\n                            <!-- Floating toolbar for commit/cancel -->\n                            <div class=\"__cell-toolbar ax-xs\" (click)=\"$event.stopPropagation()\"\n                                (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n                                (mouseup)=\"$event.stopPropagation()\" (focusin)=\"$event.stopPropagation()\">\n                                <ax-button look=\"blank\" color=\"success\" (onClick)=\"commitCellEdit()\"\n                                    [attr.aria-label]=\"'Commit'\">\n                                    <ax-icon icon=\"far fa-check\"></ax-icon>\n                                </ax-button>\n                                <ax-button look=\"blank\" color=\"danger\" (onClick)=\"cancelCellEdit()\"\n                                    [attr.aria-label]=\"'Cancel'\">\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 (getCellValue(rowIndex, column.name) !== null &&\n                                getCellValue(rowIndex, column.name) !== undefined) {\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'view'\"></ng-container>\n                                } @else {\n                                <span class=\"__cell-placeholder\">{{ emptyCellPlaceholder() }}</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-->", styles: [".axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1 1 0%;overflow:hidden;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:1rem}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:.75rem}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:1.5rem;line-height:2rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.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{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(163 163 163 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}.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:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding:.375rem .5rem}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;white-space:nowrap;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));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:.25rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{white-space:normal;overflow-wrap:break-word;font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding:.375rem .5rem}.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:.75rem;line-height:1rem}}.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:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;vertical-align:top;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .05;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:1}.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-width:2px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .1;padding:1px}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding:.5rem .75rem}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;bottom:-35px;inset-inline-end:0px;display:flex;gap:.125rem;white-space:nowrap;border-radius:.375rem;border-width:1px;padding:.25rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:1.25rem;align-items:center;justify-content:center;overflow-wrap:break-word;padding:.125rem;font-size:.875rem;line-height:1.25rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.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:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:.75rem;line-height:1rem}}\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: "21.2.9", 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\">{{ '@general:state-message.empty-columns.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty-columns.description' | translate | async }}\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\">{{ '@general:state-message.empty.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate | async }}</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\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\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\">{{ column.title | translate | async }}</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\">{{ '@general:state-message.empty-rows.title' | translate | async\n                                }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty-rows.description' |\n                                translate |\n                                async }}</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\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\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\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                <axp-widgets-container [context]=\"spreadsheetContext()\"\n                    (onContextChanged)=\"handleSpreadsheetContextChange($event)\">\n                    @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\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\">{{ getRowTitle(rowItem.row, rowTitlePath()!) }}</div>\n                                }\n                                @if (rowDescriptionPath()) {\n                                <div class=\"__header-description\">{{ getRowDescription(rowItem.row,\n                                    rowDescriptionPath()!) }}</div>\n                                }\n                            </div>\n                            @if (allowRemoveRows() && !readonly()) {\n                            <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                                <ax-button look=\"blank\" color=\"danger\"\n                                    (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\" [attr.aria-label]=\"'Remove Row'\">\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 class=\"__cell\" [class.__cell--editing]=\"isCellEditing(rowItem.rowId, column.name)\"\n                            [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                            (click)=\"$event.stopPropagation(); handleCellClick(rowItem.rowId, column.name, $event)\">\n                            @if (isCellEditing(rowItem.rowId, column.name) && !isColumnReadonly(column)) {\n                            <!-- Edit mode: Show widget in edit mode -->\n                            <div class=\"__cell-editor\" (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                                tabindex=\"-1\">\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'edit'\"></ng-container>\n                            </div>\n                            <!-- Floating toolbar for commit/cancel -->\n                            <div class=\"__cell-toolbar ax-xs\" (click)=\"$event.stopPropagation()\"\n                                (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n                                (mouseup)=\"$event.stopPropagation()\" (focusin)=\"$event.stopPropagation()\">\n                                <ax-button look=\"blank\" color=\"success\" (onClick)=\"commitCellEdit()\"\n                                    [attr.aria-label]=\"'Commit'\">\n                                    <ax-icon icon=\"far fa-check\"></ax-icon>\n                                </ax-button>\n                                <ax-button look=\"blank\" color=\"danger\" (onClick)=\"cancelCellEdit()\"\n                                    [attr.aria-label]=\"'Cancel'\">\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 (getCellValue(rowIndex, column.name) !== null &&\n                                getCellValue(rowIndex, column.name) !== undefined) {\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'view'\"></ng-container>\n                                } @else {\n                                <span class=\"__cell-placeholder\">{{ emptyCellPlaceholder() }}</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-->", styles: [".axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1 1 0%;overflow:hidden;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:1rem}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:.75rem}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:1.5rem;line-height:2rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.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{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(163 163 163 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}.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:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding:.375rem .5rem}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;white-space:nowrap;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));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:.25rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{white-space:normal;overflow-wrap:break-word;font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding:.375rem .5rem}.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:.75rem;line-height:1rem}}.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:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;vertical-align:top;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .05;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:1}.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-width:2px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .1;padding:1px}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding:.5rem .75rem}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;bottom:-35px;inset-inline-end:0px;display:flex;gap:.125rem;white-space:nowrap;border-radius:.375rem;border-width:1px;padding:.25rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:1.25rem;align-items:center;justify-content:center;overflow-wrap:break-word;padding:.125rem;font-size:.875rem;line-height:1.25rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.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:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:.75rem;line-height:1rem}}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSpreadsheetComponent, decorators: [{
             type: Component,
@@ -7373,10 +7417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'axp-spreadsheet',
                     }, 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\">{{ '@general:state-message.empty-columns.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty-columns.description' | translate | async }}\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\">{{ '@general:state-message.empty.title' | translate | async }}</div>\n        <div class=\"__empty-description\">{{ '@general:state-message.empty.description' | translate | async }}</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\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\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\">{{ column.title | translate | async }}</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\">{{ '@general:state-message.empty-rows.title' | translate | async\n                                }}\n                            </div>\n                            <div class=\"__empty-description\">{{ '@general:state-message.empty-rows.description' |\n                                translate |\n                                async }}</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\">{{ title() | translate | async }}</div>\n                        }\n                        @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n                        <div class=\"__corner-actions\">\n                            <ax-button look=\"blank\" color=\"primary\" (onClick)=\"handleAddRow()\"\n                                [attr.aria-label]=\"'Add Row'\">\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\">{{ column.title | translate | async }}</div>\n                        </div>\n                    </th>\n                    }\n                </tr>\n            </thead>\n\n            <!-- Body Rows -->\n            <tbody class=\"__tbody\">\n                <axp-widgets-container [context]=\"spreadsheetContext()\"\n                    (onContextChanged)=\"handleSpreadsheetContextChange($event)\">\n                    @for (rowItem of rowsWithIds(); track rowItem.rowId; let rowIndex = $index) {\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\">{{ getRowTitle(rowItem.row, rowTitlePath()!) }}</div>\n                                }\n                                @if (rowDescriptionPath()) {\n                                <div class=\"__header-description\">{{ getRowDescription(rowItem.row,\n                                    rowDescriptionPath()!) }}</div>\n                                }\n                            </div>\n                            @if (allowRemoveRows() && !readonly()) {\n                            <div class=\"__header-actions ax-xs ax-opacity-30 hover:ax-opacity-100\">\n                                <ax-button look=\"blank\" color=\"danger\"\n                                    (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\" [attr.aria-label]=\"'Remove Row'\">\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 class=\"__cell\" [class.__cell--editing]=\"isCellEditing(rowItem.rowId, column.name)\"\n                            [class.__cell--readonly]=\"isColumnReadonly(column)\"\n                            (click)=\"$event.stopPropagation(); handleCellClick(rowItem.rowId, column.name, $event)\">\n                            @if (isCellEditing(rowItem.rowId, column.name) && !isColumnReadonly(column)) {\n                            <!-- Edit mode: Show widget in edit mode -->\n                            <div class=\"__cell-editor\" (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n                                tabindex=\"-1\">\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'edit'\"></ng-container>\n                            </div>\n                            <!-- Floating toolbar for commit/cancel -->\n                            <div class=\"__cell-toolbar ax-xs\" (click)=\"$event.stopPropagation()\"\n                                (mousedown)=\"$event.preventDefault(); $event.stopPropagation()\"\n                                (mouseup)=\"$event.stopPropagation()\" (focusin)=\"$event.stopPropagation()\">\n                                <ax-button look=\"blank\" color=\"success\" (onClick)=\"commitCellEdit()\"\n                                    [attr.aria-label]=\"'Commit'\">\n                                    <ax-icon icon=\"far fa-check\"></ax-icon>\n                                </ax-button>\n                                <ax-button look=\"blank\" color=\"danger\" (onClick)=\"cancelCellEdit()\"\n                                    [attr.aria-label]=\"'Cancel'\">\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 (getCellValue(rowIndex, column.name) !== null &&\n                                getCellValue(rowIndex, column.name) !== undefined) {\n                                <ng-container axp-widget-renderer [node]=\"getCellWidgetNode(column, rowIndex)\"\n                                    [mode]=\"'view'\"></ng-container>\n                                } @else {\n                                <span class=\"__cell-placeholder\">{{ emptyCellPlaceholder() }}</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-->", styles: [".axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1 1 0%;overflow:hidden;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:1rem}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state .__empty-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:.75rem}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:1.5rem;line-height:2rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity: 1;color:rgb(38 38 38 / var(--tw-text-opacity, 1))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.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{--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(163 163 163 / var(--tw-bg-opacity, 1))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb:hover{--tw-bg-opacity: 1;background-color:rgb(115 115 115 / var(--tw-bg-opacity, 1))}.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:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding:.375rem .5rem}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;white-space:nowrap;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));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:.25rem}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{white-space:normal;overflow-wrap:break-word;font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding:.375rem .5rem}.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:.75rem;line-height:1rem}}.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:0px;width:200px;min-width:200px;border-width:1px;border-bottom-width:1px;padding:.5rem .75rem;vertical-align:top;font-weight:600;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;top:.25rem;inset-inline-end:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:.25rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem;font-weight:400;opacity:.75}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:.75rem;line-height:1rem}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-width:1px;padding:.5rem .75rem;text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1));--tw-bg-opacity: .05;opacity:0;transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.15s;animation-timing-function:cubic-bezier(.4,0,.2,1)}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:1}.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-width:2px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .1;padding:1px}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding:.5rem .75rem}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;bottom:-35px;inset-inline-end:0px;display:flex;gap:.125rem;white-space:nowrap;border-radius:.375rem;border-width:1px;padding:.25rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:1.25rem;align-items:center;justify-content:center;overflow-wrap:break-word;padding:.125rem;font-size:.875rem;line-height:1.25rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.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:.375rem .5rem}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:.75rem;line-height:1rem}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowMode", required: false }] }], rowsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsInput", required: false }] }], rowsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsModel", required: false }] }, { type: i0.Output, args: ["rowsModelChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], emptyCellPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCellPlaceholder", required: false }] }], rowTitlePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTitlePath", required: false }] }], rowDescriptionPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDescriptionPath", required: false }] }], allowAddRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddRows", required: false }] }], allowRemoveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemoveRows", required: false }] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowChange: [{ type: i0.Output, args: ["rowChange"] }], spreadsheetChange: [{ type: i0.Output, args: ["spreadsheetChange"] }], handleKeyDown: [{
-                type: HostListener,
-                args: ['document:keydown', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rowMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowMode", required: false }] }], rowsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsInput", required: false }] }], rowsModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsModel", required: false }] }, { type: i0.Output, args: ["rowsModelChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], emptyCellPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCellPlaceholder", required: false }] }], rowTitlePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTitlePath", required: false }] }], rowDescriptionPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDescriptionPath", required: false }] }], allowAddRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddRows", required: false }] }], allowRemoveRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowRemoveRows", required: false }] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], rowChange: [{ type: i0.Output, args: ["rowChange"] }], spreadsheetChange: [{ type: i0.Output, args: ["spreadsheetChange"] }] } });
 
 //#endregion
 
@@ -8671,8 +8712,7 @@ class AXPUserAvatarComponent {
         });
     }
     /**
-     * Generate avatar image source
-     * This is a placeholder - implement based on your actual requirements
+     * Resolves avatar image URL from user data and resets load state.
      */
     generateAvatarSrc() {
         // Example: Check if the user has a custom avatar URL
@@ -8684,11 +8724,11 @@ class AXPUserAvatarComponent {
         this.src.set('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<axp-avatar [size]=\"size()\" [src]=\"src()\" [fullName]=\"title()\" />", styles: [""], dependencies: [{ kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSkeletonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<axp-avatar [size]=\"size()\" [src]=\"src()\" [fullName]=\"title()\" />\n", styles: [""], dependencies: [{ kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXSkeletonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-user-avatar', imports: [AXPAvatarComponent, AXBadgeModule, AXSkeletonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [], template: "<axp-avatar [size]=\"size()\" [src]=\"src()\" [fullName]=\"title()\" />" }]
+            args: [{ selector: 'axp-user-avatar', imports: [AXPAvatarComponent, AXBadgeModule, AXSkeletonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [], template: "<axp-avatar [size]=\"size()\" [src]=\"src()\" [fullName]=\"title()\" />\n" }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }] } });
 
 class AXPQueryViewsComponent {