@acorex/platform 21.0.0-next.24 → 21.0.0-next.33

package/fesm2022/acorex-platform-themes-default.mjs

@@ -10,26 +10,27 @@ import { AXDataTableModule } from '@acorex/components/data-table';
 import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXDialogModule } from '@acorex/components/dialog';
-import * as i3$1 from '@acorex/components/drawer';
+import * as i3$2 from '@acorex/components/drawer';
 import { AXDrawerModule } from '@acorex/components/drawer';
 import * as i5 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXFormModule } from '@acorex/components/form';
 import { AXLoadingModule } from '@acorex/components/loading';
+import * as i3$1 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import * as i6 from '@acorex/components/search-box';
 import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 import * as i10 from '@acorex/core/translation';
-import { AXTranslationModule } from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService, translateSync } from '@acorex/core/translation';
 import * as i2 from '@acorex/core/utils';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPAuthModule, AXPSessionService, AXPSessionStatus, AXPAuthGuard } from '@acorex/platform/auth';
-import { AXPRefreshEvent, AXP_PLATFORM_CONFIG_TOKEN, AXPMenuService, AXPSettingsService, AXPMenuVisibilityService, AXPCommonModule } from '@acorex/platform/common';
-import * as i1$2 from '@acorex/platform/core';
-import { AXPDeviceService, AXPComponentSlotModule, AXPPlatformScope, AXPBroadcastEventService, AXPContextStore } from '@acorex/platform/core';
-import { AXP_ENTITY_CONFIG_TOKEN } from '@acorex/platform/layout/entity';
+import { AXPRefreshEvent, AXPSettingsService, AXPCommonSettings, AXP_PLATFORM_CONFIG_TOKEN, AXPMenuService, AXPMenuVisibilityService, AXPCommonModule } from '@acorex/platform/common';
+import * as i1$3 from '@acorex/platform/core';
+import { AXPDeviceService, AXHighlightService, AXPResolveMultiLanguageStringPipe, AXPComponentSlotModule, AXPPlatformScope, AXPBroadcastEventService, AXPContextStore } from '@acorex/platform/core';
+import { AXP_CATEGORY_TREE_ROOT_TITLE_I18N_KEY, AXPEntityDefinitionRegistryService, AXPCategoryTreeService, AXPEntityListViewColumnViewModel, AXP_ENTITY_CONFIG_TOKEN } from '@acorex/platform/layout/entity';
 import * as i7$1 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
 import { AXPWidgetsModule } from '@acorex/platform/layout/widgets';
@@ -38,15 +39,24 @@ import { AXPWorkflowService, ofType } from '@acorex/platform/workflow';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, signal, computed, effect, ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { inject, signal, computed, effect, ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, viewChild, afterNextRender, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import * as i1$3 from '@angular/router';
-import { RouterModule, Router, NavigationEnd, RouteReuseStrategy, ROUTES } from '@angular/router';
+import * as i1$4 from '@angular/router';
+import { RouterModule, Router, ActivatedRoute, NavigationEnd, RouteReuseStrategy, ROUTES } from '@angular/router';
 import { Subject, takeUntil, filter, firstValueFrom } from 'rxjs';
-import * as i2$2 from '@acorex/components/side-menu';
+import * as i1$2 from '@acorex/core/platform';
+import { AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPStateMessageComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPQueryColumnsComponent, AXPThemeLayoutStartSideComponent, AXPTaskBadgeService, AXPMenuBadgeHelper, AXPTaskBadgeDirective, AXPLogoComponent } from '@acorex/platform/layout/components';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
+import * as i2$2 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import { AXTreeViewModule, AXTreeViewComponent } from '@acorex/components/tree-view';
+import { AXPCommandService } from '@acorex/platform/runtime';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isEqual, sortBy } from 'lodash-es';
+import * as i2$3 from '@acorex/components/side-menu';
 import { AXSideMenuModule } from '@acorex/components/side-menu';
-import { AXPTaskBadgeService, AXPMenuBadgeHelper, AXPTaskBadgeDirective, AXPLogoComponent } from '@acorex/platform/layout/components';
-import { sortBy } from 'lodash-es';
 import { AXAvatarModule } from '@acorex/components/avatar';
 import { AXImageModule } from '@acorex/components/image';
 import * as i4$1 from '@acorex/components/menu';
@@ -61,8 +71,8 @@ class AXPEntityDetailListViewComponent {
         this.workflow = inject(AXPWorkflowService);
         this.store = inject(AXPLayoutThemeService);
         this.deviceService = inject(AXPDeviceService);
-        this.toolbarPrimaryActions = signal([], ...(ngDevMode ? [{ debugName: "toolbarPrimaryActions" }] : []));
-        this.toolbarSecondaryActions = signal([], ...(ngDevMode ? [{ debugName: "toolbarSecondaryActions" }] : []));
+        this.toolbarPrimaryActions = signal([], ...(ngDevMode ? [{ debugName: "toolbarPrimaryActions" }] : /* istanbul ignore next */ []));
+        this.toolbarSecondaryActions = signal([], ...(ngDevMode ? [{ debugName: "toolbarSecondaryActions" }] : /* istanbul ignore next */ []));
         this.destroyed = new Subject();
         this.dropdownRowItems = computed(() => {
             return this.vm.secondaryRowActions().map((c) => ({
@@ -71,7 +81,7 @@ class AXPEntityDetailListViewComponent {
                 text: c.title,
                 color: c.color,
             }));
-        }, ...(ngDevMode ? [{ debugName: "dropdownRowItems" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "dropdownRowItems" }] : /* istanbul ignore next */ []));
         this.commandRowItems = computed(() => {
             return this.vm.primaryRowActions().map((c) => {
                 return {
@@ -81,7 +91,7 @@ class AXPEntityDetailListViewComponent {
                     color: c.color,
                 };
             });
-        }, ...(ngDevMode ? [{ debugName: "commandRowItems" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "commandRowItems" }] : /* istanbul ignore next */ []));
         this.getCommandRowItems = () => {
             return this.commandRowItems();
         };
@@ -149,12 +159,12 @@ class AXPEntityDetailListViewComponent {
     ngOnDestroy() {
         this.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPEntityDetailListViewComponent, deps: [{ token: i1.AXActionSheetService }, { token: i2.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPEntityDetailListViewComponent, isStandalone: true, selector: "axp-entity-detail-list-view", inputs: { vm: ["viewModel", "vm"] }, providers: [AXUnsubscriber], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ax-flex ax-p-2\">\n  <div class=\"ax-flex ax-flex-col ax-items-end ax-gap-3 ax-flex-1 ax-overflow-auto ax-min-h-72\">\n    <div class=\"ax-flex ax-justify-between ax-items-center ax-w-full\">\n      <div class=\"ax-flex ax-justify-between ax-items-center\">\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-gap-4\">\n          @if (vm.hasSelectedItems()) {\n            <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\n              <span class=\"ax-text-xl ax-font-bold\">\n                {{ vm.selectedItems().length }}\n                {{ '@general:terms.items-selected' | translate | async }}\n              </span>\n              <span\n                (click)=\"vm.clearSelection()\"\n                class=\"ax-text-sm ax-text-primary-500 ax-underline ax-cursor-pointer\"\n                >{{ '@general:actions.unselect.title' | translate | async }}</span\n              >\n            </div>\n          } @else {\n            @if (vm.hasInlineFilters() && !deviceService.isSmall()) {\n              <div class=\"ax-w-72\">\n                <ax-search-box\n                  [placeholder]=\"\n                    ('@general:widgets.lookup.search' | translate | async) + vm.inlineFiltersPlaceholders().join(', ')\n                  \"\n                  (onValueChanged)=\"handleChangeSearchValue($event)\"\n                  ><ax-clear-button></ax-clear-button\n                ></ax-search-box>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-gap-3\">\n        @for (tr of toolbarPrimaryActions(); track $index) {\n          <ax-button\n            [text]=\"(tr.title | translate | async)!\"\n            [color]=\"tr.color\"\n            [disabled]=\"tr.disabled\"\n            (onClick)=\"vm.executeCommand(tr.name)\"\n          >\n            <ax-prefix>\n              <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n            </ax-prefix>\n          </ax-button>\n        }\n        @if (toolbarSecondaryActions().length) {\n          <ax-button\n            [text]=\"deviceService.isSmall() ? null : ('@general:terms.interface.actions' | translate | async)\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                @for (tr of toolbarSecondaryActions(); track $index) {\n                  <ng-container>\n                    @if (tr.separated && !$first) {\n                      <ax-divider></ax-divider>\n                    }\n                    <ax-button-item\n                      [text]=\"(tr.title | translate | async)!\"\n                      class=\"ax-font-semibold ax-text-{{ tr.color }}\"\n                      (onClick)=\"vm.executeCommand(tr.name)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  </ng-container>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-flex ax-flex-1 ax-pt-0 ax-overflow-auto ax-max-w-full\">\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-flex-1\"\n        [paging]=\"true\"\n        [fetchDataMode]=\"'manual'\"\n        [parentField]=\"vm.parentKey()\"\n        [loading]=\"{ enabled: true, animation: true }\"\n        [dataSource]=\"vm.dataSource\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n      >\n        <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n        @if (vm.selectedScopeActionsCount()) {\n          <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n        @for (col of vm.columns(); track col.name) {\n          @if (col.visible) {\n            <axp-widget-column-renderer\n              [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n              [caption]=\"(col.title | translate | async)!\"\n              [node]=\"col.node()\"\n            ></axp-widget-column-renderer>\n          }\n        }\n        @if (getCommandRowItems().length) {\n          <ax-command-column\n            fixed=\"end\"\n            [width]=\"getCommandRowItems().length * 60 + 'px'\"\n            [items]=\"getCommandRowItems()\"\n            (onItemClick)=\"handleRowCommandClick($event)\"\n          ></ax-command-column>\n        }\n        @if (dropdownRowItems().length) {\n          <ax-dropdown-command-column\n            fixed=\"end\"\n            [width]=\"'60px'\"\n            [items]=\"getDropdownRowItems\"\n            (onItemClick)=\"handleRowCommandClick($event)\"\n          ></ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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: AXDataTableModule }, { kind: "component", type: i7.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "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: i7.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i7.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i7.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i7.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityDetailListViewComponent, deps: [{ token: i1.AXActionSheetService }, { token: i2.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityDetailListViewComponent, isStandalone: true, selector: "axp-entity-detail-list-view", inputs: { vm: ["viewModel", "vm"] }, providers: [AXUnsubscriber], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ax-flex ax-p-2\">\n  <div class=\"ax-flex ax-flex-col ax-items-end ax-gap-3 ax-flex-1 ax-overflow-auto ax-min-h-72\">\n    <div class=\"ax-flex ax-justify-between ax-items-center ax-w-full\">\n      <div class=\"ax-flex ax-justify-between ax-items-center\">\n        <div class=\"ax-flex ax-justify-start ax-items-center ax-gap-4\">\n          @if (vm.hasSelectedItems()) {\n            <div class=\"ax-flex ax-gap-3 ax-items-center ax-h-10\">\n              <span class=\"ax-text-xl ax-font-bold\">\n                {{ vm.selectedItems().length }}\n                {{ '@general:terms.items-selected' | translate | async }}\n              </span>\n              <span\n                (click)=\"vm.clearSelection()\"\n                class=\"ax-text-sm ax-text-primary-500 ax-underline ax-cursor-pointer\"\n                >{{ '@general:actions.unselect.title' | translate | async }}</span\n              >\n            </div>\n          } @else {\n            @if (vm.hasInlineFilters() && !deviceService.isSmall()) {\n              <div class=\"ax-w-72\">\n                <ax-search-box\n                  [placeholder]=\"\n                    ('@general:widgets.lookup.search' | translate | async) + vm.inlineFiltersPlaceholders().join(', ')\n                  \"\n                  (onValueChanged)=\"handleChangeSearchValue($event)\"\n                  ><ax-clear-button></ax-clear-button\n                ></ax-search-box>\n              </div>\n            }\n          }\n        </div>\n      </div>\n      <div class=\"ax-flex ax-items-center ax-gap-3\">\n        @for (tr of toolbarPrimaryActions(); track $index) {\n          <ax-button\n            [text]=\"(tr.title | translate | async)!\"\n            [color]=\"tr.color\"\n            [disabled]=\"tr.disabled\"\n            (onClick)=\"vm.executeCommand(tr.name)\"\n          >\n            <ax-prefix>\n              <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n            </ax-prefix>\n          </ax-button>\n        }\n        @if (toolbarSecondaryActions().length) {\n          <ax-button\n            [text]=\"deviceService.isSmall() ? null : ('@general:terms.interface.actions' | translate | async)\"\n            [color]=\"'default'\"\n          >\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </ax-prefix>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                @for (tr of toolbarSecondaryActions(); track $index) {\n                  <ng-container>\n                    @if (tr.separated && !$first) {\n                      <ax-divider></ax-divider>\n                    }\n                    <ax-button-item\n                      [text]=\"(tr.title | translate | async)!\"\n                      class=\"ax-font-semibold ax-text-{{ tr.color }}\"\n                      (onClick)=\"vm.executeCommand(tr.name)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon [icon]=\"tr.icon\"> </ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  </ng-container>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n      </div>\n    </div>\n\n    <div class=\"ax-flex ax-flex-1 ax-pt-0 ax-overflow-auto ax-max-w-full\">\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"ax-flex-1\"\n        [paging]=\"true\"\n        [fetchDataMode]=\"'manual'\"\n        [parentField]=\"vm.parentKey()\"\n        [loading]=\"{ enabled: true, animation: true }\"\n        [dataSource]=\"vm.dataSource\"\n        (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n        (onRowDbClick)=\"handleRowDbClick($event)\"\n      >\n        <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n        @if (vm.selectedScopeActionsCount()) {\n          <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n        }\n        @for (col of vm.columns(); track col.name) {\n          @if (col.visible) {\n            <axp-widget-column-renderer\n              [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n              [caption]=\"(col.title | translate | async)!\"\n              [node]=\"col.node()\"\n            ></axp-widget-column-renderer>\n          }\n        }\n        @if (getCommandRowItems().length) {\n          <ax-command-column\n            fixed=\"end\"\n            [width]=\"getCommandRowItems().length * 60 + 'px'\"\n            [items]=\"getCommandRowItems()\"\n            (onItemClick)=\"handleRowCommandClick($event)\"\n          ></ax-command-column>\n        }\n        @if (dropdownRowItems().length) {\n          <ax-dropdown-command-column\n            fixed=\"end\"\n            [width]=\"'60px'\"\n            [items]=\"getDropdownRowItems\"\n            (onItemClick)=\"handleRowCommandClick($event)\"\n          ></ax-dropdown-command-column>\n        }\n      </ax-data-table>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.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: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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: AXDataTableModule }, { kind: "component", type: i7.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "title", "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: i7.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i7.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i7.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i7.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: 
                 //
                 AXPWidgetCoreModule }, { kind: "component", type: i7$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPEntityDetailListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityDetailListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-entity-detail-list-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [AXUnsubscriber], imports: [
                         CommonModule,
@@ -189,13 +199,1609 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['grid', { static: true }]
             }] } });
 
+//#region ----   Constants   ----
+const ROOT_NODE_ID = 'all';
+const LOADING_DELAY_MS = 300;
+const DEFAULT_TEXT_FIELD = 'title';
+const DEFAULT_VALUE_FIELD = 'id';
+//#endregion
+class AXPEntityCategoryComponent {
+    //#endregion
+    //#region ----   Constructor & Lifecycle   ----
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        /** i18n key for the synthetic "all items" root row; resolved in the template with the translate pipe. */
+        this.categoryTreeRootTitleI18nKey = AXP_CATEGORY_TREE_ROOT_TITLE_I18N_KEY;
+        this.translate = inject(AXTranslationService);
+        this.workflow = inject(AXPWorkflowService);
+        this.commandService = inject(AXPCommandService);
+        this.entityRegistry = inject(AXPEntityDefinitionRegistryService);
+        this.categoryTreeService = inject(AXPCategoryTreeService);
+        this.highlightService = inject(AXHighlightService);
+        //#endregion
+        //#region ----   Component Inputs & View Queries   ----
+        this.vm = input.required(...(ngDevMode ? [{ debugName: "vm" }] : /* istanbul ignore next */ []));
+        this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+        this.searchValue = input('', ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+        // Tree view inputs with defaults
+        this.selectMode = input('single', ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
+        this.selectionBehavior = input('intermediate', ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : /* istanbul ignore next */ []));
+        this.dragArea = input('handler', ...(ngDevMode ? [{ debugName: "dragArea" }] : /* istanbul ignore next */ []));
+        this.dragBehavior = input('none', ...(ngDevMode ? [{ debugName: "dragBehavior" }] : /* istanbul ignore next */ []));
+        this.showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : /* istanbul ignore next */ []));
+        this.showChildrenBadge = input(false, ...(ngDevMode ? [{ debugName: "showChildrenBadge" }] : /* istanbul ignore next */ []));
+        this.expandedIcon = input('fa-solid fa-chevron-down', ...(ngDevMode ? [{ debugName: "expandedIcon" }] : /* istanbul ignore next */ []));
+        this.collapsedIcon = input('fa-solid fa-chevron-right', ...(ngDevMode ? [{ debugName: "collapsedIcon" }] : /* istanbul ignore next */ []));
+        this.indentSize = input(16, ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
+        this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        this.searchWithChildren = input(true, ...(ngDevMode ? [{ debugName: "searchWithChildren" }] : /* istanbul ignore next */ [])); // Include children of search results
+        //#endregion
+        //#region ----   Component State   ----
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.isSearching = signal(false, ...(ngDevMode ? [{ debugName: "isSearching" }] : /* istanbul ignore next */ []));
+        this.searchResultCount = signal(0, ...(ngDevMode ? [{ debugName: "searchResultCount" }] : /* istanbul ignore next */ []));
+        this.currentSearchValue = signal('', ...(ngDevMode ? [{ debugName: "currentSearchValue" }] : /* istanbul ignore next */ []));
+        this.resultsFoundText = signal('', ...(ngDevMode ? [{ debugName: "resultsFoundText" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Private Properties   ----
+        this.loadingTimeoutId = null;
+        this.treeData = null;
+        this.treeConfig = null;
+        this.matchingNodeIds = new Set();
+        this.relevantNodeIds = new Set(); // For search filtering
+        this.nodeDataCache = new Map(); // Cache parent data from search results
+        this.expandedNodesBeforeSearch = [];
+        this.nodesExpandedDuringSearch = [];
+        this.currentSearchTerm = null;
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.textField = computed(() => this.vm().entityDef.category?.textField || DEFAULT_TEXT_FIELD, ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        this.valueField = computed(() => this.vm().entityDef.category?.valueField || DEFAULT_VALUE_FIELD, ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        /** When true, add/edit/delete category actions are hidden (from category plugin readonly option). */
+        this.categoryReadonly = computed(() => this.vm().entityDef?.extensions?.category?.readonly === true, ...(ngDevMode ? [{ debugName: "categoryReadonly" }] : /* istanbul ignore next */ []));
+        /**
+         * Computed property to check if we should show the "no search results" empty state.
+         * Returns true when search is active, not searching, and no results found.
+         */
+        this.showNoSearchResults = computed(() => {
+            const searchValue = this.currentSearchValue().trim();
+            const isSearching = this.isSearching();
+            const resultCount = this.searchResultCount();
+            return searchValue.length > 0 && !isSearching && resultCount === 0;
+        }, ...(ngDevMode ? [{ debugName: "showNoSearchResults" }] : /* istanbul ignore next */ []));
+        this.categoryEntityKey = computed(() => {
+            const key = this.vm().entityDef.category?.entity;
+            if (!key) {
+                throw new Error('Category entity is not configured');
+            }
+            return key;
+        }, ...(ngDevMode ? [{ debugName: "categoryEntityKey" }] : /* istanbul ignore next */ []));
+        // protected toggleExpand(e: AXTreeViewNodeDoubleClickEvent) {
+        //   (e.component as AXTreeViewComponent).toggleNodeExpansion(String(e.node[this.valueField()] ?? ''));
+        // }
+        //#endregion
+        //#region ----   Tree Data Source   ----
+        /**
+         * Datasource callback for tree-view component.
+         * Provides lazy loading support for tree nodes.
+         */
+        this.datasource = async (parentId) => {
+            if (!this.isTreeInitialized()) {
+                return [];
+            }
+            // Load root nodes if no parent ID provided
+            if (!parentId) {
+                return await this.loadRootNodes();
+            }
+            // Load children for the specified parent
+            return await this.loadChildNodes(parentId);
+        };
+        afterNextRender(() => {
+            this.initializeTree();
+        });
+        this.workflow.events$
+            .pipe(ofType(AXPRefreshEvent))
+            .pipe(takeUntilDestroyed())
+            .subscribe((event) => {
+            this.tree()?.reloadData();
+            // this.tree()?.refresh();
+        });
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Handles category search input changes - Uses server-side search for efficiency and reliability
+     */
+    async handleCategorySearchChange(event) {
+        if (!this.isTreeInitialized()) {
+            return;
+        }
+        const searchTerm = (event.value ?? '').trim().toLowerCase();
+        const previousSearchTerm = this.currentSearchValue();
+        // If search is cleared, reset tree
+        if (!searchTerm) {
+            if (previousSearchTerm || this.matchingNodeIds.size > 0) {
+                this.currentSearchValue.set('');
+                this.currentSearchTerm = null;
+                await this.resetSearch();
+            }
+            return;
+        }
+        // For non-empty search, only process user interactions
+        if (!event.isUserInteraction) {
+            return;
+        }
+        // Prevent concurrent searches
+        if (this.isSearching() && this.currentSearchTerm !== null) {
+            if (this.currentSearchTerm === searchTerm) {
+                return;
+            }
+        }
+        this.currentSearchValue.set(event.value ?? '');
+        this.currentSearchTerm = searchTerm;
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        // Store expanded nodes before starting a new search (only on first search)
+        if (!previousSearchTerm && this.expandedNodesBeforeSearch.length === 0) {
+            const expandedNodes = treeComponent.getExpandedNodes();
+            this.expandedNodesBeforeSearch = expandedNodes
+                .map((node) => String(node['id'] ?? ''))
+                .filter((id) => id && id !== ROOT_NODE_ID);
+        }
+        // Collapse nodes from previous search before starting new search
+        if (previousSearchTerm && this.nodesExpandedDuringSearch.length > 0) {
+            const nodesToCollapse = [...this.nodesExpandedDuringSearch].reverse();
+            this.nodesExpandedDuringSearch = [];
+            for (const nodeId of nodesToCollapse) {
+                // Only collapse if it wasn't originally expanded before search
+                if (!this.expandedNodesBeforeSearch.includes(nodeId)) {
+                    try {
+                        treeComponent.collapseNode(nodeId);
+                    }
+                    catch {
+                        // Node might not exist anymore, ignore
+                    }
+                }
+            }
+        }
+        this.isSearching.set(true);
+        try {
+            // Step 1: Use server-side search to get matching items
+            const searchResults = await this.categoryTreeService.searchCategories(searchTerm, this.treeData, this.treeConfig);
+            // Check if search term changed during the API call
+            if (this.currentSearchTerm !== searchTerm) {
+                return;
+            }
+            if (!searchResults || searchResults.length === 0) {
+                this.matchingNodeIds.clear();
+                this.relevantNodeIds.clear();
+                this.searchResultCount.set(0);
+                await this.updateTranslatedMessages(0);
+                // Clear highlighting and reload tree to show all nodes
+                this.highlightService.clear();
+                await treeComponent.reloadData();
+                return;
+            }
+            // Store matching node IDs from search results
+            this.matchingNodeIds.clear();
+            const valueField = this.valueField();
+            searchResults.forEach((item) => {
+                const nodeId = String(item[valueField] ?? '');
+                if (nodeId) {
+                    this.matchingNodeIds.add(nodeId);
+                }
+            });
+            const resultCount = searchResults.length;
+            this.searchResultCount.set(resultCount);
+            // Update translated messages
+            await this.updateTranslatedMessages(resultCount);
+            // Step 2: Collect parent IDs (builds relevantNodeIds for filtering)
+            const parentsToExpand = await this.collectParentIds(searchResults);
+            // Step 2.5: Collect children IDs if searchWithChildren is enabled
+            if (this.searchWithChildren()) {
+                await this.collectChildrenIds(searchResults);
+            }
+            // Step 3: Reload tree to apply filtering
+            await treeComponent.reloadData();
+            // Step 4: Expand root node
+            if (!treeComponent.isNodeExpanded(ROOT_NODE_ID)) {
+                try {
+                    await treeComponent.expandNode(ROOT_NODE_ID);
+                    this.nodesExpandedDuringSearch.push(ROOT_NODE_ID);
+                }
+                catch {
+                    // Root might not exist
+                }
+            }
+            // Step 4: Expand all parent nodes in order (from root to leaves)
+            // Sort parents by their depth to expand in correct order
+            const sortedParents = await this.sortParentsByDepth(Array.from(parentsToExpand));
+            for (const parentId of sortedParents) {
+                // Only expand if not already expanded
+                if (!treeComponent.isNodeExpanded(parentId)) {
+                    try {
+                        await treeComponent.expandNode(parentId);
+                        this.nodesExpandedDuringSearch.push(parentId);
+                        // Small delay to prevent overwhelming the tree component
+                        await new Promise((resolve) => setTimeout(resolve, 10));
+                    }
+                    catch {
+                        // Node might not exist, ignore
+                    }
+                }
+            }
+            // Step 5: Apply highlighting after tree is rendered
+            // Use setTimeout to ensure DOM is updated after tree reload
+            setTimeout(() => {
+                if (this.currentSearchValue().trim()) {
+                    this.highlightService.highlight('ax-tree-view .ax-truncate', this.currentSearchValue().trim());
+                }
+            }, 100);
+        }
+        catch (error) {
+            console.error('Error searching categories:', error);
+            this.matchingNodeIds.clear();
+            this.relevantNodeIds.clear();
+            this.searchResultCount.set(0);
+            this.highlightService.clear();
+            // Reload tree to clear any filters
+            const treeComponent = this.tree();
+            if (treeComponent) {
+                await treeComponent.reloadData();
+            }
+        }
+        finally {
+            if (this.currentSearchTerm === searchTerm) {
+                this.currentSearchTerm = null;
+            }
+            this.isSearching.set(false);
+        }
+    }
+    /**
+     * Collects all parent IDs for the given search results
+     * Handles both nested 'parent' object and 'parentId' field in search results
+     * Recursively fetches parent nodes to build the full parent chain
+     */
+    async collectParentIds(items) {
+        const parentsToExpand = new Set();
+        const valueField = this.valueField();
+        const parentKey = this.treeData?.categoryEntityDef?.parentKey || 'parentId';
+        // Build relevantNodeIds = matching nodes + all parents
+        this.relevantNodeIds.clear();
+        this.matchingNodeIds.forEach((id) => this.relevantNodeIds.add(id));
+        // Recursively extract all parent IDs
+        const extractParentIds = async (item) => {
+            // First, try to get parent from nested 'parent' object (if available)
+            const parent = item['parent'];
+            if (parent) {
+                const parentId = String(parent[valueField] ?? parent['id'] ?? '');
+                if (parentId && parentId !== ROOT_NODE_ID) {
+                    parentsToExpand.add(parentId);
+                    this.relevantNodeIds.add(parentId); // Add to filter set
+                    this.nodeDataCache.set(parentId, parent);
+                    await extractParentIds(parent);
+                }
+            }
+            else {
+                // Fallback: use parentId field and fetch parent from server
+                // Try both parentKey from entity definition and common 'parentId' field
+                const parentIdValue = item[parentKey] ?? item['parentId'];
+                if (parentIdValue) {
+                    const parentId = String(parentIdValue);
+                    if (parentId && parentId !== ROOT_NODE_ID) {
+                        // Add to sets first
+                        parentsToExpand.add(parentId);
+                        this.relevantNodeIds.add(parentId);
+                        // Fetch parent from server if not already cached
+                        if (!this.nodeDataCache.has(parentId)) {
+                            const parentItem = await this.fetchItemById(parentId);
+                            if (parentItem) {
+                                this.nodeDataCache.set(parentId, parentItem);
+                                // Recursively fetch parent's parent
+                                await extractParentIds(parentItem);
+                            }
+                        }
+                        else {
+                            // Parent already in cache, recursively process it
+                            const cachedParent = this.nodeDataCache.get(parentId);
+                            if (cachedParent) {
+                                await extractParentIds(cachedParent);
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        // Process all items
+        for (const item of items) {
+            await extractParentIds(item);
+        }
+        return parentsToExpand;
+    }
+    /**
+     * Collects children IDs for matching search results recursively
+     * Adds all descendants (children, grandchildren, etc.) to relevantNodeIds so they appear in the filtered tree
+     */
+    async collectChildrenIds(items) {
+        if (!this.treeData?.categoryEntityQueryFunc || !this.treeConfig) {
+            return;
+        }
+        const valueField = this.valueField();
+        const parentKey = this.treeData.categoryEntityDef?.parentKey;
+        if (!parentKey) {
+            return;
+        }
+        // For each matching node, recursively fetch all its descendants
+        for (const item of items) {
+            const nodeId = String(item[valueField] ?? '');
+            if (!nodeId || nodeId === ROOT_NODE_ID) {
+                continue;
+            }
+            await this.collectChildrenRecursively(nodeId, valueField, parentKey);
+        }
+    }
+    /**
+     * Recursively collects all descendant IDs for a given node
+     */
+    async collectChildrenRecursively(nodeId, valueField, parentKey) {
+        if (!this.treeData?.categoryEntityQueryFunc) {
+            return;
+        }
+        try {
+            // Fetch children for this node
+            const event = {
+                ...this.treeData.basicQueryEvent,
+                filter: {
+                    field: parentKey,
+                    value: nodeId,
+                    operator: { type: 'equal' },
+                },
+            };
+            const res = await this.treeData.categoryEntityQueryFunc(event);
+            if (res?.items && res.items.length > 0) {
+                // Add children IDs to relevantNodeIds so they appear in filtered tree
+                for (const child of res.items) {
+                    const childId = String(child[valueField] ?? '');
+                    if (childId && childId !== ROOT_NODE_ID) {
+                        this.relevantNodeIds.add(childId);
+                        // Cache child data
+                        this.nodeDataCache.set(childId, child);
+                        // Recursively fetch children of this child
+                        await this.collectChildrenRecursively(childId, valueField, parentKey);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error(`Error fetching children for node ${nodeId}:`, error);
+        }
+    }
+    /**
+     * Fetches a single item by ID from the server
+     */
+    async fetchItemById(id) {
+        if (!this.treeData?.categoryEntityQueryFunc) {
+            return null;
+        }
+        try {
+            const valueField = this.valueField();
+            const event = {
+                ...this.treeData.basicQueryEvent,
+                filter: {
+                    field: valueField,
+                    value: id,
+                    operator: { type: 'equal' },
+                },
+            };
+            const res = await this.treeData.categoryEntityQueryFunc(event);
+            return res?.items?.[0] ?? null;
+        }
+        catch (error) {
+            console.error('Error fetching item by ID:', error);
+            return null;
+        }
+    }
+    /**
+     * Sorts parent IDs by their depth (root first, leaves last)
+     * Uses cached data from collectParentIds
+     */
+    async sortParentsByDepth(parentIds) {
+        const parentKey = this.treeData?.categoryEntityDef?.parentKey;
+        if (!parentKey || parentIds.length === 0) {
+            return parentIds;
+        }
+        // Build depth map using cached data
+        const depthMap = new Map();
+        for (const parentId of parentIds) {
+            if (depthMap.has(parentId)) {
+                continue;
+            }
+            let depth = 0;
+            let currentId = parentId;
+            const visited = new Set();
+            while (currentId && currentId !== ROOT_NODE_ID && !visited.has(currentId)) {
+                visited.add(currentId);
+                depth++;
+                // Use nodeDataCache which was populated by collectParentIds
+                const item = this.nodeDataCache.get(currentId);
+                if (item) {
+                    currentId = item[parentKey] ? String(item[parentKey]) : null;
+                }
+                else {
+                    break;
+                }
+            }
+            depthMap.set(parentId, depth);
+        }
+        // Sort by depth (lower depth = closer to root = expand first)
+        return parentIds.sort((a, b) => {
+            const depthA = depthMap.get(a) ?? 0;
+            const depthB = depthMap.get(b) ?? 0;
+            return depthA - depthB;
+        });
+    }
+    /**
+     * Updates translated messages for search results
+     */
+    async updateTranslatedMessages(resultCount) {
+        if (resultCount > 0) {
+            const key = resultCount === 1
+                ? '@general:terms.interface.category.search.results-found.singular'
+                : '@general:terms.interface.category.search.results-found.plural';
+            const text = await this.translate.translateAsync(key, { params: { count: resultCount } });
+            this.resultsFoundText.set(text);
+        }
+        else {
+            this.resultsFoundText.set('');
+        }
+    }
+    /**
+     * Resets search state and restores tree to original expanded state
+     */
+    async resetSearch() {
+        this.searchResultCount.set(0);
+        this.resultsFoundText.set('');
+        this.currentSearchTerm = null;
+        this.isSearching.set(false);
+        this.matchingNodeIds.clear();
+        this.relevantNodeIds.clear();
+        this.nodeDataCache.clear();
+        // Clear highlighting
+        this.highlightService.clear();
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            this.expandedNodesBeforeSearch = [];
+            this.nodesExpandedDuringSearch = [];
+            return;
+        }
+        // Reload tree to show all nodes (no filtering)
+        await treeComponent.reloadData();
+        // Collapse nodes that were expanded during search (in reverse order - leaves first)
+        const nodesToCollapse = [...this.nodesExpandedDuringSearch].reverse();
+        this.nodesExpandedDuringSearch = [];
+        for (const nodeId of nodesToCollapse) {
+            // Only collapse if it wasn't originally expanded before search
+            if (!this.expandedNodesBeforeSearch.includes(nodeId)) {
+                try {
+                    treeComponent.collapseNode(nodeId);
+                }
+                catch {
+                    // Node might not exist anymore, ignore
+                }
+            }
+        }
+        // Clear the stored expanded nodes
+        this.expandedNodesBeforeSearch = [];
+    }
+    /**
+     * Checks if a node matches the current search term
+     */
+    isMatchingNode(nodeId) {
+        return this.matchingNodeIds.has(nodeId);
+    }
+    /**
+     * Handles node click events to apply category filters and track selected category for create command
+     */
+    handleNodeClick(node) {
+        const nodeData = this.extractNodeData(node);
+        const applyConditions = this.vm().entityDef.category?.applyConditions || [];
+        const valueField = this.valueField();
+        const textField = this.textField();
+        const nodeId = String(nodeData[valueField] ?? node['id'] ?? '');
+        // Track selected category for default category when creating new entities
+        if (nodeId === 'all' || !nodeId) {
+            this.vm().setSelectedCategory(null);
+        }
+        else {
+            this.vm().setSelectedCategory({
+                id: nodeId,
+                title: String(nodeData[textField] ?? node['title'] ?? ''),
+            });
+        }
+        const categoryFilters = this.buildCategoryFilters(nodeData, applyConditions);
+        const viewFilters = this.buildViewFilters();
+        this.vm().dataSource.filter({
+            filters: [...viewFilters, ...categoryFilters],
+            logic: 'and',
+        });
+        this.vm().dataSource.refresh();
+    }
+    /**
+     * Handles node toggle events (expansion/collapse)
+     */
+    async onNodeToggle(_event) {
+        // Tree component handles lazy loading via datasource callback
+    }
+    //#endregion
+    //#region ----   CRUD Operations   ----
+    /**
+     * Creates a new root category node (uses Entity:Create command).
+     */
+    async handleCreateRootClick(event) {
+        this.preventDefaultAndStopPropagation(event);
+        try {
+            const result = await this.executeCreateCommand(undefined);
+            await this.applyCreateResult(result, undefined);
+        }
+        catch (error) {
+            console.error('Error creating root category:', error);
+        }
+    }
+    /**
+     * Creates a new child category under the given parent node (uses Entity:Create command).
+     */
+    async handleCreateChildClick(node, event) {
+        this.preventDefaultAndStopPropagation(event);
+        try {
+            const parentId = this.extractNodeId(node);
+            const result = await this.executeCreateCommand(parentId);
+            await this.applyCreateResult(result, parentId);
+        }
+        catch (error) {
+            console.error('Error creating child category:', error);
+        }
+    }
+    /**
+     * Updates an existing category node (uses Entity:Update command).
+     */
+    async handleEditNodeClick(node, event) {
+        this.preventDefaultAndStopPropagation(event);
+        try {
+            const nodeData = this.extractNodeData(node);
+            const result = await this.executeUpdateCommand(nodeData);
+            await this.applyUpdateResult(result, node);
+        }
+        catch (error) {
+            console.error('Error editing category:', error);
+        }
+    }
+    /**
+     * Deletes a category node
+     */
+    async handleDeleteNodeClick(node, event) {
+        this.preventDefaultAndStopPropagation(event);
+        try {
+            const nodeData = this.extractNodeData(node);
+            const context = await this.executeDeleteWorkflow(nodeData);
+            await this.handleDeleteResult(context, node);
+        }
+        catch (error) {
+            console.error('Error deleting category:', error);
+        }
+    }
+    //#endregion
+    //#region ----   Private Tree Management Methods   ----
+    /**
+     * Initializes the category tree data structure
+     */
+    async initializeTree() {
+        this.setLoadingWithDelay(true);
+        try {
+            const entityKey = this.categoryEntityKey();
+            this.treeConfig = {
+                entityKey,
+                textField: this.textField(),
+                valueField: this.valueField(),
+            };
+            this.treeData = await this.categoryTreeService.initializeCategoryTree(this.treeConfig);
+            if (!this.treeData) {
+                this.clearLoadingState();
+                return;
+            }
+            // Set parent key from entity definition
+            if (this.treeData.categoryEntityDef?.parentKey) {
+                this.treeConfig.parentKey = this.treeData.categoryEntityDef.parentKey;
+            }
+        }
+        catch (error) {
+            console.error('Error loading categories:', error);
+        }
+        finally {
+            this.clearLoadingState();
+        }
+    }
+    /**
+     * Loads root nodes for the tree
+     */
+    async loadRootNodes() {
+        if (!this.isTreeInitialized()) {
+            return [];
+        }
+        // Load root categories
+        const items = await this.categoryTreeService.loadRootCategories(this.treeData, this.treeConfig);
+        if (!items) {
+            return [];
+        }
+        const rootNode = await this.categoryTreeService.createRootNode(items, this.treeConfig);
+        // Filter root's children when search is active
+        if (this.relevantNodeIds.size > 0 && rootNode['children']) {
+            rootNode['children'] = rootNode['children'].filter((child) => {
+                const childId = String(child['id'] ?? '');
+                return this.relevantNodeIds.has(childId);
+            });
+            rootNode['childrenCount'] = rootNode['children'].length;
+        }
+        return [rootNode];
+    }
+    /**
+     * Loads child nodes for a given parent ID
+     */
+    async loadChildNodes(parentId) {
+        if (!this.isTreeInitialized()) {
+            return [];
+        }
+        // Create minimal node object - loadChildren only needs node.id
+        const targetNode = {
+            id: parentId,
+        };
+        let children = await this.categoryTreeService.loadChildren(targetNode, this.treeData, this.treeConfig);
+        // Filter children when search is active
+        if (this.relevantNodeIds.size > 0) {
+            children = children.filter((child) => {
+                const childId = String(child['id'] ?? '');
+                return this.relevantNodeIds.has(childId);
+            });
+        }
+        return children;
+    }
+    /**
+     * Refreshes the tree view component
+     */
+    refreshTree() {
+        const treeComponent = this.tree();
+        if (treeComponent) {
+            treeComponent.refresh();
+        }
+    }
+    /**
+     * Refreshes tree after CRUD operations
+     */
+    async refreshAfterChange(parentId) {
+        this.refreshTree();
+    }
+    /**
+     * Adds a new node to the tree after create operation
+     */
+    async addNodeToTree(entityData, parentId) {
+        if (!this.isTreeInitialized()) {
+            return;
+        }
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        const newNode = this.categoryTreeService.convertToTreeNode(entityData, this.treeConfig);
+        if (parentId) {
+            await this.addChildNode(treeComponent, parentId, newNode);
+        }
+        else {
+            await this.addRootNode(treeComponent, newNode);
+        }
+    }
+    /**
+     * Adds a child node to a parent node
+     */
+    async addChildNode(treeComponent, parentId, newNode) {
+        const parentNode = treeComponent.findNode(parentId);
+        if (!parentNode) {
+            await this.refreshAfterChange(parentId);
+            return;
+        }
+        if (!treeComponent.isNodeExpanded(parentId)) {
+            await treeComponent.expandNode(parentId);
+        }
+        treeComponent.addChild(parentId, newNode);
+    }
+    /**
+     * Adds a root node to the tree
+     */
+    async addRootNode(treeComponent, newNode) {
+        const rootNode = treeComponent.findNode(ROOT_NODE_ID);
+        if (!rootNode) {
+            await this.refreshAfterChange();
+            return;
+        }
+        if (!treeComponent.isNodeExpanded(ROOT_NODE_ID)) {
+            await treeComponent.expandNode(ROOT_NODE_ID);
+        }
+        treeComponent.addChild(ROOT_NODE_ID, newNode);
+    }
+    /**
+     * Updates an existing node in the tree after edit operation
+     */
+    async updateNodeInTree(nodeId, entityData) {
+        if (!this.isTreeInitialized()) {
+            return;
+        }
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        const existingNode = treeComponent.findNode(nodeId);
+        if (!existingNode) {
+            await this.refreshNodeParent(entityData);
+            return;
+        }
+        // Check if parent changed
+        const parentKey = this.treeData?.categoryEntityDef?.parentKey;
+        let newParentId = undefined;
+        if (parentKey && entityData[parentKey]) {
+            const parentValue = String(entityData[parentKey]);
+            // 'all' means root, so treat it as undefined
+            newParentId = parentValue !== 'all' && parentValue !== '' ? parentValue : undefined;
+        }
+        const currentParent = treeComponent.getParent(nodeId);
+        const currentParentId = currentParent ? String(currentParent['id'] ?? '') : undefined;
+        // Normalize current parent: 'all' means root (undefined)
+        const normalizedCurrentParentId = currentParentId === 'all' || currentParentId === '' ? undefined : currentParentId;
+        // Handle parent change: move node to new parent if parent changed
+        if (newParentId !== normalizedCurrentParentId) {
+            // If parent changed, move the node first
+            const moved = treeComponent.moveNode(nodeId, newParentId);
+            if (!moved) {
+                // If move failed, refresh the tree to ensure consistency
+                await this.refreshNodeParent(entityData);
+                return;
+            }
+            // After moving, we need to ensure the new parent is expanded
+            if (newParentId) {
+                if (!treeComponent.isNodeExpanded(newParentId)) {
+                    await treeComponent.expandNode(newParentId);
+                }
+            }
+            else {
+                // Moving to root - ensure root is expanded
+                if (!treeComponent.isNodeExpanded(ROOT_NODE_ID)) {
+                    await treeComponent.expandNode(ROOT_NODE_ID);
+                }
+            }
+        }
+        // Update node properties (title, data, etc.)
+        const updatedNode = this.categoryTreeService.convertToTreeNode(entityData, this.treeConfig);
+        const updates = {
+            ['title']: updatedNode['title'],
+            ['data']: updatedNode['data'],
+            ['childrenCount']: updatedNode['childrenCount'],
+            ['icon']: updatedNode['icon'],
+        };
+        treeComponent.editNode(nodeId, updates);
+    }
+    /**
+     * Removes a node from the tree after delete operation
+     */
+    async removeNodeFromTree(nodeId) {
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        const nodeToDelete = treeComponent.findNode(nodeId);
+        if (!nodeToDelete) {
+            await this.refreshAfterChange();
+            return;
+        }
+        treeComponent.removeNode(nodeId);
+    }
+    //#endregion
+    //#region ----   Entity CRUD (Commands)   ----
+    /**
+     * Executes Entity:Create command for category (standard command-based create).
+     */
+    async executeCreateCommand(parentId) {
+        const entityKey = this.categoryEntityKey();
+        const [moduleName, entityName] = entityKey.split('.');
+        const entityRef = await this.entityRegistry.resolve(moduleName, entityName);
+        const data = {};
+        if (parentId && this.treeData?.categoryEntityDef?.parentKey) {
+            data[this.treeData.categoryEntityDef.parentKey] = parentId;
+        }
+        const createCategoryTitle = await this.translate.translateAsync('@general:actions.create-category.title');
+        const result = await this.commandService.execute('Entity:Create', {
+            __context__: {
+                entity: entityKey,
+                entityInfo: {
+                    name: entityRef.name,
+                    module: entityRef.module,
+                    title: entityRef.title ?? entityRef.formats?.individual ?? '',
+                    parentKey: entityRef.parentKey,
+                },
+                data: Object.keys(data).length > 0 ? data : undefined,
+                options: {
+                    process: { redirect: false, canCreateNewOne: !!parentId },
+                    decoration: { header: { title: createCategoryTitle } },
+                },
+            },
+        });
+        return result ?? { success: false };
+    }
+    /**
+     * Executes Entity:Update command for category (standard command-based update).
+     */
+    async executeUpdateCommand(nodeData) {
+        const entityKey = this.categoryEntityKey();
+        const [moduleName, entityName] = entityKey.split('.');
+        const entityRef = await this.entityRegistry.resolve(moduleName, entityName);
+        const result = await this.commandService.execute('Entity:Update', {
+            __context__: {
+                entity: entityKey,
+                entityInfo: {
+                    name: entityRef.name,
+                    module: entityRef.module,
+                    title: entityRef.title ?? entityRef.formats?.individual ?? '',
+                    parentKey: entityRef.parentKey,
+                },
+                data: nodeData,
+                options: { layout: { size: 'md' } },
+            },
+        });
+        return result ?? { success: false };
+    }
+    /**
+     * Applies create command result to the tree (add node or refresh).
+     */
+    async applyCreateResult(result, parentId) {
+        if (!result.success || !this.isTreeInitialized()) {
+            await this.refreshAfterChange(parentId);
+            return;
+        }
+        const newEntityData = result.data;
+        if (newEntityData) {
+            await this.addNodeToTree(newEntityData, parentId);
+        }
+        else {
+            await this.refreshAfterChange(parentId);
+        }
+    }
+    /**
+     * Applies update command result to the tree (update node or refresh).
+     */
+    async applyUpdateResult(result, node) {
+        if (!result.success || !this.isTreeInitialized()) {
+            await this.refreshNodeParent(this.extractNodeData(node));
+            return;
+        }
+        const updatedEntityData = result.data;
+        if (updatedEntityData) {
+            await this.updateNodeInTree(this.extractNodeId(node), updatedEntityData);
+        }
+        else {
+            await this.refreshNodeParent(this.extractNodeData(node));
+        }
+    }
+    //#endregion
+    //#region ----   Delete (Workflow)   ----
+    /**
+     * Executes delete-entity workflow (platform has no Entity:Delete command).
+     */
+    async executeDeleteWorkflow(nodeData) {
+        return await this.workflow.execute('delete-entity', {
+            entity: this.categoryEntityKey(),
+            data: nodeData,
+            options: { process: { showResult: true } },
+        });
+    }
+    /**
+     * Handles the result of a delete operation
+     */
+    async handleDeleteResult(context, node) {
+        const result = context.getOutput('result');
+        if (result) {
+            await this.removeNodeFromTree(this.extractNodeId(node));
+        }
+        else {
+            await this.refreshNodeParent(this.extractNodeData(node));
+        }
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    /**
+     * Checks if tree data and config are initialized
+     */
+    isTreeInitialized() {
+        return !!(this.treeData && this.treeConfig);
+    }
+    /**
+     * Extracts node data from a tree node
+     */
+    extractNodeData(node) {
+        return (node['data'] || node);
+    }
+    /**
+     * Extracts node ID from a tree node
+     */
+    extractNodeId(node) {
+        return String(node['id'] ?? '');
+    }
+    /**
+     * Builds category filters from node data and apply conditions
+     */
+    buildCategoryFilters(nodeData, applyConditions) {
+        return applyConditions
+            .map((condition) => {
+            const value = nodeData[condition.value];
+            if (value === 'all' || value == null) {
+                return null;
+            }
+            return {
+                field: condition.name,
+                value,
+                operator: condition.operator,
+            };
+        })
+            .filter((item) => item !== null);
+    }
+    /**
+     * Builds view filters from view conditions
+     */
+    buildViewFilters() {
+        return this.vm()
+            .view()
+            .conditions.map((condition) => ({ ...condition, field: condition.name }));
+    }
+    /**
+     * Refreshes the parent node of the given entity data
+     */
+    async refreshNodeParent(entityData) {
+        const parentKey = this.treeData?.categoryEntityDef?.parentKey;
+        const parentId = parentKey && entityData[parentKey] ? entityData[parentKey] : undefined;
+        await this.refreshAfterChange(parentId);
+    }
+    /**
+     * Prevents default behavior and stops event propagation
+     */
+    preventDefaultAndStopPropagation(event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
+    }
+    //#endregion
+    //#region ----   Loading State Management   ----
+    /**
+     * Sets loading state with delay to avoid flickering for fast responses
+     */
+    setLoadingWithDelay(loading) {
+        if (!loading) {
+            return;
+        }
+        if (this.loadingTimeoutId) {
+            clearTimeout(this.loadingTimeoutId);
+        }
+        this.loadingTimeoutId = setTimeout(() => {
+            this.isLoading.set(true);
+            this.loadingTimeoutId = null;
+        }, LOADING_DELAY_MS);
+    }
+    /**
+     * Clears loading state and cancels any pending timeout
+     */
+    clearLoadingState() {
+        if (this.loadingTimeoutId) {
+            clearTimeout(this.loadingTimeoutId);
+            this.loadingTimeoutId = null;
+        }
+        this.isLoading.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, searchWithChildren: { classPropertyName: "searchWithChildren", publicName: "searchWithChildren", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n    }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-w-full\">\n      <ax-search-box (onValueChanged)=\"handleCategorySearchChange($event)\" [delayTime]=\"300\"\n        [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\">\n      </ax-search-box>\n      @if (isSearching() && currentSearchValue().trim()) {\n      <div class=\"ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1\">\n        <span>{{ '@general:terms.interface.category.search.searching' | translate | async }}</span>\n      </div>\n      } @else if (currentSearchValue().trim() && !isSearching()) {\n      <div class=\"ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1\">\n        @if (searchResultCount() > 0) {\n        <span>{{ resultsFoundText() }}</span>\n        }\n      </div>\n      }\n    </div>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if (isLoading()) {\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  } @else if (showNoSearchResults()) {\n  <div class=\"__empty-state\">\n    <axp-state-message icon=\"fa-light fa-search\"\n      [title]=\"'@general:terms.interface.category.search.no-results-found.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-results-found.description'\">\n    </axp-state-message>\n  </div>\n  } @else if (treeData) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view [datasource]=\"datasource\" [selectMode]=\"selectMode()\" [selectionBehavior]=\"selectionBehavior()\"\n      [dragArea]=\"dragArea()\" [dragBehavior]=\"dragBehavior()\" [showIcons]=\"showIcons()\"\n      [showChildrenBadge]=\"showChildrenBadge()\" [expandedIcon]=\"expandedIcon()\" [collapsedIcon]=\"collapsedIcon()\"\n      [indentSize]=\"indentSize()\" [look]=\"look()\" [titleField]=\"textField()\" [idField]=\"valueField()\"\n      [expandOnDoubleClick]=\"true\" [nodeTemplate]=\"itemTemplate\" (onNodeToggle)=\"onNodeToggle($event)\"\n      (onNodeClick)=\"handleNodeClick($event.node)\" #tree>\n    </ax-tree-view>\n  </div>\n  } @else {\n  <div class=\"__empty-state\">\n    <axp-state-message icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-records.description'\">\n      @if (!categoryReadonly()) {\n      <ax-button slot=\"actions\" (onClick)=\"handleCreateRootClick($event)\" look=\"solid\" color=\"primary\"\n        [text]=\"'@general:actions.add-new.title' | translate | async\">\n        <ax-icon class=\"fas fa-plus\"></ax-icon>\n      </ax-button>\n      }\n    </axp-state-message>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n    @let item = node.data || node;\n    @let textField = vm().entityDef.category?.textField || 'title';\n    @let valueField = vm().entityDef.category?.valueField || 'id';\n    @let itemId = item[valueField] || node.id;\n    @let rawLabel = item[textField] || node.title;\n    @let itemTitle = rawLabel | axpResolveMultiLanguageString;\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden ax-py-1\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"></ax-icon>\n        <span class=\"ax-truncate\">\n          @if (itemId === 'all') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ itemTitle }}\n          }\n        </span>\n      </div>\n      @if (itemId && itemId !== 'all' && !categoryReadonly()) {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n          <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item (onClick)=\"handleCreateChildClick(node, $event)\" look=\"blank\" color=\"default\"\n                [text]=\"('@general:actions.add-new-child.title' | translate | async)!\">\n                <ax-icon class=\"fas fa-plus\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleEditNodeClick(node, $event)\" look=\"blank\"\n                [text]=\"('@general:actions.edit.title' | translate | async)!\">\n                <ax-icon class=\"fas fa-pen\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleDeleteNodeClick(node, $event)\" color=\"danger\" look=\"blank\"\n                [text]=\"('@general:actions.delete.title' | translate | async)!\">\n                <ax-icon class=\"fas fa-trash\"></ax-icon>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n      } @else if (itemId === 'all' && !categoryReadonly()) {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { 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: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXPResolveMultiLanguageStringPipe, name: "axpResolveMultiLanguageString" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-category', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXTreeViewModule,
+                        AXTreeViewComponent,
+                        AXSkeletonModule,
+                        AXPThemeLayoutBlockComponent,
+                        AXSearchBoxModule,
+                        AXPThemeLayoutHeaderComponent,
+                        AXPThemeLayoutToolbarComponent,
+                        AXTranslationModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        AXPStateMessageComponent,
+                        AXPResolveMultiLanguageStringPipe
+                    ], template: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n    }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-w-full\">\n      <ax-search-box (onValueChanged)=\"handleCategorySearchChange($event)\" [delayTime]=\"300\"\n        [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\">\n      </ax-search-box>\n      @if (isSearching() && currentSearchValue().trim()) {\n      <div class=\"ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1\">\n        <span>{{ '@general:terms.interface.category.search.searching' | translate | async }}</span>\n      </div>\n      } @else if (currentSearchValue().trim() && !isSearching()) {\n      <div class=\"ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1\">\n        @if (searchResultCount() > 0) {\n        <span>{{ resultsFoundText() }}</span>\n        }\n      </div>\n      }\n    </div>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if (isLoading()) {\n  <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n  </div>\n  } @else if (showNoSearchResults()) {\n  <div class=\"__empty-state\">\n    <axp-state-message icon=\"fa-light fa-search\"\n      [title]=\"'@general:terms.interface.category.search.no-results-found.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-results-found.description'\">\n    </axp-state-message>\n  </div>\n  } @else if (treeData) {\n  <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n    <ax-tree-view [datasource]=\"datasource\" [selectMode]=\"selectMode()\" [selectionBehavior]=\"selectionBehavior()\"\n      [dragArea]=\"dragArea()\" [dragBehavior]=\"dragBehavior()\" [showIcons]=\"showIcons()\"\n      [showChildrenBadge]=\"showChildrenBadge()\" [expandedIcon]=\"expandedIcon()\" [collapsedIcon]=\"collapsedIcon()\"\n      [indentSize]=\"indentSize()\" [look]=\"look()\" [titleField]=\"textField()\" [idField]=\"valueField()\"\n      [expandOnDoubleClick]=\"true\" [nodeTemplate]=\"itemTemplate\" (onNodeToggle)=\"onNodeToggle($event)\"\n      (onNodeClick)=\"handleNodeClick($event.node)\" #tree>\n    </ax-tree-view>\n  </div>\n  } @else {\n  <div class=\"__empty-state\">\n    <axp-state-message icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-records.description'\">\n      @if (!categoryReadonly()) {\n      <ax-button slot=\"actions\" (onClick)=\"handleCreateRootClick($event)\" look=\"solid\" color=\"primary\"\n        [text]=\"'@general:actions.add-new.title' | translate | async\">\n        <ax-icon class=\"fas fa-plus\"></ax-icon>\n      </ax-button>\n      }\n    </axp-state-message>\n  </div>\n  }\n\n  <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n    @let item = node.data || node;\n    @let textField = vm().entityDef.category?.textField || 'title';\n    @let valueField = vm().entityDef.category?.valueField || 'id';\n    @let itemId = item[valueField] || node.id;\n    @let rawLabel = item[textField] || node.title;\n    @let itemTitle = rawLabel | axpResolveMultiLanguageString;\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden ax-py-1\">\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon class=\"fas fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"></ax-icon>\n        <span class=\"ax-truncate\">\n          @if (itemId === 'all') {\n            {{ categoryTreeRootTitleI18nKey | translate | async }}\n          } @else {\n            {{ itemTitle }}\n          }\n        </span>\n      </div>\n      @if (itemId && itemId !== 'all' && !categoryReadonly()) {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n          <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n          <ax-dropdown-panel>\n            <ax-button-item-list>\n              <ax-button-item (onClick)=\"handleCreateChildClick(node, $event)\" look=\"blank\" color=\"default\"\n                [text]=\"('@general:actions.add-new-child.title' | translate | async)!\">\n                <ax-icon class=\"fas fa-plus\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleEditNodeClick(node, $event)\" look=\"blank\"\n                [text]=\"('@general:actions.edit.title' | translate | async)!\">\n                <ax-icon class=\"fas fa-pen\"></ax-icon>\n              </ax-button-item>\n              <ax-button-item (onClick)=\"handleDeleteNodeClick(node, $event)\" color=\"danger\" look=\"blank\"\n                [text]=\"('@general:actions.delete.title' | translate | async)!\">\n                <ax-icon class=\"fas fa-trash\"></ax-icon>\n              </ax-button-item>\n            </ax-button-item-list>\n          </ax-dropdown-panel>\n        </ax-button>\n      </div>\n      } @else if (itemId === 'all' && !categoryReadonly()) {\n      <div class=\"ax-flex ax-items-center ax-gap-1\">\n        <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n          <ax-icon class=\"fas fa-plus\"></ax-icon>\n        </ax-button>\n      </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>" }]
+        }], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], searchWithChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchWithChildren", required: false }] }] } });
+
+class AXPEntityMasterToolbarViewComponent {
+    constructor() {
+        this.layoutService = inject(AXPLayoutThemeService);
+        this.deviceService = inject(AXPDeviceService);
+        this.parent = inject(AXPEntityMasterListViewComponent);
+        this.router = inject(Router);
+        this.activeRoute = inject(ActivatedRoute);
+        this.settingsService = inject(AXPSettingsService);
+        this.isInitializing = false;
+        this.pendingInitialFilters = true;
+        this.pendingInitialSorts = true;
+        this.filterTriggerMode = 'manual';
+        this.previousFilterQueries = signal([], ...(ngDevMode ? [{ debugName: "previousFilterQueries" }] : /* istanbul ignore next */ []));
+        this.initialFilters = signal([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : /* istanbul ignore next */ []));
+        this.filtersDefinitions = signal([], ...(ngDevMode ? [{ debugName: "filtersDefinitions" }] : /* istanbul ignore next */ []));
+        this.viewQueries = computed(() => this.vm.views().map((v) => ({
+            name: v.name,
+            fixed: false,
+            title: v.title,
+            columns: v.columns,
+            conditions: v.conditions.map((c) => ({
+                field: c.name,
+                operator: c.operator,
+                value: c.value,
+            })),
+            sorts: v.sorts,
+        })), ...(ngDevMode ? [{ debugName: "viewQueries" }] : /* istanbul ignore next */ []));
+        this.selectedViewQuery = computed(() => ({
+            name: this.vm.view().name,
+            fixed: false,
+            title: this.vm.view().title,
+            columns: this.vm.view().columns,
+            conditions: this.vm.view().conditions.map((c) => ({
+                field: c.name,
+                operator: c.operator,
+                value: c.value,
+            })),
+            sorts: this.vm.view().sorts,
+        }), ...(ngDevMode ? [{ debugName: "selectedViewQuery" }] : /* istanbul ignore next */ []));
+        this.isFiltersDirty = computed(() => !isEqual(this.vm.filterQueries(), this.previousFilterQueries()), ...(ngDevMode ? [{ debugName: "isFiltersDirty" }] : /* istanbul ignore next */ []));
+        // Debounced apply to coalesce multiple UI changes (filters/sorts/columns)
+        this.applyTimer = null;
+        this.#effect = effect(() => {
+            // Keep definitions up to date; initial filters are set explicitly from settings or view
+            this.filtersDefinitions.set(this.vm.filtersDef);
+        }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
+        this.sortQueries = computed(() => this.vm
+            .sortedFields()
+            .filter((s) => !!s.dir)
+            .map((s) => ({ name: s.name, dir: s.dir })), ...(ngDevMode ? [{ debugName: "sortQueries" }] : /* istanbul ignore next */ []));
+        this.sortDefinitions = computed(() => this.vm.sortableFields().map((s) => ({
+            name: s.name,
+            title: s.title,
+            dir: s.dir,
+        })), ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : /* istanbul ignore next */ []));
+    }
+    async ngOnInit() {
+        // Prefer saved settings (view/columns/sorts/filters) if available, then apply
+        await this.loadSettings();
+        await this.vm.setView();
+        this.filtersDefinitions.set(this.vm.filtersDef);
+        this.isInitializing = true;
+        // this.pendingInitialFilters = true;
+        // this.pendingInitialSorts = true;
+        this.setInitialFiltersFromSettingsOrView();
+        // Ensure initial load even when filters/sorts are absent
+        setTimeout(() => {
+            this.isInitializing = false;
+            this.scheduleApply();
+        }, 0);
+    }
+    async loadSettings() {
+        const filterTriggerMode = await this.settingsService.get(AXPCommonSettings.EntityFilterApplyMode);
+        this.filterTriggerMode = (filterTriggerMode?.value ?? 'auto');
+    }
+    scheduleApply() {
+        clearTimeout(this.applyTimer);
+        this.applyTimer = setTimeout(() => {
+            this.vm.applyFilterAndSort();
+        }, 50);
+    }
+    async onViewChanged(view) {
+        await this.vm.setView(view.name);
+        // Sync query param immediately on tab change
+        this.router.navigate([], {
+            relativeTo: this.activeRoute,
+            queryParams: { view: view.name },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+        this.isInitializing = true;
+        this.pendingInitialFilters = true;
+        this.pendingInitialSorts = true;
+        this.setInitialFiltersFromSettingsOrView();
+        // Ensure initial load after view change
+        setTimeout(() => {
+            this.isInitializing = false;
+            this.scheduleApply();
+        }, 0);
+    }
+    #effect;
+    setInitialFiltersFromSettingsOrView() {
+        const saved = this.vm.filterQueries();
+        this.previousFilterQueries.set(saved);
+        const viewConditions = this.vm.view().conditions.map((c) => c.name);
+        if (saved && saved.length) {
+            this.initialFilters.set(saved.map((s) => ({ ...s, hidden: viewConditions.includes(s.field) })));
+            return;
+        }
+        this.initialFilters.set(this.vm.view().conditions.map((c) => ({
+            field: c.name,
+            operator: c.operator,
+            value: c.value,
+            hidden: true,
+        })));
+    }
+    onFiltersChanged(filters) {
+        if (this.isInitializing || this.pendingInitialFilters) {
+            this.pendingInitialFilters = false;
+            return;
+        }
+        this.vm.filterQueries.set(filters);
+        if (this.filterTriggerMode === 'auto') {
+            this.applyFilters();
+        }
+    }
+    applyFilters() {
+        this.previousFilterQueries.set(this.vm.filterQueries());
+        this.vm.saveSettings('filters', this.vm.filterQueries());
+        this.scheduleApply();
+    }
+    onSortQueriesChange(e) {
+        if (this.isInitializing || this.pendingInitialSorts) {
+            this.pendingInitialSorts = false;
+            return;
+        }
+        this.vm.sortedFields.set(e.map((s) => ({
+            name: s.name,
+            title: s.name,
+            dir: s.dir,
+        })));
+        // Persist sorts per module/entity/view
+        this.vm.saveSettings('sorts', e);
+        this.scheduleApply();
+    }
+    onColumnsChange(columns) {
+        const keyOf = (c) => c.column?.options?.dataPath ?? c.name;
+        this.vm.columns.update((prev) => {
+            const byKey = new Map(prev.map((c) => [keyOf(c), c]));
+            return columns.map((newColumn) => {
+                const existing = byKey.get(keyOf(newColumn));
+                return new AXPEntityListViewColumnViewModel(existing.property, {
+                    ...existing.column,
+                    options: {
+                        ...existing.column.options,
+                        visible: newColumn.visible,
+                    },
+                });
+            });
+        });
+        // Persist column order/visibility
+        this.vm.onColumnsChanged(this.vm.columns());
+        // Use debounced apply to avoid triple refresh when combined with sorts/filters
+        // this.scheduleApply();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, ngImport: i0, template: "<!-- <axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar> -->\n<axp-query-views\n  id=\"axp-toolbar-view-selector\"\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  <axp-query-filters\n    id=\"axp-toolbar-filters\"\n    [filtersDefinitions]=\"filtersDefinitions()\"\n    [initialFilters]=\"initialFilters()\"\n    (onFiltersChanged)=\"onFiltersChanged($event)\"\n  ></axp-query-filters>\n\n  <div class=\"ax-flex ax-items-center ax-gap-2 md:ax-gap-2\">\n    @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n      <ax-button\n        id=\"axp-toolbar-btn-filter\"\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    <div>\n      <ax-button id=\"axp-toolbar-btn-columns\" [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        id=\"axp-popover-columns\"\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n            <!-- <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns> -->\n          </div>\n        </div>\n      </ax-popover>\n    </div>\n\n    @if (vm.canSort()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-sort\" [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n          <i class=\"fa-light fa-sort-amount-up\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-sort\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"sortButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #popover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.sorts' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <!-- <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting> -->\n              <axp-query-sorts\n                [sortDefinitions]=\"sortDefinitions()\"\n                (sortQueriesChange)=\"onSortQueriesChange($event)\"\n                [initialSortQueries]=\"sortQueries()\"\n              ></axp-query-sorts>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n    @if (deviceService.isSmall()) {\n      <ax-button\n        id=\"axp-toolbar-btn-category\"\n        (onClick)=\"parent.toggleCategoryDrawer()\"\n        [iconOnly]=\"true\"\n        [color]=\"'default'\"\n      >\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryViewsComponent, selector: "axp-query-views", inputs: ["views", "selectedView"], outputs: ["viewsChange", "selectedViewChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-master-toolbar-view', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPQueryFiltersComponent,
+                        AXPopoverModule,
+                        AXPQuerySortsComponent,
+                        AXPQueryViewsComponent,
+                        AXPQueryColumnsComponent,
+                    ], host: {
+                        class: 'ax-w-full',
+                    }, template: "<!-- <axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar> -->\n<axp-query-views\n  id=\"axp-toolbar-view-selector\"\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  <axp-query-filters\n    id=\"axp-toolbar-filters\"\n    [filtersDefinitions]=\"filtersDefinitions()\"\n    [initialFilters]=\"initialFilters()\"\n    (onFiltersChanged)=\"onFiltersChanged($event)\"\n  ></axp-query-filters>\n\n  <div class=\"ax-flex ax-items-center ax-gap-2 md:ax-gap-2\">\n    @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n      <ax-button\n        id=\"axp-toolbar-btn-filter\"\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    <div>\n      <ax-button id=\"axp-toolbar-btn-columns\" [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        id=\"axp-popover-columns\"\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n            <!-- <axp-list-view-option-columns [viewModel]=\"vm\"></axp-list-view-option-columns> -->\n          </div>\n        </div>\n      </ax-popover>\n    </div>\n\n    @if (vm.canSort()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-sort\" [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n          <i class=\"fa-light fa-sort-amount-up\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-sort\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"sortButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #popover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.sorts' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <!-- <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting> -->\n              <axp-query-sorts\n                [sortDefinitions]=\"sortDefinitions()\"\n                (sortQueriesChange)=\"onSortQueriesChange($event)\"\n                [initialSortQueries]=\"sortQueries()\"\n              ></axp-query-sorts>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n    @if (deviceService.isSmall()) {\n      <ax-button\n        id=\"axp-toolbar-btn-category\"\n        (onClick)=\"parent.toggleCategoryDrawer()\"\n        [iconOnly]=\"true\"\n        [color]=\"'default'\"\n      >\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { vm: [{
+                type: Input,
+                args: ['viewModel']
+            }] } });
+
+class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
+    constructor(platform) {
+        super();
+        this.platform = platform;
+        this.activeRoute = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.vm = this.activeRoute.snapshot.data['vm'];
+        //
+        this.store = inject(AXPLayoutThemeService);
+        //
+        this.searchBarShown = signal(true, ...(ngDevMode ? [{ debugName: "searchBarShown" }] : /* istanbul ignore next */ []));
+        this.activeEndSideView = signal('column', ...(ngDevMode ? [{ debugName: "activeEndSideView" }] : /* istanbul ignore next */ []));
+        this.categorySearchValue = signal('', ...(ngDevMode ? [{ debugName: "categorySearchValue" }] : /* istanbul ignore next */ []));
+        // @ViewChild('grid', { static: true}) grid: AXDataTableComponent;
+        this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+        this.initializedFromRoute = false;
+        this.commandRowItems = computed(() => {
+            return this.vm.primaryRowActions().map((c) => {
+                return {
+                    icon: c.icon,
+                    name: c.name,
+                    text: translateSync(c.title),
+                    color: c.color,
+                    disabled: c.disabled,
+                    default: c.default,
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "commandRowItems" }] : /* istanbul ignore next */ []));
+        this.getDropdownRowItems = (rowData) => {
+            return Promise.resolve(this.dropdownRowItems(rowData));
+        };
+        this.getCommandRowItems = () => {
+            return this.commandRowItems();
+        };
+        effect(() => {
+            if (this.grid()) {
+                this.grid().selectedRows = this.vm.selectedItems();
+            }
+        });
+        //
+        this.vm.events$.subscribe(async (e) => {
+            const refreshTargetId = e.meta?.refreshTargetId;
+            const resetPagination = e.meta?.resetPagination === true;
+            if (e.action == 'refresh') {
+                if (refreshTargetId) {
+                    await this.grid()?.refreshItemChildren(refreshTargetId);
+                    this.updateParentHasChildAfterRefresh(refreshTargetId);
+                }
+                else {
+                    this.grid()?.refresh({
+                        reset: resetPagination,
+                    });
+                }
+            }
+        });
+        // Keep URL query param `view` in sync with current vm view
+        effect(() => {
+            if (!this.initializedFromRoute) {
+                return;
+            }
+            const currentViewName = this.vm.view().name;
+            const urlView = this.activeRoute.snapshot.queryParamMap.get('view');
+            if (currentViewName && currentViewName !== urlView) {
+                this.router.navigate([], {
+                    relativeTo: this.activeRoute,
+                    queryParams: { view: currentViewName },
+                    queryParamsHandling: 'merge',
+                    replaceUrl: true,
+                });
+            }
+        });
+    }
+    async ngOnInit() {
+        // React to external URL changes (back/forward navigation or deep links)
+        this.queryParamSub = this.activeRoute.queryParamMap.subscribe(async (qp) => {
+            const viewFromUrl = qp.get('view');
+            await this.vm.setView(viewFromUrl);
+        });
+    }
+    async ngAfterViewInit() {
+        const viewFromUrl = this.activeRoute.snapshot.queryParamMap.get('view');
+        await this.vm.setView(viewFromUrl);
+        const resolvedView = this.vm.view().name;
+        const currentUrlView = this.activeRoute.snapshot.queryParamMap.get('view');
+        if (currentUrlView !== resolvedView) {
+            this.router.navigate([], {
+                relativeTo: this.activeRoute,
+                queryParams: { view: resolvedView },
+                queryParamsHandling: 'merge',
+                replaceUrl: true,
+            });
+        }
+        this.initializedFromRoute = true;
+    }
+    onColumnSizeChanged(e) {
+        if (e.isUserInteraction && e.type === 'end') {
+            this.vm.saveSettings('columnSizes', e.data);
+        }
+    }
+    onPageChanged(e) {
+        if (e.isUserInteraction) {
+            const pageSizeChanged = e.take != this.vm.dataSource.pageSize;
+            if (pageSizeChanged) {
+                this.vm.saveSettings('pageSize', e.take);
+            }
+        }
+    }
+    onColumnsOrderChanged(e) {
+        if (e.isUserInteraction) {
+            this.vm.onColumnsOrderChanged(e.data.event);
+        }
+    }
+    async dropdownRowItems(rowData) {
+        return (await this.vm.secondaryRowActions(rowData)).map((c) => ({
+            icon: c.icon,
+            name: c.name,
+            text: c.title,
+            color: c.color,
+            disabled: c.disabled,
+            default: c.default,
+            divided: c.separated,
+        }));
+    }
+    async handleRowDbClick(e) {
+        if (this.grid()?.dataSource.isLoading) {
+            return;
+        }
+        const allItems = [...this.commandRowItems(), ...(await this.dropdownRowItems(e.data))];
+        // const defaultAction = allItems.find((c) => (c as any).default) || allItems[0];
+        const defaultAction = allItems.find((c) => {
+            const commandName = c.name.split('&')[0];
+            return (c.default || commandName === 'open-entity') && !c.disabled;
+        });
+        if (!defaultAction) {
+            return;
+        }
+        const d = {
+            component: e.component,
+            name: defaultAction.name,
+            data: e.data,
+        };
+        this.handleRowCommandClick(d);
+    }
+    async handleRowCommandClick(e) {
+        if (this.grid()?.dataSource.isLoading) {
+            return;
+        }
+        if (e.setLoading) {
+            e.setLoading(true);
+        }
+        await this.vm.executeCommand(e.name, e.data);
+        if (e.setLoading) {
+            e.setLoading(false);
+        }
+    }
+    async handleSelectedRowsChange(rows) {
+        this.vm.selectedItems.set(rows);
+    }
+    /**
+     * After refreshing a row's children (e.g. when a new child was created), update the parent row's
+     * hasChild so the expand icon is shown. The list query sets hasChild from childrenCount only on
+     * initial load; refreshItemChildren does not re-fetch the parent, so we patch it here.
+     */
+    updateParentHasChildAfterRefresh(parentId) {
+        const gridRef = this.grid();
+        const ds = gridRef?.dataSource;
+        if (!ds?.cachedItems?.length) {
+            return;
+        }
+        const key = ds.config?.key ?? 'id';
+        const parent = this.findItemById(ds.cachedItems, String(parentId), key);
+        if (parent && typeof parent === 'object') {
+            parent['hasChild'] = true;
+        }
+    }
+    findItemById(items, id, key) {
+        for (const item of items) {
+            if (item && typeof item === 'object' && String(item[key]) === id) {
+                return item;
+            }
+            const rec = item;
+            const metaChildren = rec?.['__meta__']?.['children'];
+            const directChildren = rec?.['children'];
+            const childArr = Array.isArray(metaChildren)
+                ? metaChildren
+                : Array.isArray(directChildren)
+                    ? directChildren
+                    : null;
+            if (childArr?.length) {
+                const found = this.findItemById(childArr, id, key);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    makeResponsive(value) {
+        if (this.platform.is('Mobile') || this.platform.is('SM')) {
+            return '';
+        }
+        else {
+            return value;
+        }
+    }
+    toggleSideBar(sideBar) {
+        this.toggleEndSide();
+        if (sideBar) {
+            this.activeEndSideView.set(sideBar);
+        }
+    }
+    toggleSearchBar() {
+        this.searchBarShown.update((v) => !v);
+    }
+    handleResetClick(sideBar) {
+        switch (sideBar) {
+            case 'filter': {
+                this.vm.resetFilters();
+                break;
+            }
+            case 'sort': {
+                this.vm.resetSorts();
+                break;
+            }
+            case 'column': {
+                this.vm.resetColumns();
+                break;
+            }
+        }
+    }
+    // protected handleDiscardClick(sideBar: 'filter' | 'sort' | 'column') {
+    //   switch (sideBar) {
+    //     case 'filter': {
+    //       this.vm.discardFilters();
+    //       break;
+    //     }
+    //     case 'sort': {
+    //       this.vm.resetSorts();
+    //       break;
+    //     }
+    //     case 'column': {
+    //       this.vm.resetColumns();
+    //       break;
+    //     }
+    //   }
+    // }
+    handleApplyClick(sideBar) {
+        this.vm.applyFilterAndSort();
+        this.toggleEndSide();
+    }
+    ngOnDestroy() {
+        this.queryParamSub?.unsubscribe();
+        this.vm.destroy();
+    }
+    toggleCategoryDrawer() {
+        this.toggleStartSide();
+    }
+    getPageTitle() {
+        return this.vm.title();
+    }
+    async getPageDescription() {
+        const description = this.vm.description();
+        if (description) {
+            return this.translateService.translateAsync(description);
+        }
+        return '';
+    }
+    getPageBreadcrumbs() {
+        return this.vm.beardcrumbs();
+    }
+    async getPrimaryMenuItems() {
+        return (await this.vm.getPrimaryActions())
+            .filter((tr) => !tr.isChild)
+            .map((tr) => ({
+            name: tr.name,
+            title: tr.title,
+            icon: tr.icon,
+            color: tr.color,
+            disabled: tr.disabled,
+            items: tr.items?.map((sub) => ({
+                name: sub.name,
+                title: sub.title,
+                icon: sub.icon,
+                color: sub.color,
+                disabled: sub.disabled,
+                command: {
+                    name: sub.name,
+                    options: sub.options,
+                    metadata: sub.metadata,
+                },
+            })),
+            command: {
+                name: tr.name,
+                options: tr.options,
+                metadata: tr.metadata,
+            },
+        }));
+    }
+    async getSecondaryMenuItems() {
+        return (await this.vm.getSecondaryActions()).map((tr) => ({
+            name: tr.name,
+            title: tr.title,
+            icon: tr.icon,
+            color: tr.color,
+            disabled: tr.disabled,
+            separated: tr.separated,
+            command: {
+                name: tr.name,
+                options: tr.options,
+                metadata: tr.metadata,
+            },
+        }));
+    }
+    async execute(command) {
+        if (command) {
+            this.vm.execute(command);
+        }
+    }
+    handleUnselectAll() {
+        this.vm.selectedItems.set([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListViewComponent, deps: [{ token: i1$2.AXPlatform }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListViewComponent, isStandalone: true, selector: "axp-entity-master-list", providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXPEntityMasterListViewComponent,
+            },
+        ], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.entityDef.category) {\n  <axp-layout-start-side id=\"axp-entity-category-drawer\">\n    <axp-entity-category id=\"axp-entity-category\" class=\"ax-w-80\" [vm]=\"vm\"\n      [searchValue]=\"categorySearchValue()\"></axp-entity-category>\n  </axp-layout-start-side>\n  }\n  <axp-page-toolbar id=\"axp-entity-toolbar\">\n    <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-overflow-auto ax-pt-0\">\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1 ax-text-muted ax-text-sm\"\n      [class.ax-invisible]=\"!grid.selectedRows.length\">\n      <span>{{ grid.selectedRows.length }}\n        <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n      </span>\n      <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n    </div>\n    <ax-data-table id=\"axp-entity-table\" [allowReordering]=\"true\"\n      (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\" #grid [showFooter]=\"false\" class=\"ax-flex-1\"\n      [paging]=\"true\" [fetchDataMode]=\"'manual'\" [parentField]=\"vm.parentKey()\"\n      [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"vm.dataSource\"\n      (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowDbClick)=\"handleRowDbClick($event)\"\n      (onColumnSizeChanged)=\"onColumnSizeChanged($event)\" (onPageChanged)=\"onPageChanged($event)\">\n      @if (vm.view().indexCol === true) {\n      <ax-index-column id=\"axp-table-col-index\" fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n      }\n      @if (vm.selectedScopeActionsCount()) {\n      <ax-select-column id=\"axp-table-col-select\" fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n      }\n      @for (col of vm.columns(); track col.name) {\n      @if (col.visible) {\n      <axp-widget-column-renderer [attr.id]=\"'axp-table-col-' + col.name\"\n        [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\" [caption]=\"(col.title | translate | async)!\"\n        [node]=\"col.node()\" [customWidth]=\"col.width\"></axp-widget-column-renderer>\n      }\n      }\n      @if (getCommandRowItems().length) {\n      <ax-command-column id=\"axp-table-col-commands\" fixed=\"end\" [width]=\"getCommandRowItems().length * 70 + 'px'\"\n        [items]=\"getCommandRowItems()\" (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\n      }\n      <ax-dropdown-command-column id=\"axp-table-col-dropdown-commands\" fixed=\"end\" [width]=\"'60px'\"\n        [items]=\"getDropdownRowItems\" (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n    </ax-data-table>\n  </axp-page-content>\n</axp-page-layout>", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-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-entity-master-list axp-layout-header{padding-bottom:.25rem!important}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media(min-width:768px){.view-drawer{width:45vw}}@media(min-width:1024px){.view-drawer{width:35vw}}@media(min-width:1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i7.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "title", "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: i7.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i7.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i7.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i7.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i10.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: 
+                //
+                AXPWidgetCoreModule }, { kind: "component", type: i7$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "component", type: 
+                //
+                AXPEntityMasterToolbarViewComponent, selector: "axp-entity-master-toolbar-view", inputs: ["viewModel"] }, { kind: "component", type: 
+                //
+                AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPEntityCategoryComponent, selector: "axp-entity-category", inputs: ["vm", "searchValue", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "searchWithChildren"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-master-list', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXBadgeModule,
+                        AXDropdownModule,
+                        AXPopoverModule,
+                        AXFormModule,
+                        AXActionSheetModule,
+                        AXDrawerModule,
+                        AXDialogModule,
+                        AXLoadingModule,
+                        AXTabsModule,
+                        AXTooltipModule,
+                        AXBreadcrumbsModule,
+                        AXDropdownButtonModule,
+                        AXSearchBoxModule,
+                        AXDataTableModule,
+                        AXTranslationModule,
+                        DragDropModule,
+                        //
+                        AXPWidgetCoreModule,
+                        AXPWidgetsModule,
+                        AXPAuthModule,
+                        //
+                        AXPEntityMasterToolbarViewComponent,
+                        //
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXDropdownButtonModule,
+                        AXPThemeLayoutStartSideComponent,
+                        AXPEntityCategoryComponent,
+                    ], providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXPEntityMasterListViewComponent,
+                        },
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.entityDef.category) {\n  <axp-layout-start-side id=\"axp-entity-category-drawer\">\n    <axp-entity-category id=\"axp-entity-category\" class=\"ax-w-80\" [vm]=\"vm\"\n      [searchValue]=\"categorySearchValue()\"></axp-entity-category>\n  </axp-layout-start-side>\n  }\n  <axp-page-toolbar id=\"axp-entity-toolbar\">\n    <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-overflow-auto ax-pt-0\">\n    <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1 ax-text-muted ax-text-sm\"\n      [class.ax-invisible]=\"!grid.selectedRows.length\">\n      <span>{{ grid.selectedRows.length }}\n        <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n      </span>\n      <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n    </div>\n    <ax-data-table id=\"axp-entity-table\" [allowReordering]=\"true\"\n      (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\" #grid [showFooter]=\"false\" class=\"ax-flex-1\"\n      [paging]=\"true\" [fetchDataMode]=\"'manual'\" [parentField]=\"vm.parentKey()\"\n      [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"vm.dataSource\"\n      (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowDbClick)=\"handleRowDbClick($event)\"\n      (onColumnSizeChanged)=\"onColumnSizeChanged($event)\" (onPageChanged)=\"onPageChanged($event)\">\n      @if (vm.view().indexCol === true) {\n      <ax-index-column id=\"axp-table-col-index\" fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n      }\n      @if (vm.selectedScopeActionsCount()) {\n      <ax-select-column id=\"axp-table-col-select\" fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n      }\n      @for (col of vm.columns(); track col.name) {\n      @if (col.visible) {\n      <axp-widget-column-renderer [attr.id]=\"'axp-table-col-' + col.name\"\n        [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\" [caption]=\"(col.title | translate | async)!\"\n        [node]=\"col.node()\" [customWidth]=\"col.width\"></axp-widget-column-renderer>\n      }\n      }\n      @if (getCommandRowItems().length) {\n      <ax-command-column id=\"axp-table-col-commands\" fixed=\"end\" [width]=\"getCommandRowItems().length * 70 + 'px'\"\n        [items]=\"getCommandRowItems()\" (onItemClick)=\"handleRowCommandClick($event)\"></ax-command-column>\n      }\n      <ax-dropdown-command-column id=\"axp-table-col-dropdown-commands\" fixed=\"end\" [width]=\"'60px'\"\n        [items]=\"getDropdownRowItems\" (onItemClick)=\"handleRowCommandClick($event)\"></ax-dropdown-command-column>\n    </ax-data-table>\n  </axp-page-content>\n</axp-page-layout>", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-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-entity-master-list axp-layout-header{padding-bottom:.25rem!important}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media(min-width:768px){.view-drawer{width:45vw}}@media(min-width:1024px){.view-drawer{width:35vw}}@media(min-width:1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.AXPlatform }], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
+
+var entityMasterListView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPEntityMasterListViewComponent: AXPEntityMasterListViewComponent
+});
+
 class AXPRootLayoutFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXPRootLayoutFooterComponent, isStandalone: true, selector: "axp-dashboard-admin-footer", host: { classAttribute: "ax-h-10 ax-flex ax-item-center ax-justify-between ax-bg-lighter ax-border-lighter ax-px-6 ax-border-t" }, providers: [], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-justify-start ax-gap-1\">\n  <axp-component-slot name=\"root-footer-start\"></axp-component-slot>\n</div>\n<div class=\"ax-flex ax-items-center ax-justify-end ax-gap-1\">\n  <axp-component-slot name=\"root-footer-end\"></axp-component-slot>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPRootLayoutFooterComponent, isStandalone: true, selector: "axp-dashboard-admin-footer", host: { classAttribute: "ax-h-10 ax-flex ax-item-center ax-justify-between ax-bg-lighter ax-border-lighter ax-px-6 ax-border-t" }, providers: [], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-justify-start ax-gap-1\">\n  <axp-component-slot name=\"root-footer-start\"></axp-component-slot>\n</div>\n<div class=\"ax-flex ax-items-center ax-justify-end ax-gap-1\">\n  <axp-component-slot name=\"root-footer-end\"></axp-component-slot>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$3.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootLayoutFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-dashboard-admin-footer', encapsulation: ViewEncapsulation.None, providers: [], host: {
+            args: [{ selector: 'axp-dashboard-admin-footer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [], host: {
                         class: 'ax-h-10 ax-flex ax-item-center ax-justify-between ax-bg-lighter ax-border-lighter ax-px-6 ax-border-t',
                     }, standalone: true, imports: [
                         AXPComponentSlotModule
@@ -215,12 +1821,12 @@ class AXPRootLayoutHeaderComponent {
     handleLogoClick() {
         this.router.navigate(['/']);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootLayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPRootLayoutHeaderComponent, isStandalone: true, selector: "axp-dashboard-admin-header", host: { classAttribute: "ax-w-full ax-flex ax-items-center ax-justify-between ax-bg-primary-surface ax-text-primary-on-surface ax-h-14 ax-px-2 ax-light" }, ngImport: i0, template: "<ax-button id=\"axp-menu-toggle\" (onClick)=\"toggleSideMenu()\" color=\"primary\">\n  <ax-icon class=\"rtl:ax-rotate-180\">\n    <svg width=\"28\" height=\"28\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      @if (store.isSideMenuOpen()) {\n        <defs>\n          <clipPath id=\"clip1382_20239\">\n            <rect width=\"30.000000\" height=\"30.000000\" fill=\"white\" fill-opacity=\"0\"></rect>\n          </clipPath>\n        </defs>\n        <rect width=\"30.000000\" height=\"30.000000\" fill=\"#FFFFFF\" fill-opacity=\"0\"></rect>\n        <g clip-path=\"url(#clip1382_20239)\">\n          <rect\n            id=\"rect\"\n            x=\"17.420410\"\n            y=\"12.316406\"\n            rx=\"1.000947\"\n            width=\"5.995172\"\n            height=\"2.001895\"\n            transform=\"rotate(137.159 17.420410 12.316406)\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n          ></rect>\n          <rect\n            id=\"rect\"\n            x=\"12.959473\"\n            y=\"13.728516\"\n            rx=\"0.995190\"\n            width=\"6.002943\"\n            height=\"1.990380\"\n            transform=\"rotate(40.853 12.959473 13.728516)\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n          ></rect>\n          <path\n            id=\"path\"\n            d=\"M20.1 25.5L9.9 25.51C9.48 25.51 9.06 25.47 8.65 25.39C8.24 25.3 7.84 25.18 7.45 25.02C7.06 24.86 6.69 24.66 6.34 24.43C5.99 24.19 5.67 23.92 5.37 23.63C5.07 23.33 4.81 23 4.58 22.65C4.34 22.3 4.15 21.93 3.98 21.54C3.82 21.15 3.7 20.75 3.62 20.34C3.54 19.93 3.5 19.51 3.5 19.09L3.5 10.93C3.5 10.51 3.54 10.1 3.62 9.68C3.7 9.27 3.82 8.87 3.98 8.48C4.15 8.09 4.34 7.72 4.58 7.37C4.81 7.02 5.07 6.69 5.37 6.39C5.67 6.1 5.99 5.83 6.34 5.6C6.69 5.36 7.06 5.16 7.45 5C7.84 4.84 8.24 4.72 8.65 4.64C9.06 4.55 9.48 4.51 9.9 4.51L20.1 4.5C20.52 4.5 20.94 4.54 21.35 4.62C21.76 4.7 22.16 4.83 22.55 4.99C22.94 5.15 23.31 5.35 23.66 5.58C24 5.82 24.33 6.08 24.62 6.38C24.92 6.68 25.19 7 25.42 7.35C25.65 7.7 25.85 8.07 26.01 8.46C26.17 8.85 26.3 9.25 26.38 9.67C26.46 10.08 26.5 10.5 26.5 10.92L26.5 19.07C26.5 19.5 26.46 19.91 26.38 20.32C26.3 20.74 26.17 21.14 26.01 21.53C25.85 21.92 25.65 22.29 25.42 22.64C25.19 22.99 24.92 23.31 24.62 23.61C24.33 23.91 24 24.17 23.66 24.41C23.31 24.64 22.94 24.84 22.55 25C22.16 25.16 21.76 25.29 21.35 25.37C20.94 25.45 20.52 25.5 20.1 25.5ZM9.9 6.6C9.61 6.6 9.33 6.63 9.05 6.69C8.78 6.74 8.51 6.82 8.24 6.93C7.98 7.04 7.73 7.18 7.5 7.33C7.26 7.49 7.04 7.67 6.84 7.87C6.64 8.07 6.46 8.29 6.31 8.53C6.15 8.77 6.02 9.01 5.91 9.28C5.8 9.54 5.72 9.81 5.66 10.09C5.61 10.37 5.58 10.65 5.58 10.93L5.58 19.09C5.58 19.37 5.61 19.65 5.66 19.93C5.72 20.21 5.8 20.48 5.91 20.74C6.02 21.01 6.15 21.26 6.31 21.49C6.46 21.73 6.64 21.95 6.84 22.15C7.04 22.35 7.26 22.53 7.5 22.69C7.73 22.85 7.98 22.98 8.24 23.09C8.51 23.2 8.78 23.28 9.05 23.33C9.33 23.39 9.61 23.42 9.9 23.42L20.1 23.41C20.38 23.41 20.67 23.37 20.94 23.32C21.22 23.26 21.49 23.18 21.75 23.07C22.01 22.96 22.26 22.83 22.5 22.67C22.73 22.51 22.95 22.33 23.15 22.13C23.35 21.93 23.53 21.71 23.69 21.48C23.85 21.24 23.98 20.99 24.09 20.73C24.2 20.47 24.28 20.2 24.33 19.92C24.39 19.64 24.42 19.36 24.42 19.07L24.42 10.92C24.42 10.64 24.39 10.35 24.33 10.07C24.28 9.79 24.2 9.52 24.09 9.26C23.98 9 23.85 8.75 23.69 8.51C23.53 8.28 23.35 8.06 23.15 7.86C22.95 7.66 22.73 7.48 22.5 7.32C22.26 7.16 22.01 7.03 21.75 6.92C21.49 6.81 21.22 6.73 20.94 6.67C20.67 6.62 20.38 6.59 20.1 6.59L9.9 6.6Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n            fill-rule=\"nonzero\"\n          ></path>\n          <path\n            id=\"rect\"\n            d=\"M8.5 5.51L10.54 5.51L10.6 24.43L8.55 24.43L8.5 5.51Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n            fill-rule=\"evenodd\"\n          ></path>\n        </g>\n      } @else {\n        <defs>\n          <clipPath id=\"clip1381_20236\">\n            <rect id=\"\u6253\u5F00\u8FB9\u680F0730\" width=\"30.000000\" height=\"30.000000\" fill=\"white\" fill-opacity=\"0\"></rect>\n          </clipPath>\n        </defs>\n        <rect id=\"\u6253\u5F00\u8FB9\u680F0730\" width=\"30.000000\" height=\"30.000000\" fill=\"#FFFFFF\" fill-opacity=\"0\"></rect>\n        <g clip-path=\"url(#clip1381_20236)\">\n          <rect\n            id=\"rect\"\n            x=\"11.572754\"\n            y=\"17.683594\"\n            rx=\"1.000947\"\n            width=\"5.995172\"\n            height=\"2.001895\"\n            transform=\"rotate(-42.841 11.572754 17.683594)\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n          ></rect>\n          <rect\n            id=\"rect\"\n            x=\"16.033691\"\n            y=\"16.271484\"\n            rx=\"0.995190\"\n            width=\"6.002943\"\n            height=\"1.990380\"\n            transform=\"rotate(-139.147 16.033691 16.271484)\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n          ></rect>\n          <path\n            id=\"path\"\n            d=\"M20.09 25.48L9.89 25.5C9.47 25.5 9.05 25.45 8.64 25.37C8.23 25.29 7.83 25.17 7.44 25C7.05 24.84 6.68 24.64 6.33 24.41C5.98 24.18 5.66 23.91 5.36 23.61C5.07 23.31 4.8 22.99 4.57 22.64C4.34 22.29 4.14 21.92 3.98 21.53C3.82 21.14 3.69 20.74 3.61 20.32C3.53 19.91 3.49 19.49 3.49 19.07L3.49 10.92C3.49 10.5 3.53 10.08 3.61 9.67C3.69 9.25 3.82 8.85 3.98 8.46C4.14 8.07 4.34 7.7 4.57 7.35C4.8 7 5.07 6.68 5.36 6.38C5.66 6.08 5.98 5.81 6.33 5.58C6.68 5.35 7.05 5.15 7.44 4.99C7.83 4.82 8.23 4.7 8.64 4.62C9.05 4.54 9.47 4.5 9.89 4.5L20.09 4.48C20.51 4.48 20.93 4.52 21.34 4.6C21.75 4.69 22.15 4.81 22.54 4.97C22.93 5.13 23.3 5.33 23.65 5.57C24 5.8 24.32 6.06 24.62 6.36C24.92 6.66 25.18 6.98 25.41 7.33C25.65 7.69 25.84 8.06 26.01 8.45C26.17 8.84 26.29 9.24 26.37 9.65C26.45 10.06 26.49 10.48 26.5 10.91L26.5 19.06C26.49 19.48 26.45 19.89 26.37 20.31C26.29 20.72 26.17 21.12 26.01 21.51C25.84 21.9 25.65 22.27 25.41 22.62C25.18 22.97 24.92 23.3 24.62 23.6C24.32 23.89 24 24.16 23.65 24.39C23.3 24.63 22.93 24.83 22.54 24.99C22.15 25.15 21.75 25.27 21.34 25.35C20.93 25.44 20.51 25.48 20.09 25.48ZM9.89 6.59C9.61 6.59 9.32 6.62 9.05 6.67C8.77 6.73 8.5 6.81 8.24 6.92C7.98 7.03 7.73 7.16 7.49 7.32C7.26 7.48 7.04 7.66 6.84 7.86C6.64 8.06 6.46 8.28 6.3 8.51C6.14 8.75 6.01 9 5.9 9.26C5.79 9.52 5.71 9.8 5.66 10.07C5.6 10.35 5.57 10.63 5.57 10.92L5.57 19.07C5.57 19.36 5.6 19.64 5.66 19.92C5.71 20.19 5.79 20.47 5.9 20.73C6.01 20.99 6.14 21.24 6.3 21.48C6.46 21.71 6.64 21.93 6.84 22.13C7.04 22.33 7.26 22.51 7.49 22.67C7.73 22.83 7.98 22.96 8.24 23.07C8.5 23.18 8.77 23.26 9.05 23.32C9.32 23.37 9.61 23.4 9.89 23.4L20.09 23.39C20.38 23.39 20.66 23.36 20.94 23.3C21.21 23.25 21.48 23.17 21.75 23.06C22.01 22.95 22.26 22.81 22.49 22.66C22.73 22.5 22.95 22.32 23.15 22.12C23.35 21.91 23.52 21.7 23.68 21.46C23.84 21.22 23.97 20.98 24.08 20.71C24.19 20.45 24.27 20.18 24.33 19.9C24.38 19.62 24.41 19.34 24.41 19.06L24.41 10.91C24.41 10.62 24.38 10.34 24.33 10.06C24.27 9.78 24.19 9.51 24.08 9.25C23.97 8.98 23.84 8.74 23.68 8.5C23.52 8.26 23.35 8.04 23.15 7.84C22.95 7.64 22.73 7.46 22.49 7.3C22.26 7.15 22.01 7.01 21.75 6.9C21.48 6.79 21.21 6.71 20.94 6.66C20.66 6.6 20.38 6.57 20.09 6.57L9.89 6.59Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n            fill-rule=\"nonzero\"\n          ></path>\n          <path\n            id=\"rect\"\n            d=\"M8.49 5.5L10.53 5.5L10.59 24.41L8.54 24.41L8.49 5.5Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n            fill-rule=\"evenodd\"\n          ></path>\n        </g>\n      }\n    </svg>\n  </ax-icon>\n</ax-button>\n<div class=\"ax-flex ax-items-center ax-gap-1 ax-justify-between ax-w-full\">\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <axp-component-slot name=\"root-header-start\"></axp-component-slot>\n  </div>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <axp-component-slot name=\"root-header-end\"></axp-component-slot>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootLayoutHeaderComponent, isStandalone: true, selector: "axp-dashboard-admin-header", host: { classAttribute: "ax-w-full ax-flex ax-items-center ax-justify-between ax-bg-primary-surface ax-text-primary-on-surface ax-h-14 ax-px-2 ax-light" }, ngImport: i0, template: "<ax-button id=\"axp-menu-toggle\" (onClick)=\"toggleSideMenu()\" color=\"primary\">\n  <ax-icon class=\"rtl:ax-rotate-180\">\n    <svg width=\"28\" height=\"28\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      @if (store.isSideMenuOpen()) {\n        <defs>\n          <clipPath id=\"clip1382_20239\">\n            <rect width=\"30.000000\" height=\"30.000000\" fill=\"white\" fill-opacity=\"0\"></rect>\n          </clipPath>\n        </defs>\n        <rect width=\"30.000000\" height=\"30.000000\" fill=\"#FFFFFF\" fill-opacity=\"0\"></rect>\n        <g clip-path=\"url(#clip1382_20239)\">\n          <rect\n            id=\"rect\"\n            x=\"17.420410\"\n            y=\"12.316406\"\n            rx=\"1.000947\"\n            width=\"5.995172\"\n            height=\"2.001895\"\n            transform=\"rotate(137.159 17.420410 12.316406)\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n          ></rect>\n          <rect\n            id=\"rect\"\n            x=\"12.959473\"\n            y=\"13.728516\"\n            rx=\"0.995190\"\n            width=\"6.002943\"\n            height=\"1.990380\"\n            transform=\"rotate(40.853 12.959473 13.728516)\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n          ></rect>\n          <path\n            id=\"path\"\n            d=\"M20.1 25.5L9.9 25.51C9.48 25.51 9.06 25.47 8.65 25.39C8.24 25.3 7.84 25.18 7.45 25.02C7.06 24.86 6.69 24.66 6.34 24.43C5.99 24.19 5.67 23.92 5.37 23.63C5.07 23.33 4.81 23 4.58 22.65C4.34 22.3 4.15 21.93 3.98 21.54C3.82 21.15 3.7 20.75 3.62 20.34C3.54 19.93 3.5 19.51 3.5 19.09L3.5 10.93C3.5 10.51 3.54 10.1 3.62 9.68C3.7 9.27 3.82 8.87 3.98 8.48C4.15 8.09 4.34 7.72 4.58 7.37C4.81 7.02 5.07 6.69 5.37 6.39C5.67 6.1 5.99 5.83 6.34 5.6C6.69 5.36 7.06 5.16 7.45 5C7.84 4.84 8.24 4.72 8.65 4.64C9.06 4.55 9.48 4.51 9.9 4.51L20.1 4.5C20.52 4.5 20.94 4.54 21.35 4.62C21.76 4.7 22.16 4.83 22.55 4.99C22.94 5.15 23.31 5.35 23.66 5.58C24 5.82 24.33 6.08 24.62 6.38C24.92 6.68 25.19 7 25.42 7.35C25.65 7.7 25.85 8.07 26.01 8.46C26.17 8.85 26.3 9.25 26.38 9.67C26.46 10.08 26.5 10.5 26.5 10.92L26.5 19.07C26.5 19.5 26.46 19.91 26.38 20.32C26.3 20.74 26.17 21.14 26.01 21.53C25.85 21.92 25.65 22.29 25.42 22.64C25.19 22.99 24.92 23.31 24.62 23.61C24.33 23.91 24 24.17 23.66 24.41C23.31 24.64 22.94 24.84 22.55 25C22.16 25.16 21.76 25.29 21.35 25.37C20.94 25.45 20.52 25.5 20.1 25.5ZM9.9 6.6C9.61 6.6 9.33 6.63 9.05 6.69C8.78 6.74 8.51 6.82 8.24 6.93C7.98 7.04 7.73 7.18 7.5 7.33C7.26 7.49 7.04 7.67 6.84 7.87C6.64 8.07 6.46 8.29 6.31 8.53C6.15 8.77 6.02 9.01 5.91 9.28C5.8 9.54 5.72 9.81 5.66 10.09C5.61 10.37 5.58 10.65 5.58 10.93L5.58 19.09C5.58 19.37 5.61 19.65 5.66 19.93C5.72 20.21 5.8 20.48 5.91 20.74C6.02 21.01 6.15 21.26 6.31 21.49C6.46 21.73 6.64 21.95 6.84 22.15C7.04 22.35 7.26 22.53 7.5 22.69C7.73 22.85 7.98 22.98 8.24 23.09C8.51 23.2 8.78 23.28 9.05 23.33C9.33 23.39 9.61 23.42 9.9 23.42L20.1 23.41C20.38 23.41 20.67 23.37 20.94 23.32C21.22 23.26 21.49 23.18 21.75 23.07C22.01 22.96 22.26 22.83 22.5 22.67C22.73 22.51 22.95 22.33 23.15 22.13C23.35 21.93 23.53 21.71 23.69 21.48C23.85 21.24 23.98 20.99 24.09 20.73C24.2 20.47 24.28 20.2 24.33 19.92C24.39 19.64 24.42 19.36 24.42 19.07L24.42 10.92C24.42 10.64 24.39 10.35 24.33 10.07C24.28 9.79 24.2 9.52 24.09 9.26C23.98 9 23.85 8.75 23.69 8.51C23.53 8.28 23.35 8.06 23.15 7.86C22.95 7.66 22.73 7.48 22.5 7.32C22.26 7.16 22.01 7.03 21.75 6.92C21.49 6.81 21.22 6.73 20.94 6.67C20.67 6.62 20.38 6.59 20.1 6.59L9.9 6.6Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n            fill-rule=\"nonzero\"\n          ></path>\n          <path\n            id=\"rect\"\n            d=\"M8.5 5.51L10.54 5.51L10.6 24.43L8.55 24.43L8.5 5.51Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n            fill-rule=\"evenodd\"\n          ></path>\n        </g>\n      } @else {\n        <defs>\n          <clipPath id=\"clip1381_20236\">\n            <rect id=\"\u6253\u5F00\u8FB9\u680F0730\" width=\"30.000000\" height=\"30.000000\" fill=\"white\" fill-opacity=\"0\"></rect>\n          </clipPath>\n        </defs>\n        <rect id=\"\u6253\u5F00\u8FB9\u680F0730\" width=\"30.000000\" height=\"30.000000\" fill=\"#FFFFFF\" fill-opacity=\"0\"></rect>\n        <g clip-path=\"url(#clip1381_20236)\">\n          <rect\n            id=\"rect\"\n            x=\"11.572754\"\n            y=\"17.683594\"\n            rx=\"1.000947\"\n            width=\"5.995172\"\n            height=\"2.001895\"\n            transform=\"rotate(-42.841 11.572754 17.683594)\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n          ></rect>\n          <rect\n            id=\"rect\"\n            x=\"16.033691\"\n            y=\"16.271484\"\n            rx=\"0.995190\"\n            width=\"6.002943\"\n            height=\"1.990380\"\n            transform=\"rotate(-139.147 16.033691 16.271484)\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n          ></rect>\n          <path\n            id=\"path\"\n            d=\"M20.09 25.48L9.89 25.5C9.47 25.5 9.05 25.45 8.64 25.37C8.23 25.29 7.83 25.17 7.44 25C7.05 24.84 6.68 24.64 6.33 24.41C5.98 24.18 5.66 23.91 5.36 23.61C5.07 23.31 4.8 22.99 4.57 22.64C4.34 22.29 4.14 21.92 3.98 21.53C3.82 21.14 3.69 20.74 3.61 20.32C3.53 19.91 3.49 19.49 3.49 19.07L3.49 10.92C3.49 10.5 3.53 10.08 3.61 9.67C3.69 9.25 3.82 8.85 3.98 8.46C4.14 8.07 4.34 7.7 4.57 7.35C4.8 7 5.07 6.68 5.36 6.38C5.66 6.08 5.98 5.81 6.33 5.58C6.68 5.35 7.05 5.15 7.44 4.99C7.83 4.82 8.23 4.7 8.64 4.62C9.05 4.54 9.47 4.5 9.89 4.5L20.09 4.48C20.51 4.48 20.93 4.52 21.34 4.6C21.75 4.69 22.15 4.81 22.54 4.97C22.93 5.13 23.3 5.33 23.65 5.57C24 5.8 24.32 6.06 24.62 6.36C24.92 6.66 25.18 6.98 25.41 7.33C25.65 7.69 25.84 8.06 26.01 8.45C26.17 8.84 26.29 9.24 26.37 9.65C26.45 10.06 26.49 10.48 26.5 10.91L26.5 19.06C26.49 19.48 26.45 19.89 26.37 20.31C26.29 20.72 26.17 21.12 26.01 21.51C25.84 21.9 25.65 22.27 25.41 22.62C25.18 22.97 24.92 23.3 24.62 23.6C24.32 23.89 24 24.16 23.65 24.39C23.3 24.63 22.93 24.83 22.54 24.99C22.15 25.15 21.75 25.27 21.34 25.35C20.93 25.44 20.51 25.48 20.09 25.48ZM9.89 6.59C9.61 6.59 9.32 6.62 9.05 6.67C8.77 6.73 8.5 6.81 8.24 6.92C7.98 7.03 7.73 7.16 7.49 7.32C7.26 7.48 7.04 7.66 6.84 7.86C6.64 8.06 6.46 8.28 6.3 8.51C6.14 8.75 6.01 9 5.9 9.26C5.79 9.52 5.71 9.8 5.66 10.07C5.6 10.35 5.57 10.63 5.57 10.92L5.57 19.07C5.57 19.36 5.6 19.64 5.66 19.92C5.71 20.19 5.79 20.47 5.9 20.73C6.01 20.99 6.14 21.24 6.3 21.48C6.46 21.71 6.64 21.93 6.84 22.13C7.04 22.33 7.26 22.51 7.49 22.67C7.73 22.83 7.98 22.96 8.24 23.07C8.5 23.18 8.77 23.26 9.05 23.32C9.32 23.37 9.61 23.4 9.89 23.4L20.09 23.39C20.38 23.39 20.66 23.36 20.94 23.3C21.21 23.25 21.48 23.17 21.75 23.06C22.01 22.95 22.26 22.81 22.49 22.66C22.73 22.5 22.95 22.32 23.15 22.12C23.35 21.91 23.52 21.7 23.68 21.46C23.84 21.22 23.97 20.98 24.08 20.71C24.19 20.45 24.27 20.18 24.33 19.9C24.38 19.62 24.41 19.34 24.41 19.06L24.41 10.91C24.41 10.62 24.38 10.34 24.33 10.06C24.27 9.78 24.19 9.51 24.08 9.25C23.97 8.98 23.84 8.74 23.68 8.5C23.52 8.26 23.35 8.04 23.15 7.84C22.95 7.64 22.73 7.46 22.49 7.3C22.26 7.15 22.01 7.01 21.75 6.9C21.48 6.79 21.21 6.71 20.94 6.66C20.66 6.6 20.38 6.57 20.09 6.57L9.89 6.59Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n            fill-rule=\"nonzero\"\n          ></path>\n          <path\n            id=\"rect\"\n            d=\"M8.49 5.5L10.53 5.5L10.59 24.41L8.54 24.41L8.49 5.5Z\"\n            fill=\"currentColor\"\n            fill-opacity=\"1.000000\"\n            fill-rule=\"evenodd\"\n          ></path>\n        </g>\n      }\n    </svg>\n  </ax-icon>\n</ax-button>\n<div class=\"ax-flex ax-items-center ax-gap-1 ax-justify-between ax-w-full\">\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <axp-component-slot name=\"root-header-start\"></axp-component-slot>\n  </div>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <axp-component-slot name=\"root-header-end\"></axp-component-slot>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$3.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootLayoutHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-dashboard-admin-header', encapsulation: ViewEncapsulation.None, host: { class: 'ax-w-full ax-flex ax-items-center ax-justify-between ax-bg-primary-surface ax-text-primary-on-surface ax-h-14 ax-px-2 ax-light' }, standalone: true, imports: [
+            args: [{ selector: 'axp-dashboard-admin-header', encapsulation: ViewEncapsulation.None, host: { class: 'ax-w-full ax-flex ax-items-center ax-justify-between ax-bg-primary-surface ax-text-primary-on-surface ax-h-14 ax-px-2 ax-light' }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AXPComponentSlotModule,
                         AXButtonModule,
                         AXDecoratorModule
@@ -234,7 +1840,7 @@ class AXPRootLayoutMenuComponent {
         this.badgeService = inject(AXPTaskBadgeService);
         this.settingsService = inject(AXPSettingsService);
         this.visibilityService = inject(AXPMenuVisibilityService);
-        this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : []));
+        this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : /* istanbul ignore next */ []));
         // Debug: Track menu items changes
         // effect(() => {
         //   const items = this.menuStore.items();
@@ -404,10 +2010,10 @@ class AXPRootLayoutMenuComponent {
         const lowerPath = path.trim().toLowerCase();
         return lowerPath.startsWith('http://') || lowerPath.startsWith('https://');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootLayoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPRootLayoutMenuComponent, isStandalone: true, selector: "axp-side-menu", ngImport: i0, template: "<ax-side-menu look=\"pills\">\n  @let sortedItems = sort(menuStore.items());\n  @for (item of sortedItems; track item; let i = $index) {\n  <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"> </ng-container>\n  }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\" let-items=\"items\" let-index=\"index\">\n  @if (item.type == 'group') {\n  @if (isItemVisible(item)) {\n  <ax-title>{{ item.text | translate | async }}</ax-title>\n  }\n  } @else if (item.type == 'break') {\n  @if (shouldShowDivider(item, items, index)) {\n  <ax-divider></ax-divider>\n  }\n  } @else {\n  @if (shouldRenderMenuItem(item)) {\n  @let routerLinkValue = getRouterLink(item);\n  @if (routerLinkValue) {\n  <ax-side-menu-item [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\" (onClick)=\"onMenuItemClick(item, true)\"\n    [routerLink]=\"routerLinkValue\" [active]=\"item === menuStore.selectedMenuItem().item\"\n    [isCollapsed]=\"!menuStore.isItemOpen(item)\">\n    <ax-prefix>\n      <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n    </ax-prefix>\n    <span>{{ item.text | translate | async }}</span>\n    @if (item.children?.length) {\n    <ng-container>\n      @let sortedChildren = sort(item.children);\n      @for (child of sortedChildren; track child; let childIndex = $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\">\n      </ng-container>\n      }\n    </ng-container>\n    }\n    <ax-suffix>\n      @if (badgeVisible()) {\n      <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n      }\n    </ax-suffix>\n  </ax-side-menu-item>\n  } @else {\n  <ax-side-menu-item [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\" (onClick)=\"onMenuItemClick(item)\"\n    [active]=\"item === menuStore.selectedMenuItem().item\" [isCollapsed]=\"!menuStore.isItemOpen(item)\">\n    <ax-prefix>\n      <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n    </ax-prefix>\n    <span>{{ item.text | translate | async }}</span>\n    @if (item.children?.length) {\n    <ng-container>\n      @let sortedChildren = sort(item.children);\n      @for (child of sortedChildren; track child; let childIndex = $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\">\n      </ng-container>\n      }\n    </ng-container>\n    }\n    <ax-suffix>\n      @if (badgeVisible()) {\n      <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n      }\n    </ax-suffix>\n  </ax-side-menu-item>\n  }\n  }\n  }\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "component", type: i2$2.AXSideMenuComponent, selector: "ax-side-menu", inputs: ["items", "look", "location"], outputs: ["itemsChange"] }, { kind: "component", type: i2$2.AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPTaskBadgeDirective, selector: "[axp-task-badge]", inputs: ["badgeKey", "axp-task-badge"] }, { 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: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootLayoutMenuComponent, isStandalone: true, selector: "axp-side-menu", ngImport: i0, template: "<ax-side-menu look=\"pills\">\n  @let sortedItems = sort(menuStore.items());\n  @for (item of sortedItems; track item; let i = $index) {\n  <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"> </ng-container>\n  }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\" let-items=\"items\" let-index=\"index\">\n  @if (item.type == 'group') {\n  @if (isItemVisible(item)) {\n  <ax-title>{{ item.text | translate | async }}</ax-title>\n  }\n  } @else if (item.type == 'break') {\n  @if (shouldShowDivider(item, items, index)) {\n  <ax-divider></ax-divider>\n  }\n  } @else {\n  @if (shouldRenderMenuItem(item)) {\n  @let routerLinkValue = getRouterLink(item);\n  @if (routerLinkValue) {\n  <ax-side-menu-item [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\" (onClick)=\"onMenuItemClick(item, true)\"\n    [routerLink]=\"routerLinkValue\" [active]=\"item === menuStore.selectedMenuItem().item\"\n    [isCollapsed]=\"!menuStore.isItemOpen(item)\">\n    <ax-prefix>\n      <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n    </ax-prefix>\n    <span>{{ item.text | translate | async }}</span>\n    @if (item.children?.length) {\n    <ng-container>\n      @let sortedChildren = sort(item.children);\n      @for (child of sortedChildren; track child; let childIndex = $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\">\n      </ng-container>\n      }\n    </ng-container>\n    }\n    <ax-suffix>\n      @if (badgeVisible()) {\n      <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n      }\n    </ax-suffix>\n  </ax-side-menu-item>\n  } @else {\n  <ax-side-menu-item [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\" (onClick)=\"onMenuItemClick(item)\"\n    [active]=\"item === menuStore.selectedMenuItem().item\" [isCollapsed]=\"!menuStore.isItemOpen(item)\">\n    <ax-prefix>\n      <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n    </ax-prefix>\n    <span>{{ item.text | translate | async }}</span>\n    @if (item.children?.length) {\n    <ng-container>\n      @let sortedChildren = sort(item.children);\n      @for (child of sortedChildren; track child; let childIndex = $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\">\n      </ng-container>\n      }\n    </ng-container>\n    }\n    <ax-suffix>\n      @if (badgeVisible()) {\n      <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n      }\n    </ax-suffix>\n  </ax-side-menu-item>\n  }\n  }\n  }\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "component", type: i2$3.AXSideMenuComponent, selector: "ax-side-menu", inputs: ["items", "look", "location"], outputs: ["itemsChange"] }, { kind: "component", type: i2$3.AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPTaskBadgeDirective, selector: "[axp-task-badge]", inputs: ["badgeKey", "axp-task-badge"] }, { 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: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootLayoutMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-side-menu', encapsulation: ViewEncapsulation.None, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -428,7 +2034,7 @@ class AXPHorizontalMenuComponent {
         this.badgeService = inject(AXPTaskBadgeService);
         this.settingsService = inject(AXPSettingsService);
         this.visibilityService = inject(AXPMenuVisibilityService);
-        this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : []));
+        this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : /* istanbul ignore next */ []));
     }
     async ngOnInit() {
         this.badgeVisible.set(await this.settingsService.scope(AXPPlatformScope.User).get(AXPThemeLayoutSetting.MenuBadgeVisible));
@@ -592,10 +2198,10 @@ class AXPHorizontalMenuComponent {
         const lowerPath = path.trim().toLowerCase();
         return lowerPath.startsWith('http://') || lowerPath.startsWith('https://');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPHorizontalMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPHorizontalMenuComponent, isStandalone: true, selector: "axp-horizontal-menu", host: { classAttribute: "ax-light" }, ngImport: i0, template: "<div\n  class=\"ax-w-full ax-flex ax-items-center ax-justify-between ax-gap-1 ax-bg-primary-surface ax-text-primary-on-surface ax-h-14 ax-px-4\"\n>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <axp-logo\n      [source]=\"platformConfig.logo?.full?.dark\"\n      [attr.alt]=\"platformConfig.title\"\n      class=\"ax-mx-auto ax-text-2xl\"\n    ></axp-logo>\n  </div>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <axp-component-slot name=\"root-header-start\"></axp-component-slot>\n    <axp-component-slot name=\"root-header-end\"></axp-component-slot>\n  </div>\n</div>\n\n<div class=\"__menu-bar\">\n  <ax-menu [orientation]=\"'horizontal'\" [class.ax-dark]=\"layoutService.isDarkMode()\" [hasArrow]=\"true\">\n    @let sortedItems = sort(menuStore.items());\n    @for (item of sortedItems; track item; let i = $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"> </ng-container>\n    }\n    <!-- Item Templates  -->\n    <ng-template #recursiveMenu let-item=\"item\" let-items=\"items\" let-index=\"index\">\n      @if (item.type == 'group') {\n        @if (isItemVisible(item)) {\n          <ax-title>{{ item.text | translate | async }}</ax-title>\n        }\n      } @else if (item.type == 'break') {\n        @if (shouldShowDivider(item, items, index)) {\n          <ax-divider></ax-divider>\n        }\n      } @else {\n        @if (shouldRenderMenuItem(item)) {\n          <ax-menu-item (onClick)=\"onMenuItemClick(item)\">\n            @if (!item.meta?.isRoot) {\n              <ax-prefix>\n                <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n              </ax-prefix>\n            }\n            <ax-text> {{ item.text | translate | async }}</ax-text>\n            @if (item.children?.length) {\n              <ng-container>\n                @let sortedChildren = sort(item.children);\n                @for (child of sortedChildren; track child; let childIndex = $index) {\n                  <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\">\n                  </ng-container>\n                }\n              </ng-container>\n            }\n            <ax-suffix>\n              @if (badgeVisible()) {\n                <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n              }\n            </ax-suffix>\n          </ax-menu-item>\n        }\n      }\n    </ng-template>\n  </ax-menu>\n</div>\n<!-- <div class=\"__tab-bar\">\n<div class=\"axp-tabs-item axp-state-active\">\n  <span class=\"ax-font-medium\">Account</span>\n  <i class=\"fa-light fa-times ax-text-sm\"></i>\n</div>\n<div class=\"axp-tabs-item\">\n  <span class=\"ax-font-medium\">Projects</span>\n\n</div>\n</div> -->\n", styles: [".__tab-bar{display:flex;height:3rem;width:100%;align-items:flex-end;gap:.5rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-darker-surface),var(--tw-bg-opacity, 1));padding-left:1rem;padding-right:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-darker-surface),var(--tw-text-opacity, 1))}.__tab-bar .axp-tabs-item{display:flex;height:2.5rem;cursor:pointer;align-items:center;justify-content:space-between;gap:.5rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding-left:1rem;padding-right:1rem;font-size:.875rem;line-height:1.25rem;line-height:1}.__tab-bar .axp-tabs-item:hover,.__tab-bar .axp-tabs-item.axp-state-active{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.__menu-bar{display:flex;width:100%;align-items:flex-end;gap:.5rem;overflow-x:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-dark-surface),var(--tw-bg-opacity, 1));padding:.375rem 1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-dark-surface),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { 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: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4$1.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i4$1.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPTaskBadgeDirective, selector: "[axp-task-badge]", inputs: ["badgeKey", "axp-task-badge"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPHorizontalMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPHorizontalMenuComponent, isStandalone: true, selector: "axp-horizontal-menu", host: { classAttribute: "ax-light" }, ngImport: i0, template: "<div\n  class=\"ax-w-full ax-flex ax-items-center ax-justify-between ax-gap-1 ax-bg-primary-surface ax-text-primary-on-surface ax-h-14 ax-px-4\"\n>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <axp-logo\n      [source]=\"platformConfig.logo?.full?.dark\"\n      [attr.alt]=\"platformConfig.title\"\n      class=\"ax-mx-auto ax-text-2xl\"\n    ></axp-logo>\n  </div>\n  <div class=\"ax-flex ax-items-center ax-gap-1\">\n    <axp-component-slot name=\"root-header-start\"></axp-component-slot>\n    <axp-component-slot name=\"root-header-end\"></axp-component-slot>\n  </div>\n</div>\n\n<div class=\"__menu-bar\">\n  <ax-menu [orientation]=\"'horizontal'\" [class.ax-dark]=\"layoutService.isDarkMode()\" [hasArrow]=\"true\">\n    @let sortedItems = sort(menuStore.items());\n    @for (item of sortedItems; track item; let i = $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"> </ng-container>\n    }\n    <!-- Item Templates  -->\n    <ng-template #recursiveMenu let-item=\"item\" let-items=\"items\" let-index=\"index\">\n      @if (item.type == 'group') {\n        @if (isItemVisible(item)) {\n          <ax-title>{{ item.text | translate | async }}</ax-title>\n        }\n      } @else if (item.type == 'break') {\n        @if (shouldShowDivider(item, items, index)) {\n          <ax-divider></ax-divider>\n        }\n      } @else {\n        @if (shouldRenderMenuItem(item)) {\n          <ax-menu-item (onClick)=\"onMenuItemClick(item)\">\n            @if (!item.meta?.isRoot) {\n              <ax-prefix>\n                <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n              </ax-prefix>\n            }\n            <ax-text> {{ item.text | translate | async }}</ax-text>\n            @if (item.children?.length) {\n              <ng-container>\n                @let sortedChildren = sort(item.children);\n                @for (child of sortedChildren; track child; let childIndex = $index) {\n                  <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\">\n                  </ng-container>\n                }\n              </ng-container>\n            }\n            <ax-suffix>\n              @if (badgeVisible()) {\n                <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n              }\n            </ax-suffix>\n          </ax-menu-item>\n        }\n      }\n    </ng-template>\n  </ax-menu>\n</div>\n<!-- <div class=\"__tab-bar\">\n<div class=\"axp-tabs-item axp-state-active\">\n  <span class=\"ax-font-medium\">Account</span>\n  <i class=\"fa-light fa-times ax-text-sm\"></i>\n</div>\n<div class=\"axp-tabs-item\">\n  <span class=\"ax-font-medium\">Projects</span>\n\n</div>\n</div> -->\n", styles: [".__tab-bar{display:flex;height:3rem;width:100%;align-items:flex-end;gap:.5rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-darker-surface),var(--tw-bg-opacity, 1));padding-left:1rem;padding-right:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-darker-surface),var(--tw-text-opacity, 1))}.__tab-bar .axp-tabs-item{display:flex;height:2.5rem;cursor:pointer;align-items:center;justify-content:space-between;gap:.5rem;border-top-left-radius:.5rem;border-top-right-radius:.5rem;padding-left:1rem;padding-right:1rem;font-size:.875rem;line-height:1.25rem;line-height:1}.__tab-bar .axp-tabs-item:hover,.__tab-bar .axp-tabs-item.axp-state-active{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.__menu-bar{display:flex;width:100%;align-items:flex-end;gap:.5rem;overflow-x:auto;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-dark-surface),var(--tw-bg-opacity, 1));padding:.375rem 1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-dark-surface),var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$3.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }, { 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: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i4$1.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i4$1.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPTaskBadgeDirective, selector: "[axp-task-badge]", inputs: ["badgeKey", "axp-task-badge"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPHorizontalMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPHorizontalMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-horizontal-menu', host: { class: 'ax-light' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -625,10 +2231,10 @@ class AXPRootHorizontalLayoutComponent {
             this.store.setSideMenuWidth(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootHorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPRootHorizontalLayoutComponent, isStandalone: true, selector: "axp-root-horizontal-layout", viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<div class=\"axp-root-layout\">\n    <ax-drawer-container>\n        <ax-content class=\"ax-flex ax-flex-col ax-relative ax-bg-lightest dark:ax-bg-lighter\">\n            @if(store.isNavigationLoading()) {\n            <div class=\"axp-navigating-progress\">\n                <div></div>\n            </div>\n            }\n            <axp-horizontal-menu></axp-horizontal-menu>\n            <div class=\"ax-flex-1 ax-overflow-auto ax-relative\">\n                <router-outlet></router-outlet>\n            </div>\n        </ax-content>\n    </ax-drawer-container>\n    <axp-dashboard-admin-footer></axp-dashboard-admin-footer>\n</div>", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}.axp-navigating-progress{position:absolute;top:0;height:.25rem;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200),.4)}.axp-navigating-progress>div{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-surface),var(--tw-text-opacity, 1))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXDropdownModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "component", type: AXPRootLayoutFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPHorizontalMenuComponent, selector: "axp-horizontal-menu" }, { kind: "ngmodule", type: AXPComponentSlotModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootHorizontalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootHorizontalLayoutComponent, isStandalone: true, selector: "axp-root-horizontal-layout", viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<div class=\"axp-root-layout\">\n    <ax-drawer-container>\n        <ax-content class=\"ax-flex ax-flex-col ax-relative ax-bg-lightest dark:ax-bg-lighter\">\n            @if(store.isNavigationLoading()) {\n            <div class=\"axp-navigating-progress\">\n                <div></div>\n            </div>\n            }\n            <axp-horizontal-menu></axp-horizontal-menu>\n            <div class=\"ax-flex-1 ax-overflow-auto ax-relative\">\n                <router-outlet></router-outlet>\n            </div>\n        </ax-content>\n    </ax-drawer-container>\n    <axp-dashboard-admin-footer></axp-dashboard-admin-footer>\n</div>", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}.axp-navigating-progress{position:absolute;top:0;height:.25rem;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200),.4)}.axp-navigating-progress>div{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-surface),var(--tw-text-opacity, 1))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXDropdownModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$2.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "component", type: AXPRootLayoutFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPHorizontalMenuComponent, selector: "axp-horizontal-menu" }, { kind: "ngmodule", type: AXPComponentSlotModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootHorizontalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootHorizontalLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-root-horizontal-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         RouterModule,
@@ -674,10 +2280,10 @@ class AXPRootVerticalLayoutComponent {
             this.store.setSideMenuWidth(e.value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootVerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPRootVerticalLayoutComponent, isStandalone: true, selector: "axp-root-vertical-layout", viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n  <ax-drawer-container>\n    <ax-drawer id=\"axp-side-menu-drawer\" [axResizable]=\"deviceService.isLarge()\" #drawer\n      class=\"ax-w-[75%] lg:ax-w-72 ax-border-lighter ax-bg-lighter dark:ax-border-darkest dark:ax-bg-darkest ax-h-full !ax-flex ax-flex-col\"\n      [width]=\"(deviceService.isLarge() ? store.sideMenuWidth() : null)!\" location=\"start\"\n      [collapsed]=\"!store.isSideMenuOpen()\" [closeOnBackdropClick]=\"false\" [defaultWidth]=\"288\"\n      [mode]=\"deviceService.isSmall() || deviceService.isMedium() ? 'overlay' : 'push'\" [dblClickAction]=\"'fit'\"\n      (onResizingEnded)=\"handleResizingEnded($event)\" (onResizingDblClick)=\"handleResizingEnded($event)\"\n      (onBackdropClick)=\"store.closeSideMenu()\" backdropClass=\"ax-bg-black/50\">\n      <ax-header id=\"axp-side-menu-header\"\n        class=\"ax-light ax-h-14 ax-flex ax-items-center ax-justify-center ax-bg-primary-500 ax-text-primary-on-surface ax-border-e ax-border-primary-600\">\n        <axp-logo [source]=\"logo?.full?.dark\"></axp-logo>\n      </ax-header>\n      <ax-content class=\"ax-flex ax-flex-col ax-border-e ax-h-full ax-overflow-auto\">\n        <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n        <div class=\"ax-overflow-auto ax-flex-1\">\n          <axp-side-menu id=\"axp-side-menu\" class=\"ax-p-4 ax-block\"></axp-side-menu>\n        </div>\n        <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n      </ax-content>\n    </ax-drawer>\n    <ax-content class=\"ax-flex ax-flex-col ax-relative ax-bg-lightest dark:ax-bg-lighter ax-overflow-auto\">\n      @if (store.isNavigationLoading()) {\n      <div class=\"axp-navigating-progress\">\n        <div></div>\n      </div>\n      }\n      <axp-dashboard-admin-header id=\"axp-main-header\" class=\"ax-light\"></axp-dashboard-admin-header>\n\n      <div class=\"ax-flex-1 ax-overflow-auto ax-relative\">\n        <router-outlet></router-outlet>\n      </div>\n    </ax-content>\n  </ax-drawer-container>\n  <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}.axp-navigating-progress{position:absolute;top:0;height:.25rem;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200),.4)}.axp-navigating-progress>div{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-surface),var(--tw-text-opacity, 1))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXDropdownModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$1.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$1.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "component", type: AXPRootLayoutFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPRootLayoutHeaderComponent, selector: "axp-dashboard-admin-header" }, { kind: "component", type: AXPRootLayoutMenuComponent, selector: "axp-side-menu" }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$2.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootVerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootVerticalLayoutComponent, isStandalone: true, selector: "axp-root-vertical-layout", viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true }], ngImport: i0, template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n  <ax-drawer-container>\n    <ax-drawer id=\"axp-side-menu-drawer\" [axResizable]=\"deviceService.isLarge()\" #drawer\n      class=\"ax-w-[75%] lg:ax-w-72 ax-border-lighter ax-bg-lighter dark:ax-border-darkest dark:ax-bg-darkest ax-h-full !ax-flex ax-flex-col\"\n      [width]=\"(deviceService.isLarge() ? store.sideMenuWidth() : null)!\" location=\"start\"\n      [collapsed]=\"!store.isSideMenuOpen()\" [closeOnBackdropClick]=\"false\" [defaultWidth]=\"288\"\n      [mode]=\"deviceService.isSmall() || deviceService.isMedium() ? 'overlay' : 'push'\" [dblClickAction]=\"'fit'\"\n      (onResizingEnded)=\"handleResizingEnded($event)\" (onResizingDblClick)=\"handleResizingEnded($event)\"\n      (onBackdropClick)=\"store.closeSideMenu()\" backdropClass=\"ax-bg-black/50\">\n      <ax-header id=\"axp-side-menu-header\"\n        class=\"ax-light ax-h-14 ax-flex ax-items-center ax-justify-center ax-bg-primary-500 ax-text-primary-on-surface ax-border-e ax-border-primary-600\">\n        <axp-logo [source]=\"logo?.full?.dark\"></axp-logo>\n      </ax-header>\n      <ax-content class=\"ax-flex ax-flex-col ax-border-e ax-h-full ax-overflow-auto\">\n        <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n        <div class=\"ax-overflow-auto ax-flex-1\">\n          <axp-side-menu id=\"axp-side-menu\" class=\"ax-p-4 ax-block\"></axp-side-menu>\n        </div>\n        <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n      </ax-content>\n    </ax-drawer>\n    <ax-content class=\"ax-flex ax-flex-col ax-relative ax-bg-lightest dark:ax-bg-lighter ax-overflow-auto\">\n      @if (store.isNavigationLoading()) {\n      <div class=\"axp-navigating-progress\">\n        <div></div>\n      </div>\n      }\n      <axp-dashboard-admin-header id=\"axp-main-header\" class=\"ax-light\"></axp-dashboard-admin-header>\n\n      <div class=\"ax-flex-1 ax-overflow-auto ax-relative\">\n        <router-outlet></router-outlet>\n      </div>\n    </ax-content>\n  </ax-drawer-container>\n  <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}.axp-navigating-progress{position:absolute;top:0;height:.25rem;width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200),.4)}.axp-navigating-progress>div{height:100%;width:100%;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-primary-500),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-primary-surface),var(--tw-text-opacity, 1))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXDropdownModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$2.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$2.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "component", type: AXPRootLayoutFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPRootLayoutHeaderComponent, selector: "axp-dashboard-admin-header" }, { kind: "component", type: AXPRootLayoutMenuComponent, selector: "axp-side-menu" }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$3.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootVerticalLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootVerticalLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-root-vertical-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         RouterModule,
@@ -746,8 +2352,8 @@ class AXPRootLayoutComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPRootLayoutComponent, isStandalone: true, selector: "ng-component", providers: [AXUnsubscriber], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootLayoutComponent, isStandalone: true, selector: "ng-component", providers: [AXUnsubscriber, AXPContextStore], ngImport: i0, template: `
     @if(layout.isMenuHorizontal()){
     <axp-root-horizontal-layout></axp-root-horizontal-layout>
     }@else{
@@ -755,7 +2361,7 @@ class AXPRootLayoutComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: AXPRootHorizontalLayoutComponent, selector: "axp-root-horizontal-layout" }, { kind: "component", type: AXPRootVerticalLayoutComponent, selector: "axp-root-vertical-layout" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPRootLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -769,7 +2375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [AXPRootHorizontalLayoutComponent, AXPRootVerticalLayoutComponent],
-                    providers: [AXUnsubscriber],
+                    providers: [AXUnsubscriber, AXPContextStore],
                 }]
         }] });
 
@@ -889,15 +2495,15 @@ function routesFacory() {
             children: [
                 {
                     path: 'offline',
-                    loadComponent: () => import('./acorex-platform-themes-default-error-offline.component-DlUrqVmj.mjs').then((c) => c.AXPErrorOfflineComponent),
+                    loadComponent: () => import('./acorex-platform-themes-default-error-offline.component-DR6G8gPC.mjs').then((c) => c.AXPErrorOfflineComponent),
                 },
                 {
                     path: '404',
-                    loadComponent: () => import('./acorex-platform-themes-default-error-404.component-CgB_tlPU.mjs').then((c) => c.AXPError404Component),
+                    loadComponent: () => import('./acorex-platform-themes-default-error-404.component-7MVLMwIa.mjs').then((c) => c.AXPError404Component),
                 },
                 {
                     path: '401',
-                    loadComponent: () => import('./acorex-platform-themes-default-error-401.component-D9NZ-6L_.mjs').then((c) => c.AXPError401Component),
+                    loadComponent: () => import('./acorex-platform-themes-default-error-401.component-C7EYJzSr.mjs').then((c) => c.AXPError401Component),
                 },
             ],
         },
@@ -905,9 +2511,9 @@ function routesFacory() {
     return routes;
 }
 class AXPDefaultThemeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPDefaultThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXPDefaultThemeModule, imports: [AXPCommonModule, AXPThemesSharedModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPDefaultThemeModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDefaultThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXPDefaultThemeModule, imports: [AXPCommonModule, AXPThemesSharedModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDefaultThemeModule, providers: [
             {
                 provide: AXP_ENTITY_CONFIG_TOKEN,
                 useFactory: () => {
@@ -915,14 +2521,14 @@ class AXPDefaultThemeModule {
                         viewers: {
                             root: () => Promise.resolve().then(function () { return rootLayout_component; }).then((c) => c.AXPRootLayoutComponent),
                             master: {
-                                single: () => import('./acorex-platform-themes-default-entity-master-single-view.component-di5w_3K2.mjs').then((c) => c.AXPEntityMasterSingleViewComponent),
+                                single: () => import('./acorex-platform-themes-default-entity-master-single-view.component-C2z5Lq9y.mjs').then((c) => c.AXPEntityMasterSingleViewComponent),
                                 details: () => import('@acorex/platform/layout/views').then((c) => c.AXPLayoutDetailsViewComponent),
                                 ///
-                                create: () => import('./acorex-platform-themes-default-entity-master-create-view.component-D_ex0nL2.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
+                                create: () => import('./acorex-platform-themes-default-entity-master-create-view.component-Cvvr4HnL.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
                                 ///
-                                modify: () => import('./acorex-platform-themes-default-entity-master-modify-view.component-CgLUnYRq.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
+                                modify: () => import('./acorex-platform-themes-default-entity-master-modify-view.component-TYoLN1Jq.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
                                 //
-                                list: () => import('./acorex-platform-themes-default-entity-master-list-view.component-BhDLyC5P.mjs').then((c) => c.AXPEntityMasterListViewComponent),
+                                list: () => Promise.resolve().then(function () { return entityMasterListView_component; }).then((c) => c.AXPEntityMasterListViewComponent),
                             },
                         },
                     };
@@ -937,7 +2543,7 @@ class AXPDefaultThemeModule {
             },
         ], imports: [AXPCommonModule, AXPThemesSharedModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPDefaultThemeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDefaultThemeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXPCommonModule, AXPThemesSharedModule],
@@ -951,14 +2557,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                                     viewers: {
                                         root: () => Promise.resolve().then(function () { return rootLayout_component; }).then((c) => c.AXPRootLayoutComponent),
                                         master: {
-                                            single: () => import('./acorex-platform-themes-default-entity-master-single-view.component-di5w_3K2.mjs').then((c) => c.AXPEntityMasterSingleViewComponent),
+                                            single: () => import('./acorex-platform-themes-default-entity-master-single-view.component-C2z5Lq9y.mjs').then((c) => c.AXPEntityMasterSingleViewComponent),
                                             details: () => import('@acorex/platform/layout/views').then((c) => c.AXPLayoutDetailsViewComponent),
                                             ///
-                                            create: () => import('./acorex-platform-themes-default-entity-master-create-view.component-D_ex0nL2.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
+                                            create: () => import('./acorex-platform-themes-default-entity-master-create-view.component-Cvvr4HnL.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
                                             ///
-                                            modify: () => import('./acorex-platform-themes-default-entity-master-modify-view.component-CgLUnYRq.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
+                                            modify: () => import('./acorex-platform-themes-default-entity-master-modify-view.component-TYoLN1Jq.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
                                             //
-                                            list: () => import('./acorex-platform-themes-default-entity-master-list-view.component-BhDLyC5P.mjs').then((c) => c.AXPEntityMasterListViewComponent),
+                                            list: () => Promise.resolve().then(function () { return entityMasterListView_component; }).then((c) => c.AXPEntityMasterListViewComponent),
                                         },
                                     },
                                 };
@@ -979,5 +2585,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AXPDefaultThemeModule, AXPEntityDetailListViewComponent, AXPRootHorizontalLayoutComponent, AXPRootLayoutComponent, AXPRootLayoutFooterComponent, AXPRootLayoutHeaderComponent, AXPRootLayoutMenuComponent, AXPRootVerticalLayoutComponent };
+export { AXPDefaultThemeModule, AXPEntityDetailListViewComponent, AXPEntityMasterListViewComponent, AXPRootHorizontalLayoutComponent, AXPRootLayoutComponent, AXPRootLayoutFooterComponent, AXPRootLayoutHeaderComponent, AXPRootLayoutMenuComponent, AXPRootVerticalLayoutComponent };
 //# sourceMappingURL=acorex-platform-themes-default.mjs.map