@acorex-platform/framework-client 0.0.10

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

@@ -0,0 +1,4160 @@
+import * as i1 from '@acorex/components/action-sheet';
+import { AXActionSheetModule } from '@acorex/components/action-sheet';
+import * as i1$2 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import * as i3 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i7 from '@acorex/components/data-table';
+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$4 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$2 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 * as i2$3 from '@acorex/components/tooltip';
+import { AXTooltipModule } from '@acorex/components/tooltip';
+import * as i3$1 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 } from '@acorex-platform/framework-client/auth';
+import { AXPRefreshEvent, AXPSettingsService, AXPCommonSettings, axpIsEntityListRoute, axpReplaceEntityListRouteQueryParams, axpIsEntityListPath, AXPTabNavigationService, AXPTabPreviewService, AXP_HOME_TAB_KEY, axpResolveTabTitleParts, AXP_PLATFORM_CONFIG_TOKEN, AXPMenuService, AXPMenuVisibilityService, axpMenuPathsMatch, AXPTabRouteCacheRegistry, axpResolveTabKeyFromSnapshot, axpHasTabScope, axpPathFromSnapshot, axpIsTabEligibleUrl, axpResolveTabKeyFromRouteConfig, AXP_PROTECTED_ROUTE_GUARDS, AXPCommonModule } from '@acorex-platform/framework-client/common';
+import * as i1$5 from '@acorex-platform/framework-client/core';
+import { AXPDeviceService, AXHighlightService, AXPGridLayoutDirective, AXPComponentSlotModule, AXPKeyboardShortcutRegistry, AXPBroadcastEventService, AXPContextStore } from '@acorex-platform/framework-client/core';
+import { AXP_CATEGORY_TREE_ROOT_TITLE_I18N_KEY, AXPEntityDefinitionRegistryService, AXPCategoryTreeService, traceEntityMasterList, buildDataSourceTraceSnapshot, AXPEntityListViewColumnViewModel, AXPEntityMasterListCardSelectActionName, applyDataSourcePagingWithoutLoad, getDataSourcePageIndex, restoreEntityListExpandedRows, AXP_ENTITY_CONFIG_TOKEN } from '@acorex-platform/framework-client/layout/entity';
+import * as i7$1 from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPWidgetCoreModule, AXPWidgetColumnCellComponent } from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPWidgetsModule } from '@acorex-platform/framework-client/layout/widgets';
+import { AXPLayoutThemeService, AXPThemeLayoutSetting, AXPMenuVerticalMode, AXPThemesSharedModule } from '@acorex-platform/framework-client/themes/shared';
+import { AXPWorkflowService, ofType } from '@acorex-platform/framework-client/workflow';
+import * as i1$1 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, computed, effect, ViewChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, input, viewChild, afterNextRender, Injector, output, untracked, ElementRef, DestroyRef, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import * as i1$6 from '@angular/router';
+import { RouterModule, Router, ActivatedRoute, NavigationStart, NavigationEnd, RouteReuseStrategy, ROUTES } from '@angular/router';
+import { Subject, takeUntil, filter, firstValueFrom } from 'rxjs';
+import * as i1$4 from '@acorex/core/platform';
+import { AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPStateMessageComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPQueryColumnsComponent, AXPThemeLayoutStartSideComponent, AXPTaskBadgeService, AXPMenuBadgeHelper, AXPTaskBadgeDirective, AXPLogoComponent } from '@acorex-platform/framework-client/layout/components';
+import { DragDropModule, CdkDropList, CdkDrag, CdkDragHandle, CdkDragPreview } from '@angular/cdk/drag-drop';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex-platform/framework-client/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/framework-client/runtime';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isEqual, get, sortBy } from 'lodash-es';
+import * as i1$3 from '@acorex/components/data-pager';
+import { AXDataPagerModule } from '@acorex/components/data-pager';
+import * as i3$3 from '@acorex/components/check-box';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import { AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
+import * as i4 from '@acorex/components/menu';
+import { AXContextMenuComponent, AXMenuModule } from '@acorex/components/menu';
+import * as i2$4 from '@acorex/components/side-menu';
+import { AXSideMenuModule } from '@acorex/components/side-menu';
+import { AXAvatarModule } from '@acorex/components/avatar';
+import { AXImageModule } from '@acorex/components/image';
+import sortBy$1 from 'lodash-es/sortBy';
+import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
+import { AXResizableDirective } from '@acorex/cdk/resizable';
+
+class AXPEntityDetailListViewComponent {
+    constructor(actionSheetService, unsubscriber) {
+        this.actionSheetService = actionSheetService;
+        this.unsubscriber = unsubscriber;
+        this.workflow = inject(AXPWorkflowService);
+        this.store = inject(AXPLayoutThemeService);
+        this.deviceService = inject(AXPDeviceService);
+        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) => ({
+                icon: c.icon,
+                name: c.name,
+                text: c.title,
+                color: c.color,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "dropdownRowItems" }] : /* istanbul ignore next */ []));
+        this.commandRowItems = computed(() => {
+            return this.vm.primaryRowActions().map((c) => {
+                return {
+                    icon: c.icon,
+                    name: c.name,
+                    text: c.title,
+                    color: c.color,
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "commandRowItems" }] : /* istanbul ignore next */ []));
+        this.getCommandRowItems = () => {
+            return this.commandRowItems();
+        };
+        this.getDropdownRowItems = (rowData) => {
+            return Promise.resolve(this.dropdownRowItems());
+        };
+        effect(() => {
+            this.grid.selectedRows = this.vm.selectedItems();
+            // Re-evaluate toolbar actions whenever selection changes
+            this.refreshToolbarActions();
+        });
+        this.subscribeActionEvents();
+    }
+    handleChangeSearchValue(e) {
+        if (e.isUserInteraction) {
+            this.vm.applyInlineFilter(e.value);
+        }
+    }
+    subscribeActionEvents() {
+        this.workflow.events$
+            .pipe(ofType(AXPRefreshEvent))
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((event) => {
+            console.log(event);
+            this.grid.refresh({
+                reset: false,
+            });
+            // Re-evaluate toolbar actions after refresh events
+            this.refreshToolbarActions();
+        });
+    }
+    ngAfterViewInit() {
+        // this.grid.refresh();
+        this.refreshToolbarActions();
+    }
+    async handleRowDbClick(e) {
+        const allItems = [...this.commandRowItems(), ...this.dropdownRowItems()];
+        // const defaultAction = allItems.find((c) => (c as any).default) || allItems[0];
+        const defaultAction = allItems.find((c) => c.default);
+        if (!defaultAction) {
+            return;
+        }
+        const d = {
+            component: e.component,
+            name: defaultAction.name,
+            data: e.data,
+        };
+        this.handleRowCommandClick(d);
+    }
+    async handleSelectedRowsChange(rows) {
+        this.vm.selectedItems.set(rows);
+    }
+    async handleRowCommandClick(e) {
+        this.vm.executeCommand(e.name, e.data);
+    }
+    async refreshToolbarActions() {
+        const [primary, secondary] = await Promise.all([this.vm.getPrimaryActions(), this.vm.getSecondaryActions()]);
+        this.toolbarPrimaryActions.set(primary);
+        this.toolbarSecondaryActions.set(secondary);
+    }
+    destroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    ngOnDestroy() {
+        this.vm?.destroy();
+        this.destroy();
+    }
+    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        @if (vm.showIndexColumn()) {\n          <ax-index-column\n            [caption]=\"('@general:terms.common.row-number' | translate | async)!\"\n            fixed=\"start\"\n            [width]=\"'80px'\"\n            [padZero]=\"false\"\n          ></ax-index-column>\n        }\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", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: 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", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+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,
+                        FormsModule,
+                        RouterModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXBadgeModule,
+                        AXDropdownModule,
+                        AXPopoverModule,
+                        AXFormModule,
+                        AXActionSheetModule,
+                        AXDrawerModule,
+                        AXDialogModule,
+                        AXLoadingModule,
+                        AXTabsModule,
+                        AXTooltipModule,
+                        AXBreadcrumbsModule,
+                        AXSearchBoxModule,
+                        AXDataTableModule,
+                        //
+                        AXPWidgetCoreModule,
+                        AXPWidgetsModule,
+                        AXPAuthModule,
+                        AXTranslationModule,
+                    ], 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        @if (vm.showIndexColumn()) {\n          <ax-index-column\n            [caption]=\"('@general:terms.common.row-number' | translate | async)!\"\n            fixed=\"start\"\n            [width]=\"'80px'\"\n            [padZero]=\"false\"\n          ></ax-index-column>\n        }\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" }]
+        }], ctorParameters: () => [{ type: i1.AXActionSheetService }, { type: i2.AXUnsubscriber }], propDecorators: { vm: [{
+                type: Input,
+                args: ['viewModel']
+            }], grid: [{
+                type: ViewChild,
+                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;
+    }
+    /**
+     * Reloads tree data from the server and optionally expands a parent node.
+     */
+    async refreshAfterChange(parentId) {
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        await treeComponent.reloadData();
+        const expandId = parentId ?? ROOT_NODE_ID;
+        try {
+            if (!treeComponent.isNodeExpanded(expandId)) {
+                await treeComponent.expandNode(expandId);
+            }
+        }
+        catch {
+            // Parent node may not exist yet after reload; ignore.
+        }
+    }
+    /**
+     * 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\n        (onValueChanged)=\"handleCategorySearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\"\n      >\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\n        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      >\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\n        [datasource]=\"datasource\"\n        [selectMode]=\"selectMode()\"\n        [selectionBehavior]=\"selectionBehavior()\"\n        [dragArea]=\"dragArea()\"\n        [dragBehavior]=\"dragBehavior()\"\n        [showIcons]=\"showIcons()\"\n        [showChildrenBadge]=\"showChildrenBadge()\"\n        [expandedIcon]=\"expandedIcon()\"\n        [collapsedIcon]=\"collapsedIcon()\"\n        [indentSize]=\"indentSize()\"\n        [look]=\"look()\"\n        [titleField]=\"textField()\"\n        [idField]=\"valueField()\"\n        [expandOnDoubleClick]=\"true\"\n        [nodeTemplate]=\"itemTemplate\"\n        (onNodeToggle)=\"onNodeToggle($event)\"\n        (onNodeClick)=\"handleNodeClick($event.node)\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <div class=\"__empty-state\">\n      <axp-state-message\n        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      >\n        @if (!categoryReadonly()) {\n          <ax-button\n            slot=\"actions\"\n            (onClick)=\"handleCreateRootClick($event)\"\n            look=\"solid\"\n            color=\"primary\"\n            [text]=\"'@general:actions.add-new.title' | translate | async\"\n          >\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 | translate | async;\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\n          class=\"fas fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"\n        ></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\n                  (onClick)=\"handleCreateChildClick(node, $event)\"\n                  look=\"blank\"\n                  color=\"default\"\n                  [text]=\"('@general:actions.add-new-child.title' | translate | async)!\"\n                >\n                  <ax-icon class=\"fas fa-plus\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleEditNodeClick(node, $event)\"\n                  look=\"blank\"\n                  [text]=\"('@general:actions.edit.title' | translate | async)!\"\n                >\n                  <ax-icon class=\"fas fa-pen\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleDeleteNodeClick(node, $event)\"\n                  color=\"danger\"\n                  look=\"blank\"\n                  [text]=\"('@general:actions.delete.title' | translate | async)!\"\n                >\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>\n", 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", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "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", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], 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,
+                    ], 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\n        (onValueChanged)=\"handleCategorySearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\"\n      >\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\n        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      >\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\n        [datasource]=\"datasource\"\n        [selectMode]=\"selectMode()\"\n        [selectionBehavior]=\"selectionBehavior()\"\n        [dragArea]=\"dragArea()\"\n        [dragBehavior]=\"dragBehavior()\"\n        [showIcons]=\"showIcons()\"\n        [showChildrenBadge]=\"showChildrenBadge()\"\n        [expandedIcon]=\"expandedIcon()\"\n        [collapsedIcon]=\"collapsedIcon()\"\n        [indentSize]=\"indentSize()\"\n        [look]=\"look()\"\n        [titleField]=\"textField()\"\n        [idField]=\"valueField()\"\n        [expandOnDoubleClick]=\"true\"\n        [nodeTemplate]=\"itemTemplate\"\n        (onNodeToggle)=\"onNodeToggle($event)\"\n        (onNodeClick)=\"handleNodeClick($event.node)\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <div class=\"__empty-state\">\n      <axp-state-message\n        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      >\n        @if (!categoryReadonly()) {\n          <ax-button\n            slot=\"actions\"\n            (onClick)=\"handleCreateRootClick($event)\"\n            look=\"solid\"\n            color=\"primary\"\n            [text]=\"'@general:actions.add-new.title' | translate | async\"\n          >\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 | translate | async;\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\n          class=\"fas fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"\n        ></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\n                  (onClick)=\"handleCreateChildClick(node, $event)\"\n                  look=\"blank\"\n                  color=\"default\"\n                  [text]=\"('@general:actions.add-new-child.title' | translate | async)!\"\n                >\n                  <ax-icon class=\"fas fa-plus\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleEditNodeClick(node, $event)\"\n                  look=\"blank\"\n                  [text]=\"('@general:actions.edit.title' | translate | async)!\"\n                >\n                  <ax-icon class=\"fas fa-pen\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleDeleteNodeClick(node, $event)\"\n                  color=\"danger\"\n                  look=\"blank\"\n                  [text]=\"('@general:actions.delete.title' | translate | async)!\"\n                >\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>\n" }]
+        }], 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.injector = inject(Injector);
+        this.isInitializing = false;
+        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 */ []));
+        this.showListDisplayModeControl = computed(() => this.vm.enabledListLayouts().includes('card'), ...(ngDevMode ? [{ debugName: "showListDisplayModeControl" }] : /* istanbul ignore next */ []));
+        this.listDisplayMode = computed(() => this.vm.listDisplayMode(), ...(ngDevMode ? [{ debugName: "listDisplayMode" }] : /* istanbul ignore next */ []));
+        this.hasTableListDisplayOption = computed(() => this.vm.enabledListLayouts().includes('table'), ...(ngDevMode ? [{ debugName: "hasTableListDisplayOption" }] : /* istanbul ignore next */ []));
+        this.listDisplayModeButtonIcon = computed(() => {
+            switch (this.listDisplayMode()) {
+                case 'table':
+                    return 'fa-light fa-table';
+                case 'card-compact':
+                    return 'fa-light fa-grip-lines';
+                case 'card-expanded':
+                    return 'fa-light fa-grid-2';
+            }
+        }, ...(ngDevMode ? [{ debugName: "listDisplayModeButtonIcon" }] : /* istanbul ignore next */ []));
+        this.listDisplayModePopover = viewChild('listDisplayModePopover', ...(ngDevMode ? [{ debugName: "listDisplayModePopover" }] : /* 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.filterDefinitions());
+        }, ...(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(() => {
+            const sortable = this.vm.sortableFields();
+            const active = this.vm.sortedFields();
+            const activeNames = new Set(active.map((s) => s.name));
+            const activeDefs = active.map((s) => ({
+                name: s.name,
+                title: s.title,
+                dir: s.dir,
+            }));
+            const inactiveDefs = sortable
+                .filter((s) => !activeNames.has(s.name))
+                .map((s) => ({
+                name: s.name,
+                title: s.title,
+                dir: undefined,
+            }));
+            return [...activeDefs, ...inactiveDefs];
+        }, ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : /* istanbul ignore next */ []));
+    }
+    async ngOnInit() {
+        // Prefer saved settings (view/columns/sorts/filters) if available, then apply once
+        await this.loadSettings();
+        const viewFromUrl = this.activeRoute.snapshot.queryParamMap.get('view');
+        // TODO: Consolidate list init setView calls (resolver, list-view queryParamSub / ngAfterViewInit).
+        await this.vm.setView(viewFromUrl);
+        await this.vm.ensureListPagingResolved();
+        this.filtersDefinitions.set(this.vm.filterDefinitions());
+        await this.runInitialListLoad();
+    }
+    /**
+     * Applies persisted view/filters/sorts once after query-filters syncs `initialFilters`.
+     * Avoids a second list query from `scheduleApply` plus a follow-up `onFiltersChanged` emit.
+     */
+    async runInitialListLoad() {
+        traceEntityMasterList('toolbar', 'runInitialListLoad start', () => ({
+            viewName: this.vm.view().name,
+            activeListLayout: this.vm.activeListLayout(),
+            dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
+        }));
+        this.isInitializing = true;
+        this.pendingInitialSorts = true;
+        this.setInitialFiltersFromSettingsOrView();
+        await this.waitForQueryFiltersSync();
+        await this.vm.applyFilterAndSort();
+        this.previousFilterQueries.set(this.vm.filterQueries());
+        this.isInitializing = false;
+        this.pendingInitialSorts = false;
+        traceEntityMasterList('toolbar', 'runInitialListLoad complete', () => ({
+            viewName: this.vm.view().name,
+            activeListLayout: this.vm.activeListLayout(),
+            filterCount: this.vm.filterQueries().length,
+            dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
+        }));
+    }
+    /** Waits until query-filters has rendered and synced converted `initialFilters`. */
+    waitForQueryFiltersSync() {
+        return new Promise((resolve) => {
+            afterNextRender(() => {
+                queueMicrotask(() => resolve());
+            }, { injector: this.injector });
+        });
+    }
+    async loadSettings() {
+        const filterTriggerMode = await this.settingsService.get(AXPCommonSettings.EntityFilterApplyMode);
+        this.filterTriggerMode = (filterTriggerMode?.value ?? 'auto');
+    }
+    setListDisplayMode(mode) {
+        traceEntityMasterList('toolbar', 'setListDisplayMode clicked', () => ({
+            mode,
+            viewName: this.vm.view().name,
+            previousLayout: this.vm.activeListLayout(),
+            previousDisplayMode: this.vm.listDisplayMode(),
+        }));
+        this.vm.setListDisplayMode(mode);
+        this.listDisplayModePopover()?.close();
+    }
+    scheduleApply() {
+        clearTimeout(this.applyTimer);
+        this.applyTimer = setTimeout(() => {
+            this.vm.applyFilterAndSort();
+        }, 50);
+    }
+    async onViewChanged(view) {
+        traceEntityMasterList('toolbar', 'view tab changed', () => ({
+            previousViewName: this.vm.view().name,
+            nextViewName: view.name,
+            activeListLayout: this.vm.activeListLayout(),
+            dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
+        }));
+        await this.vm.setView(view.name);
+        if (axpIsEntityListRoute(this.router)) {
+            axpReplaceEntityListRouteQueryParams(this.router, { view: view.name });
+        }
+        await this.runInitialListLoad();
+        traceEntityMasterList('toolbar', 'view tab change handled', () => ({
+            viewName: this.vm.view().name,
+            activeListLayout: this.vm.activeListLayout(),
+            filterCount: this.vm.filterQueries().length,
+            dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
+        }));
+    }
+    #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.vm.filterQueries.set(filters);
+            this.previousFilterQueries.set(filters);
+            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());
+        void this.vm.applyFilterAndSort();
+    }
+    onSortQueriesChange(e) {
+        if (this.isInitializing || this.pendingInitialSorts) {
+            this.pendingInitialSorts = false;
+            return;
+        }
+        const sortableByName = new Map(this.vm.sortableFields().map((f) => [f.name, f]));
+        const nextSortedFields = e
+            .filter((s) => s.dir && sortableByName.has(s.name))
+            .map((s) => ({
+            name: s.name,
+            title: sortableByName.get(s.name).title,
+            dir: s.dir,
+        }));
+        const sortSignature = (fields) => fields.map((s) => `${s.name}:${s.dir ?? ''}`).join('|');
+        if (sortSignature(nextSortedFields) === sortSignature(this.vm.sortedFields())) {
+            return;
+        }
+        this.vm.sortedFields.set(nextSortedFields);
+        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));
+                if (!existing) {
+                    return null;
+                }
+                return new AXPEntityListViewColumnViewModel(existing.property, {
+                    ...existing.column,
+                    options: {
+                        ...existing.column.options,
+                        visible: newColumn.visible,
+                    },
+                });
+            })
+                .filter((c) => c != null);
+        });
+        // 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" }, viewQueries: [{ propertyName: "listDisplayModePopover", first: true, predicate: ["listDisplayModePopover"], descendants: true, isSignal: true }], 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    @if (vm.activeListLayout() === 'table') {\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          #columnsPopover\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            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\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\n    @if (showListDisplayModeControl()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-list-display\" [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n          <i [class]=\"listDisplayModeButtonIcon()\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-list-display\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"listDisplayButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #listDisplayModePopover\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.interface.list-display' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-2\">\n              <ax-button-item-list>\n                @if (hasTableListDisplayOption()) {\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                    [selected]=\"listDisplayMode() === 'table'\"\n                    (onClick)=\"setListDisplayMode('table')\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-table\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n                @if (hasTableListDisplayOption()) {\n                  <ax-divider />\n                }\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-compact-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-compact'\"\n                  (onClick)=\"setListDisplayMode('card-compact')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grip-lines\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-expanded-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-expanded'\"\n                  (onClick)=\"setListDisplayMode('card-expanded')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grid-2\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ 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.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: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "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: AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.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: [
+                        AsyncPipe,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        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    @if (vm.activeListLayout() === 'table') {\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          #columnsPopover\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            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\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\n    @if (showListDisplayModeControl()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-list-display\" [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n          <i [class]=\"listDisplayModeButtonIcon()\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-list-display\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"listDisplayButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #listDisplayModePopover\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.interface.list-display' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-2\">\n              <ax-button-item-list>\n                @if (hasTableListDisplayOption()) {\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                    [selected]=\"listDisplayMode() === 'table'\"\n                    (onClick)=\"setListDisplayMode('table')\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-table\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n                @if (hasTableListDisplayOption()) {\n                  <ax-divider />\n                }\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-compact-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-compact'\"\n                  (onClick)=\"setListDisplayMode('card-compact')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grip-lines\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-expanded-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-expanded'\"\n                  (onClick)=\"setListDisplayMode('card-expanded')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grid-2\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { vm: [{
+                type: Input,
+                args: ['viewModel']
+            }], listDisplayModePopover: [{ type: i0.ViewChild, args: ['listDisplayModePopover', { isSignal: true }] }] } });
+
+class AXPEntityMasterListCardItemSkeletonComponent {
+    constructor() {
+        //#region ---- Inputs ----
+        this.fieldCount = input(4, ...(ngDevMode ? [{ debugName: "fieldCount" }] : /* istanbul ignore next */ []));
+        this.badgeCount = input(1, ...(ngDevMode ? [{ debugName: "badgeCount" }] : /* istanbul ignore next */ []));
+        this.showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+        this.showHeaderMenu = input(false, ...(ngDevMode ? [{ debugName: "showHeaderMenu" }] : /* istanbul ignore next */ []));
+        this.showContent = input(true, ...(ngDevMode ? [{ debugName: "showContent" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Computed ----
+        this.fieldPlaceholders = computed(() => Array.from({ length: Math.max(this.fieldCount(), 0) }, (_, index) => index), ...(ngDevMode ? [{ debugName: "fieldPlaceholders" }] : /* istanbul ignore next */ []));
+        this.badgePlaceholders = computed(() => Array.from({ length: Math.max(this.badgeCount(), 0) }, (_, index) => index), ...(ngDevMode ? [{ debugName: "badgePlaceholders" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardItemSkeletonComponent, isStandalone: true, selector: "axp-entity-master-list-card-item-skeleton", inputs: { fieldCount: { classPropertyName: "fieldCount", publicName: "fieldCount", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeaderMenu: { classPropertyName: "showHeaderMenu", publicName: "showHeaderMenu", isSignal: true, isRequired: false, transformFunction: null }, showContent: { classPropertyName: "showContent", publicName: "showContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"axp-entity-card-skeleton\" aria-hidden=\"true\">\n  <div class=\"axp-entity-card-skeleton__header\">\n    <div class=\"axp-entity-card-skeleton__header-main\">\n      <div class=\"axp-entity-card-skeleton__header-text\">\n        <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__title\"></ax-skeleton>\n        @if (showContent()) {\n          <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__description\"></ax-skeleton>\n        }\n      </div>\n      @for (index of badgePlaceholders(); track index) {\n        <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__badge\"></ax-skeleton>\n      }\n    </div>\n    @if (showHeaderMenu()) {\n      <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__menu\"></ax-skeleton>\n    }\n  </div>\n\n  @if (showContent()) {\n    @if (fieldPlaceholders().length) {\n      <div class=\"axp-entity-card-skeleton__fields\">\n        @for (index of fieldPlaceholders(); track index) {\n          <div class=\"axp-entity-card-skeleton__field-row\">\n            <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-label\"></ax-skeleton>\n            <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-value\"></ax-skeleton>\n          </div>\n        }\n      </div>\n    }\n  }\n\n  @if (showFooter()) {\n    <footer class=\"axp-entity-card-skeleton__footer\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__primary-action\"></ax-skeleton>\n    </footer>\n  }\n</article>\n", styles: [":host{display:block;height:auto;width:100%}.axp-entity-card-skeleton{display:flex;height:auto;width:100%;flex-direction:column;gap:1rem;border-radius:.75rem;border-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-lightest-surface),var(--tw-bg-opacity, 1));padding:1rem}.axp-entity-card-skeleton__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.axp-entity-card-skeleton__header-main{display:flex;min-width:0px;flex:1 1 0%;flex-wrap:wrap;align-items:flex-start;gap:.5rem}.axp-entity-card-skeleton__header-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-entity-card-skeleton__title{height:1.25rem;width:10rem;max-width:100%;border-radius:.25rem}.axp-entity-card-skeleton__badge{height:1.25rem;width:3.5rem;flex-shrink:0;border-radius:9999px}.axp-entity-card-skeleton__menu{height:2rem;width:2rem;flex-shrink:0;border-radius:.25rem}.axp-entity-card-skeleton__description{height:.875rem;width:8rem;max-width:100%;border-radius:.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-entity-card-skeleton__fields{display:flex;flex-direction:column;gap:.75rem;border-top-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding-top:1rem}.axp-entity-card-skeleton__field-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.axp-entity-card-skeleton__field-label{height:1rem;width:6rem;border-radius:.25rem}.axp-entity-card-skeleton__field-value{height:1rem;width:7rem;border-radius:.25rem}.axp-entity-card-skeleton__footer{margin-left:-1rem;margin-right:-1rem;margin-top:auto;margin-bottom:-1rem;border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem;border-top-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:.75rem 1rem}.axp-entity-card-skeleton__primary-action{height:2.5rem;width:100%;border-radius:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardItemSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-master-list-card-item-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXSkeletonModule], template: "<article class=\"axp-entity-card-skeleton\" aria-hidden=\"true\">\n  <div class=\"axp-entity-card-skeleton__header\">\n    <div class=\"axp-entity-card-skeleton__header-main\">\n      <div class=\"axp-entity-card-skeleton__header-text\">\n        <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__title\"></ax-skeleton>\n        @if (showContent()) {\n          <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__description\"></ax-skeleton>\n        }\n      </div>\n      @for (index of badgePlaceholders(); track index) {\n        <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__badge\"></ax-skeleton>\n      }\n    </div>\n    @if (showHeaderMenu()) {\n      <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__menu\"></ax-skeleton>\n    }\n  </div>\n\n  @if (showContent()) {\n    @if (fieldPlaceholders().length) {\n      <div class=\"axp-entity-card-skeleton__fields\">\n        @for (index of fieldPlaceholders(); track index) {\n          <div class=\"axp-entity-card-skeleton__field-row\">\n            <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-label\"></ax-skeleton>\n            <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-value\"></ax-skeleton>\n          </div>\n        }\n      </div>\n    }\n  }\n\n  @if (showFooter()) {\n    <footer class=\"axp-entity-card-skeleton__footer\">\n      <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__primary-action\"></ax-skeleton>\n    </footer>\n  }\n</article>\n", styles: [":host{display:block;height:auto;width:100%}.axp-entity-card-skeleton{display:flex;height:auto;width:100%;flex-direction:column;gap:1rem;border-radius:.75rem;border-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-lightest-surface),var(--tw-bg-opacity, 1));padding:1rem}.axp-entity-card-skeleton__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.axp-entity-card-skeleton__header-main{display:flex;min-width:0px;flex:1 1 0%;flex-wrap:wrap;align-items:flex-start;gap:.5rem}.axp-entity-card-skeleton__header-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-entity-card-skeleton__title{height:1.25rem;width:10rem;max-width:100%;border-radius:.25rem}.axp-entity-card-skeleton__badge{height:1.25rem;width:3.5rem;flex-shrink:0;border-radius:9999px}.axp-entity-card-skeleton__menu{height:2rem;width:2rem;flex-shrink:0;border-radius:.25rem}.axp-entity-card-skeleton__description{height:.875rem;width:8rem;max-width:100%;border-radius:.25rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-entity-card-skeleton__fields{display:flex;flex-direction:column;gap:.75rem;border-top-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding-top:1rem}.axp-entity-card-skeleton__field-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.axp-entity-card-skeleton__field-label{height:1rem;width:6rem;border-radius:.25rem}.axp-entity-card-skeleton__field-value{height:1rem;width:7rem;border-radius:.25rem}.axp-entity-card-skeleton__footer{margin-left:-1rem;margin-right:-1rem;margin-top:auto;margin-bottom:-1rem;border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem;border-top-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:.75rem 1rem}.axp-entity-card-skeleton__primary-action{height:2.5rem;width:100%;border-radius:.5rem}\n"] }]
+        }], propDecorators: { fieldCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldCount", required: false }] }], badgeCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCount", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showHeaderMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderMenu", required: false }] }], showContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContent", required: false }] }] } });
+
+class AXPEntityMasterListCardItemComponent {
+    //#endregion
+    //#region ---- Lifecycle ----
+    constructor() {
+        this.translation = inject(AXTranslationService);
+        //#region ---- Inputs & Outputs ----
+        this.vm = input.required(...(ngDevMode ? [{ debugName: "vm" }] : /* istanbul ignore next */ []));
+        this.row = input.required(...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+        this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.showNewBadge = input(false, ...(ngDevMode ? [{ debugName: "showNewBadge" }] : /* istanbul ignore next */ []));
+        this.showSelection = input(false, ...(ngDevMode ? [{ debugName: "showSelection" }] : /* istanbul ignore next */ []));
+        this.selectionChange = output();
+        this.commandClick = output();
+        //#endregion
+        //#region ---- Computed ----
+        this.header = computed(() => this.vm().cardLayout()?.header, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        this.showCardContent = computed(() => this.vm().cardContentExpanded(), ...(ngDevMode ? [{ debugName: "showCardContent" }] : /* istanbul ignore next */ []));
+        this.headerBadgeFields = computed(() => this.vm()
+            .cardFields()
+            .filter((field) => field.visible !== false && field.isBadgeDisplay), ...(ngDevMode ? [{ debugName: "headerBadgeFields" }] : /* istanbul ignore next */ []));
+        /** Column name to omit from body when `header.title` is a simple property path (not an expression). */
+        this.headerTitleColumnName = computed(() => {
+            const title = this.header()?.title;
+            if (!title || title.includes('{{')) {
+                return undefined;
+            }
+            return title;
+        }, ...(ngDevMode ? [{ debugName: "headerTitleColumnName" }] : /* istanbul ignore next */ []));
+        this.bodyFields = computed(() => {
+            const titleColumn = this.headerTitleColumnName();
+            return this.vm()
+                .cardFields()
+                .filter((field) => field.visible !== false && !field.isBadgeDisplay && field.name !== titleColumn);
+        }, ...(ngDevMode ? [{ debugName: "bodyFields" }] : /* istanbul ignore next */ []));
+        this.badgeColorByField = signal({}, ...(ngDevMode ? [{ debugName: "badgeColorByField" }] : /* istanbul ignore next */ []));
+        this.titleText = signal('', ...(ngDevMode ? [{ debugName: "titleText" }] : /* istanbul ignore next */ []));
+        this.descriptionText = signal('', ...(ngDevMode ? [{ debugName: "descriptionText" }] : /* istanbul ignore next */ []));
+        this.iconClass = signal(null, ...(ngDevMode ? [{ debugName: "iconClass" }] : /* istanbul ignore next */ []));
+        this.primaryActions = computed(() => this.vm().primaryRowActions(), ...(ngDevMode ? [{ debugName: "primaryActions" }] : /* istanbul ignore next */ []));
+        this.primaryActionsIconOnly = computed(() => !this.vm().cardContentExpanded(), ...(ngDevMode ? [{ debugName: "primaryActionsIconOnly" }] : /* istanbul ignore next */ []));
+        this.secondaryActions = signal([], ...(ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const row = this.row();
+            const header = this.header();
+            const badgeFields = this.headerBadgeFields().filter((field) => !this.isStatusBadgeField(field));
+            untracked(() => {
+                void this.loadSecondaryActions(row);
+                void this.resolveHeaderFields(row, header);
+                void this.resolveBadgeColors(row, badgeFields);
+            });
+        });
+    }
+    //#endregion
+    //#region ---- Row Actions ----
+    async loadSecondaryActions(row) {
+        const actions = await this.vm().cardSecondaryRowActions(row);
+        this.secondaryActions.set(actions);
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    onCardClick(event) {
+        if (event.ctrlKey || event.metaKey) {
+            event.preventDefault();
+            this.selectionChange.emit(!this.selected());
+        }
+    }
+    onCardDblClick(event) {
+        event.preventDefault();
+        void this.runDefaultAction();
+    }
+    onCardKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            void this.runDefaultAction();
+        }
+    }
+    onPrimaryActionClick(actionName, event) {
+        event.nativeEvent?.stopPropagation();
+        const action = this.primaryActions().find((a) => a.name === actionName);
+        if (action && !action.disabled) {
+            this.commandClick.emit(action.name);
+        }
+    }
+    onSecondaryActionClick(item, event) {
+        event.nativeEvent?.stopPropagation();
+        if (item.isCardSelect || item.name === AXPEntityMasterListCardSelectActionName) {
+            if (!this.selected()) {
+                this.selectionChange.emit(true);
+            }
+            return;
+        }
+        this.commandClick.emit(item.name);
+    }
+    onSelectionCheckboxChange(event) {
+        this.selectionChange.emit(!!event.value);
+    }
+    onSelectionCheckboxClick(event) {
+        event.stopPropagation();
+    }
+    stopClickPropagation(event) {
+        event.nativeEvent?.stopPropagation();
+    }
+    isStatusBadgeField(field) {
+        return field.isStatusWidget;
+    }
+    resolveBadgeText(field) {
+        const path = field.node().path ?? field.name;
+        const value = get(this.row(), path);
+        if (value == null) {
+            return '';
+        }
+        if (typeof value === 'object') {
+            const record = value;
+            const label = record['title'] ?? record['name'] ?? record['label'];
+            return label == null ? '' : String(label);
+        }
+        return String(value);
+    }
+    resolveBadgeColor(field) {
+        return this.badgeColorByField()[field.name] ?? 'default';
+    }
+    //#endregion
+    //#region ---- Private Helpers ----
+    async resolveBadgeColors(row, fields) {
+        const vm = this.vm();
+        const entries = await Promise.all(fields.map(async (field) => [field.name, await vm.resolveCardBadgeColor(field, row)]));
+        this.badgeColorByField.set(Object.fromEntries(entries));
+    }
+    async resolveHeaderFields(row, header) {
+        const vm = this.vm();
+        const [title, description, icon] = await Promise.all([
+            vm.resolveCardHeaderValue(header?.title, row),
+            vm.resolveCardHeaderValue(header?.description, row),
+            vm.resolveCardHeaderValue(header?.icon, row),
+        ]);
+        this.titleText.set(title);
+        this.descriptionText.set(description);
+        this.iconClass.set(this.toIconClass(this.toIconString(icon)));
+    }
+    toIconString(value) {
+        if (!value) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        if (this.translation.isValidMultiLanguageObject(value)) {
+            return this.translation.resolve(value);
+        }
+        return '';
+    }
+    toIconClass(value) {
+        if (!value) {
+            return null;
+        }
+        return value.includes('fa-') ? value : `fa-light fa-${value}`;
+    }
+    async runDefaultAction() {
+        const primary = this.primaryActions();
+        const secondary = this.secondaryActions().filter((a) => !a.isCardSelect);
+        const all = [...primary, ...secondary].filter(Boolean);
+        const defaultAction = all.find((a) => {
+            if (!a) {
+                return false;
+            }
+            const commandName = a.name.split('&')[0];
+            return (a.default || commandName === 'open-entity') && !a.disabled;
+        });
+        if (defaultAction) {
+            this.commandClick.emit(defaultAction.name);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardItemComponent, isStandalone: true, selector: "axp-entity-master-list-card-item", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showNewBadge: { classPropertyName: "showNewBadge", publicName: "showNewBadge", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", commandClick: "commandClick" }, ngImport: i0, template: "<article\n  class=\"axp-entity-card\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.axp-entity-card--selected]=\"selected()\"\n  [class.axp-entity-card--new]=\"showNewBadge()\"\n  [attr.aria-selected]=\"selected()\"\n  (click)=\"onCardClick($event)\"\n  (dblclick)=\"onCardDblClick($event)\"\n  (keydown)=\"onCardKeydown($event)\"\n>\n  <div class=\"axp-entity-card__header\">\n    <div class=\"axp-entity-card__header-main\">\n      <div class=\"axp-entity-card__header-text\">\n        <div class=\"axp-entity-card__title-row\">\n          @if (iconClass(); as icon) {\n            <i [class]=\"icon + ' axp-entity-card__icon'\" aria-hidden=\"true\"></i>\n          }\n\n          <h3 class=\"axp-entity-card__title\" title=\"{{ titleText() | translate | async }}\">\n            {{ titleText() | translate | async }}\n          </h3>\n\n          @if (showNewBadge()) {\n            <ax-badge\n              class=\"axp-entity-card__header-badge\"\n              [text]=\"('@acorex:dataTable.rowHighlight.new' | translate | async) || ''\"\n              color=\"success\"\n            />\n          }\n\n          @for (field of headerBadgeFields(); track field.name) {\n            @if (isStatusBadgeField(field)) {\n              <div class=\"axp-entity-card__header-badge\">\n                <axp-widget-column-cell [node]=\"field.headerBadgeNode()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n              </div>\n            } @else if (resolveBadgeText(field)) {\n              <ax-badge\n                class=\"axp-entity-card__header-badge\"\n                [text]=\"resolveBadgeText(field)\"\n                [color]=\"resolveBadgeColor(field)\"\n              />\n            }\n          }\n        </div>\n\n        @if (descriptionText()) {\n          <p class=\"axp-entity-card__description\" title=\"{{ descriptionText() | translate | async }}\">\n            {{ descriptionText() | translate | async }}\n          </p>\n        }\n      </div>\n    </div>\n\n    @if (showSelection() || secondaryActions().length) {\n      <div class=\"axp-entity-card__header-actions\">\n        @if (showSelection()) {\n          <ax-check-box\n            class=\"axp-entity-card__select-checkbox\"\n            [value]=\"selected()\"\n            (onValueChanged)=\"onSelectionCheckboxChange($event)\"\n            (click)=\"onSelectionCheckboxClick($event)\"\n          />\n        } @else if (secondaryActions().length) {\n          <ax-button [look]=\"'blank'\" [color]=\"'default'\" (onClick)=\"stopClickPropagation($event)\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n            </ax-prefix>\n\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (item of secondaryActions(); track $index) {\n                  @if (item.divided) {\n                    <ax-divider />\n                  }\n                  <ax-button-item\n                    [text]=\"(item.title | translate | async)!\"\n                    [color]=\"item.color\"\n                    [disabled]=\"item.disabled\"\n                    (onClick)=\"onSecondaryActionClick(item, $event)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    }\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCardContent()) {\n    @if (bodyFields().length) {\n      <div class=\"axp-entity-card__fields ax-grid ax-grid-cols-12 ax-gap-y-3 ax-gap-x-4\">\n        @for (field of bodyFields(); track field.name) {\n          <div\n            class=\"axp-entity-card__field ax-col-span-12\"\n            [axp-grid-layout]=\"field.layout ?? { positions: { sm: { colSpan: 12 } } }\"\n          >\n            <div class=\"axp-entity-card__field-row\">\n              <span class=\"axp-entity-card__field-label\">{{ field.title | translate | async }}</span>\n\n              <div class=\"axp-entity-card__field-value\">\n                <axp-widget-column-cell [node]=\"field.node()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n\n  @if (primaryActions().length) {\n    <footer class=\"axp-entity-card__footer\">\n      @for (action of primaryActions(); track $index) {\n        <ax-button\n          class=\"axp-entity-card__primary-action ax-text-xs\"\n          [class.ax-flex-1]=\"!primaryActionsIconOnly()\"\n          [look]=\"'outline'\"\n          [color]=\"action.color\"\n          [size]=\"'sm'\"\n          [iconOnly]=\"primaryActionsIconOnly()\"\n          [disabled]=\"action.disabled\"\n          [text]=\"(action.title | translate | async)!\"\n          (onClick)=\"onPrimaryActionClick(action.name, $event)\"\n        >\n          @if (action.icon) {\n            <ax-prefix>\n              <i class=\"fa-light {{ action.icon }}\"></i>\n            </ax-prefix>\n          }\n        </ax-button>\n      }\n    </footer>\n  }\n</article>\n", styles: [":host{display:block;height:auto;width:100%}.axp-entity-card{display:flex;height:auto;width:100%;flex-direction:column;gap:1rem;border-radius:.75rem;border-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-lightest-surface),var(--tw-bg-opacity, 1));padding:1rem;cursor:pointer;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.axp-entity-card:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.axp-entity-card:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500),1)}.axp-entity-card--selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 1px rgb(var(--ax-sys-color-primary-500)/.25),0 2px 6px #0000000f}.axp-entity-card--new{border-color:rgb(var(--ax-sys-color-border-success-surface));box-shadow:0 0 0 1px rgb(var(--ax-sys-color-success-500)/.2)}.axp-entity-card__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.axp-entity-card__header-main{display:flex;min-width:0px;flex:1 1 0%;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-entity-card__header-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-entity-card__title-row{display:flex;min-width:0px;align-items:center;gap:.5rem}.axp-entity-card__select-checkbox,.axp-entity-card__header-badge{flex-shrink:0}.axp-entity-card__header-actions{display:flex;flex-shrink:0;align-items:center;gap:.125rem}.axp-entity-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:700;line-height:1.25}.axp-entity-card__icon{flex-shrink:0;font-size:1.125rem;line-height:1.75rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.axp-entity-card__description{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-entity-card__fields{border-top-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding-top:1rem}.axp-entity-card__field-row{display:grid;width:100%;align-items:center;gap:.75rem;grid-template-columns:auto minmax(0,1fr)}.axp-entity-card__field-label{flex-shrink:0;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-entity-card__field-value{min-width:0px;max-width:100%;justify-self:end;text-align:end;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1));width:fit-content}.axp-entity-card__field-value axp-widget-column-cell{display:block;max-width:100%}.axp-entity-card__footer{margin-left:-1rem;margin-right:-1rem;margin-top:auto;margin-bottom:-1rem;display:flex;align-items:center;justify-content:flex-end;gap:1rem;border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem;border-top-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:.75rem 1rem}.axp-entity-card__primary-action{min-width:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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: AXCheckBoxModule }, { kind: "component", type: i3$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "component", type: AXPWidgetColumnCellComponent, selector: "axp-widget-column-cell", inputs: ["node", "rowData", "caption"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-master-list-card-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXBadgeModule,
+                        AXButtonModule,
+                        AXCheckBoxModule,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        AXTranslationModule,
+                        AXPGridLayoutDirective,
+                        AXPWidgetColumnCellComponent,
+                    ], template: "<article\n  class=\"axp-entity-card\"\n  role=\"button\"\n  tabindex=\"0\"\n  [class.axp-entity-card--selected]=\"selected()\"\n  [class.axp-entity-card--new]=\"showNewBadge()\"\n  [attr.aria-selected]=\"selected()\"\n  (click)=\"onCardClick($event)\"\n  (dblclick)=\"onCardDblClick($event)\"\n  (keydown)=\"onCardKeydown($event)\"\n>\n  <div class=\"axp-entity-card__header\">\n    <div class=\"axp-entity-card__header-main\">\n      <div class=\"axp-entity-card__header-text\">\n        <div class=\"axp-entity-card__title-row\">\n          @if (iconClass(); as icon) {\n            <i [class]=\"icon + ' axp-entity-card__icon'\" aria-hidden=\"true\"></i>\n          }\n\n          <h3 class=\"axp-entity-card__title\" title=\"{{ titleText() | translate | async }}\">\n            {{ titleText() | translate | async }}\n          </h3>\n\n          @if (showNewBadge()) {\n            <ax-badge\n              class=\"axp-entity-card__header-badge\"\n              [text]=\"('@acorex:dataTable.rowHighlight.new' | translate | async) || ''\"\n              color=\"success\"\n            />\n          }\n\n          @for (field of headerBadgeFields(); track field.name) {\n            @if (isStatusBadgeField(field)) {\n              <div class=\"axp-entity-card__header-badge\">\n                <axp-widget-column-cell [node]=\"field.headerBadgeNode()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n              </div>\n            } @else if (resolveBadgeText(field)) {\n              <ax-badge\n                class=\"axp-entity-card__header-badge\"\n                [text]=\"resolveBadgeText(field)\"\n                [color]=\"resolveBadgeColor(field)\"\n              />\n            }\n          }\n        </div>\n\n        @if (descriptionText()) {\n          <p class=\"axp-entity-card__description\" title=\"{{ descriptionText() | translate | async }}\">\n            {{ descriptionText() | translate | async }}\n          </p>\n        }\n      </div>\n    </div>\n\n    @if (showSelection() || secondaryActions().length) {\n      <div class=\"axp-entity-card__header-actions\">\n        @if (showSelection()) {\n          <ax-check-box\n            class=\"axp-entity-card__select-checkbox\"\n            [value]=\"selected()\"\n            (onValueChanged)=\"onSelectionCheckboxChange($event)\"\n            (click)=\"onSelectionCheckboxClick($event)\"\n          />\n        } @else if (secondaryActions().length) {\n          <ax-button [look]=\"'blank'\" [color]=\"'default'\" (onClick)=\"stopClickPropagation($event)\">\n            <ax-prefix>\n              <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n            </ax-prefix>\n\n            <ax-dropdown-panel #panel>\n              <ax-button-item-list>\n                @for (item of secondaryActions(); track $index) {\n                  @if (item.divided) {\n                    <ax-divider />\n                  }\n                  <ax-button-item\n                    [text]=\"(item.title | translate | async)!\"\n                    [color]=\"item.color\"\n                    [disabled]=\"item.disabled\"\n                    (onClick)=\"onSecondaryActionClick(item, $event)\"\n                  >\n                    @if (item.icon) {\n                      <ax-prefix>\n                        <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n                      </ax-prefix>\n                    }\n                  </ax-button-item>\n                }\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showCardContent()) {\n    @if (bodyFields().length) {\n      <div class=\"axp-entity-card__fields ax-grid ax-grid-cols-12 ax-gap-y-3 ax-gap-x-4\">\n        @for (field of bodyFields(); track field.name) {\n          <div\n            class=\"axp-entity-card__field ax-col-span-12\"\n            [axp-grid-layout]=\"field.layout ?? { positions: { sm: { colSpan: 12 } } }\"\n          >\n            <div class=\"axp-entity-card__field-row\">\n              <span class=\"axp-entity-card__field-label\">{{ field.title | translate | async }}</span>\n\n              <div class=\"axp-entity-card__field-value\">\n                <axp-widget-column-cell [node]=\"field.node()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  }\n\n  @if (primaryActions().length) {\n    <footer class=\"axp-entity-card__footer\">\n      @for (action of primaryActions(); track $index) {\n        <ax-button\n          class=\"axp-entity-card__primary-action ax-text-xs\"\n          [class.ax-flex-1]=\"!primaryActionsIconOnly()\"\n          [look]=\"'outline'\"\n          [color]=\"action.color\"\n          [size]=\"'sm'\"\n          [iconOnly]=\"primaryActionsIconOnly()\"\n          [disabled]=\"action.disabled\"\n          [text]=\"(action.title | translate | async)!\"\n          (onClick)=\"onPrimaryActionClick(action.name, $event)\"\n        >\n          @if (action.icon) {\n            <ax-prefix>\n              <i class=\"fa-light {{ action.icon }}\"></i>\n            </ax-prefix>\n          }\n        </ax-button>\n      }\n    </footer>\n  }\n</article>\n", styles: [":host{display:block;height:auto;width:100%}.axp-entity-card{display:flex;height:auto;width:100%;flex-direction:column;gap:1rem;border-radius:.75rem;border-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-lightest-surface),var(--tw-bg-opacity, 1));padding:1rem;cursor:pointer;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.axp-entity-card:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.axp-entity-card:focus-visible{outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500),1)}.axp-entity-card--selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 1px rgb(var(--ax-sys-color-primary-500)/.25),0 2px 6px #0000000f}.axp-entity-card--new{border-color:rgb(var(--ax-sys-color-border-success-surface));box-shadow:0 0 0 1px rgb(var(--ax-sys-color-success-500)/.2)}.axp-entity-card__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.axp-entity-card__header-main{display:flex;min-width:0px;flex:1 1 0%;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-entity-card__header-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-entity-card__title-row{display:flex;min-width:0px;align-items:center;gap:.5rem}.axp-entity-card__select-checkbox,.axp-entity-card__header-badge{flex-shrink:0}.axp-entity-card__header-actions{display:flex;flex-shrink:0;align-items:center;gap:.125rem}.axp-entity-card__title{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.125rem;line-height:1.75rem;font-weight:700;line-height:1.25}.axp-entity-card__icon{flex-shrink:0;font-size:1.125rem;line-height:1.75rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.axp-entity-card__description{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1))}.axp-entity-card__fields{border-top-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding-top:1rem}.axp-entity-card__field-row{display:grid;width:100%;align-items:center;gap:.75rem;grid-template-columns:auto minmax(0,1fr)}.axp-entity-card__field-label{flex-shrink:0;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-entity-card__field-value{min-width:0px;max-width:100%;justify-self:end;text-align:end;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lightest-surface),var(--tw-text-opacity, 1));width:fit-content}.axp-entity-card__field-value axp-widget-column-cell{display:block;max-width:100%}.axp-entity-card__footer{margin-left:-1rem;margin-right:-1rem;margin-top:auto;margin-bottom:-1rem;display:flex;align-items:center;justify-content:flex-end;gap:1rem;border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem;border-top-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:.75rem 1rem}.axp-entity-card__primary-action{min-width:0px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], showNewBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNewBadge", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], commandClick: [{ type: i0.Output, args: ["commandClick"] }] } });
+
+class AXPEntityMasterListCardListComponent {
+    //#endregion
+    //#region ---- Lifecycle ----
+    constructor() {
+        //#region ---- Services & Dependencies ----
+        this.deviceService = inject(AXPDeviceService);
+        //#endregion
+        //#region ---- Inputs & Outputs ----
+        this.vm = input.required(...(ngDevMode ? [{ debugName: "vm" }] : /* istanbul ignore next */ []));
+        this.pageChanged = output();
+        //#endregion
+        //#region ---- State ----
+        this.pagerDisplayMode = computed(() => (this.deviceService.isSmall() ? 'compact' : 'full'), ...(ngDevMode ? [{ debugName: "pagerDisplayMode" }] : /* istanbul ignore next */ []));
+        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.highlightedRowId = signal(null, ...(ngDevMode ? [{ debugName: "highlightedRowId" }] : /* istanbul ignore next */ []));
+        this.totalCount = signal(0, ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
+        this.pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+        this.pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        this.showSelection = computed(() => this.vm().selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "showSelection" }] : /* istanbul ignore next */ []));
+        this.rowKey = computed(() => this.vm().dataSource.config?.key ?? 'id', ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+        this.skeletonCount = computed(() => Math.max(this.pageSize(), 1), ...(ngDevMode ? [{ debugName: "skeletonCount" }] : /* istanbul ignore next */ []));
+        this.skeletonFieldCount = computed(() => {
+            if (!this.vm().cardContentExpanded()) {
+                return 0;
+            }
+            const bodyCount = this.vm()
+                .cardFields()
+                .filter((field) => field.visible !== false && !field.isBadgeDisplay).length;
+            return bodyCount > 0 ? bodyCount : 4;
+        }, ...(ngDevMode ? [{ debugName: "skeletonFieldCount" }] : /* istanbul ignore next */ []));
+        this.skeletonBadgeCount = computed(() => {
+            const count = this.vm()
+                .cardFields()
+                .filter((field) => field.visible !== false && field.isBadgeDisplay).length;
+            return count > 0 ? count : 1;
+        }, ...(ngDevMode ? [{ debugName: "skeletonBadgeCount" }] : /* istanbul ignore next */ []));
+        this.skeletonShowFooter = computed(() => this.vm().primaryRowActions().length > 0, ...(ngDevMode ? [{ debugName: "skeletonShowFooter" }] : /* istanbul ignore next */ []));
+        this.skeletonPlaceholders = computed(() => Array.from({ length: this.skeletonCount() }, (_, index) => index), ...(ngDevMode ? [{ debugName: "skeletonPlaceholders" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const vm = this.vm();
+            const dataSource = vm.dataSource;
+            untracked(() => {
+                this.syncPagingFromDataSource(vm);
+                this.syncFromDataSource();
+            });
+            const changedSub = dataSource.onChanged.subscribe(() => {
+                this.syncFromDataSource();
+            });
+            const loadingSub = dataSource.onLoadingChanged.subscribe((isLoading) => {
+                this.loading.set(isLoading);
+            });
+            onCleanup(() => {
+                changedSub.unsubscribe();
+                loadingSub.unsubscribe();
+            });
+        });
+    }
+    //#endregion
+    //#region ---- Public API ----
+    async reload(resetPagination = false) {
+        if (!resetPagination) {
+            await this.vm().ensureListPagingResolved();
+            this.vm().applyPagingToDataSourceWithoutLoad();
+        }
+        const dataReady = this.waitForDataSourceLoad(this.vm().dataSource);
+        this.vm().dataSource.refresh({ reset: resetPagination });
+        await dataReady;
+    }
+    /** Marks a card with the same post-create highlight used by the data table. */
+    highlightCardById(rowId) {
+        const key = this.rowKey();
+        const found = this.items().some((row) => String(get(row, key)) === String(rowId));
+        if (found) {
+            this.highlightedRowId.set(rowId);
+        }
+    }
+    clearCardHighlight() {
+        this.highlightedRowId.set(null);
+    }
+    isRowHighlighted(row) {
+        const highlightedId = this.highlightedRowId();
+        if (highlightedId == null) {
+            return false;
+        }
+        return String(get(row, this.rowKey())) === String(highlightedId);
+    }
+    /** Syncs visible items from the shared data source without triggering a load. */
+    syncFromDataSource() {
+        this.syncItemsFromDataSource();
+    }
+    /** Lightweight snapshot for entity list layout diagnostics. */
+    getTraceSnapshot() {
+        return {
+            itemCount: this.items().length,
+            loading: this.loading(),
+            pageIndex: this.pageIndex(),
+            pageSize: this.pageSize(),
+        };
+    }
+    //#endregion
+    //#region ---- Selection ----
+    trackRow(index, row) {
+        if (!isRowRecord(row)) {
+            return `row-${index}`;
+        }
+        const id = get(row, this.rowKey());
+        return id != null ? String(id) : `row-${index}`;
+    }
+    isRowSelected(row) {
+        const key = this.rowKey();
+        const rowId = get(row, key);
+        return this.vm()
+            .selectedItems()
+            .some((item) => getRowId(item, key) === rowId);
+    }
+    onRowSelectionChange(row, selected) {
+        const key = this.rowKey();
+        const rowId = getRowId(row, key);
+        const current = this.vm().selectedItems();
+        if (selected) {
+            if (!current.some((item) => getRowId(item, key) === rowId)) {
+                this.vm().selectedItems.set([...current, row]);
+            }
+            return;
+        }
+        this.vm().selectedItems.set(current.filter((item) => getRowId(item, key) !== rowId));
+    }
+    //#endregion
+    //#region ---- Commands & Paging ----
+    async onCommandClick(name, row) {
+        await this.vm().executeCommand(name, row);
+    }
+    onPageChanged(event) {
+        applyDataSourcePagingWithoutLoad(this.vm().dataSource, { take: event.take, skip: event.skip });
+        this.pageIndex.set(getDataSourcePageIndex(this.vm().dataSource));
+        this.pageSize.set(event.take);
+        if (!event.isUserInteraction) {
+            return;
+        }
+        if (!this.vm().skipListPagingPersistence) {
+            this.vm().saveListPaging(event.take, event.skip);
+        }
+        this.pageChanged.emit(event);
+        void this.reload(false);
+    }
+    //#endregion
+    //#region ---- Private Helpers ----
+    syncItemsFromDataSource() {
+        const ds = this.vm().dataSource;
+        const pageItems = [...ds.items];
+        this.items.set(pageItems.filter(isRowRecord));
+        this.totalCount.set(ds.totalCount ?? this.items().length);
+        this.pageIndex.set(getDataSourcePageIndex(this.vm().dataSource));
+        this.pageSize.set(this.vm().dataSource.config.pageSize ?? 10);
+    }
+    syncPagingFromDataSource(vm) {
+        this.pageIndex.set(getDataSourcePageIndex(vm.dataSource));
+        this.pageSize.set(vm.dataSource.config.pageSize ?? 10);
+    }
+    waitForDataSourceLoad(dataSource) {
+        return new Promise((resolve) => {
+            let settled = false;
+            const finish = () => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                clearTimeout(timeoutId);
+                loadingSub.unsubscribe();
+                changedSub.unsubscribe();
+                resolve();
+            };
+            const changedSub = dataSource.onChanged.subscribe(() => {
+                if (!dataSource.isLoading) {
+                    queueMicrotask(finish);
+                }
+            });
+            const loadingSub = dataSource.onLoadingChanged.subscribe((isLoading) => {
+                if (!isLoading) {
+                    queueMicrotask(finish);
+                }
+            });
+            const timeoutId = setTimeout(finish, 10_000);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardListComponent, isStandalone: true, selector: "axp-entity-master-list-card-list", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<div class=\"axp-entity-card-list\">\n  @if (loading()) {\n    <div class=\"axp-entity-card-list__grid\" aria-busy=\"true\" aria-live=\"polite\">\n      @for (index of skeletonPlaceholders(); track index) {\n        <axp-entity-master-list-card-item-skeleton\n          [fieldCount]=\"skeletonFieldCount()\"\n          [badgeCount]=\"skeletonBadgeCount()\"\n          [showContent]=\"vm().cardContentExpanded()\"\n          [showFooter]=\"skeletonShowFooter()\"\n        />\n      }\n    </div>\n  } @else if (!items().length) {\n    <div\n      class=\"axp-entity-card-list__empty ax-flex ax-flex-col ax-items-center ax-justify-center ax-flex-1 ax-p-8 ax-text-muted\"\n    >\n      <i class=\"fa-light fa-grid-2 ax-text-3xl ax-mb-2\" aria-hidden=\"true\"></i>\n      <span>{{ '@general:terms.interface.no-items' | translate | async }}</span>\n    </div>\n  } @else {\n    <div class=\"axp-entity-card-list__grid\">\n      @for (row of items(); track trackRow($index, row)) {\n        @if (row) {\n          <axp-entity-master-list-card-item\n            [vm]=\"vm()\"\n            [row]=\"row\"\n            [showSelection]=\"showSelection()\"\n            [selected]=\"isRowSelected(row)\"\n            [showNewBadge]=\"isRowHighlighted(row)\"\n            (selectionChange)=\"onRowSelectionChange(row, $event)\"\n            (commandClick)=\"onCommandClick($event, row)\"\n          />\n        }\n      }\n    </div>\n  }\n\n  <div\n    class=\"axp-entity-card-list__pager ax-border-t ax-border-light\"\n    [class.axp-entity-card-list__pager--compact]=\"deviceService.isSmall()\"\n  >\n    <ax-data-pager\n      [displayMode]=\"pagerDisplayMode()\"\n      [total]=\"totalCount()\"\n      [size]=\"pageSize()\"\n      [value]=\"pageIndex() + 1\"\n      (onChanged)=\"onPageChanged($event)\"\n    ></ax-data-pager>\n  </div>\n</div>\n", styles: [":host.axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column;overflow:hidden}.axp-entity-card-list{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;gap:1rem}.axp-entity-card-list__empty{border-radius:.5rem;border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}.axp-entity-card-list__grid{display:grid;min-height:0px;flex:1 1 0%;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem;overflow:auto}@media(min-width:768px){.axp-entity-card-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1280px){.axp-entity-card-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.axp-entity-card-list__grid{align-content:start;align-items:start;grid-auto-rows:max-content}.axp-entity-card-list__pager{flex-shrink:0;padding-top:.5rem}.axp-entity-card-list__pager ax-data-pager{width:100%}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager{justify-content:center}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .ax-compact-prefix{display:flex;width:100%;justify-content:center}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .ax-compact-suffix{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDataPagerModule }, { kind: "component", type: i1$3.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPEntityMasterListCardItemComponent, selector: "axp-entity-master-list-card-item", inputs: ["vm", "row", "selected", "showNewBadge", "showSelection"], outputs: ["selectionChange", "commandClick"] }, { kind: "component", type: AXPEntityMasterListCardItemSkeletonComponent, selector: "axp-entity-master-list-card-item-skeleton", inputs: ["fieldCount", "badgeCount", "showFooter", "showHeaderMenu", "showContent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-master-list-card-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDataPagerModule,
+                        AXTranslationModule,
+                        AXPEntityMasterListCardItemComponent,
+                        AXPEntityMasterListCardItemSkeletonComponent,
+                    ], template: "<div class=\"axp-entity-card-list\">\n  @if (loading()) {\n    <div class=\"axp-entity-card-list__grid\" aria-busy=\"true\" aria-live=\"polite\">\n      @for (index of skeletonPlaceholders(); track index) {\n        <axp-entity-master-list-card-item-skeleton\n          [fieldCount]=\"skeletonFieldCount()\"\n          [badgeCount]=\"skeletonBadgeCount()\"\n          [showContent]=\"vm().cardContentExpanded()\"\n          [showFooter]=\"skeletonShowFooter()\"\n        />\n      }\n    </div>\n  } @else if (!items().length) {\n    <div\n      class=\"axp-entity-card-list__empty ax-flex ax-flex-col ax-items-center ax-justify-center ax-flex-1 ax-p-8 ax-text-muted\"\n    >\n      <i class=\"fa-light fa-grid-2 ax-text-3xl ax-mb-2\" aria-hidden=\"true\"></i>\n      <span>{{ '@general:terms.interface.no-items' | translate | async }}</span>\n    </div>\n  } @else {\n    <div class=\"axp-entity-card-list__grid\">\n      @for (row of items(); track trackRow($index, row)) {\n        @if (row) {\n          <axp-entity-master-list-card-item\n            [vm]=\"vm()\"\n            [row]=\"row\"\n            [showSelection]=\"showSelection()\"\n            [selected]=\"isRowSelected(row)\"\n            [showNewBadge]=\"isRowHighlighted(row)\"\n            (selectionChange)=\"onRowSelectionChange(row, $event)\"\n            (commandClick)=\"onCommandClick($event, row)\"\n          />\n        }\n      }\n    </div>\n  }\n\n  <div\n    class=\"axp-entity-card-list__pager ax-border-t ax-border-light\"\n    [class.axp-entity-card-list__pager--compact]=\"deviceService.isSmall()\"\n  >\n    <ax-data-pager\n      [displayMode]=\"pagerDisplayMode()\"\n      [total]=\"totalCount()\"\n      [size]=\"pageSize()\"\n      [value]=\"pageIndex() + 1\"\n      (onChanged)=\"onPageChanged($event)\"\n    ></ax-data-pager>\n  </div>\n</div>\n", styles: [":host.axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column;overflow:hidden}.axp-entity-card-list{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column;gap:1rem}.axp-entity-card-list__empty{border-radius:.5rem;border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))}.axp-entity-card-list__grid{display:grid;min-height:0px;flex:1 1 0%;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem;overflow:auto}@media(min-width:768px){.axp-entity-card-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1280px){.axp-entity-card-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.axp-entity-card-list__grid{align-content:start;align-items:start;grid-auto-rows:max-content}.axp-entity-card-list__pager{flex-shrink:0;padding-top:.5rem}.axp-entity-card-list__pager ax-data-pager{width:100%}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager{justify-content:center}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .ax-compact-prefix{display:flex;width:100%;justify-content:center}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .ax-compact-suffix{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }] } });
+function getRowId(row, key) {
+    if (isRowRecord(row)) {
+        return get(row, key);
+    }
+    return undefined;
+}
+function isRowRecord(row) {
+    return row != null && typeof row === 'object' && !Array.isArray(row);
+}
+
+class AXPEntityMasterListDataTableComponent {
+    constructor() {
+        //#region ---- Inputs & Outputs ----
+        this.vm = input.required(...(ngDevMode ? [{ debugName: "vm" }] : /* istanbul ignore next */ []));
+        this.pageChanged = output();
+        //#endregion
+        //#region ---- View References ----
+        this.gridRef = viewChild('grid', ...(ngDevMode ? [{ debugName: "gridRef" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ---- Computed ----
+        this.resolveRowCssClass = (row, _rowIndex) => {
+            return this.vm().resolveTableRowCssClass(row);
+        };
+        this.resolveCellCssClass = (row, column, _rowIndex) => {
+            return this.vm().resolveTableCellCssClass(row, this.resolveTableColumnName(column));
+        };
+        this.commandRowItems = computed(() => {
+            return this.vm()
+                .primaryRowActions()
+                .map((c) => ({
+                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();
+        };
+    }
+    /** Exposed for parent refresh and expanded-row persistence. */
+    grid() {
+        return this.gridRef();
+    }
+    //#endregion
+    //#region ---- Table Event Handlers ----
+    onColumnSizeChanged(e) {
+        if (e.isUserInteraction && e.type === 'end') {
+            this.vm().saveSettings('columnSizes', e.data);
+        }
+    }
+    onPageChanged(e) {
+        if (e.isUserInteraction && !this.vm().skipListPagingPersistence) {
+            this.vm().saveListPaging(e.take, e.skip);
+        }
+        this.pageChanged.emit(e);
+    }
+    onColumnsOrderChanged(e) {
+        if (e.isUserInteraction) {
+            this.vm().onColumnsOrderChanged(e.data.event);
+        }
+    }
+    async handleRowDbClick(e) {
+        if (this.grid()?.dataSource.isLoading) {
+            return;
+        }
+        const allItems = [...this.commandRowItems(), ...(await this.dropdownRowItems(e.data))];
+        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,
+        };
+        await 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);
+        }
+    }
+    handleSelectedRowsChange(rows) {
+        this.vm().selectedItems.set(rows);
+    }
+    handleColumnSort(columnName, event) {
+        void this.vm().toggleColumnSort(columnName, event.ctrlKey || event.metaKey);
+    }
+    //#endregion
+    //#region ---- Sort Helpers ----
+    resolveColumnSortDirection(sortedFields, columnName) {
+        const dir = sortedFields.find((s) => s.name === columnName)?.dir;
+        return dir === 'asc' || dir === 'desc' ? dir : undefined;
+    }
+    resolveColumnSortIndex(sortedFields, columnName) {
+        const index = sortedFields.findIndex((s) => s.name === columnName);
+        return index >= 0 ? index + 1 : undefined;
+    }
+    //#endregion
+    //#region ---- Private Helpers ----
+    resolveTableColumnName(column) {
+        const prefix = 'col-';
+        return column.name.replace(prefix, '');
+    }
+    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,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListDataTableComponent, isStandalone: true, selector: "axp-entity-master-list-data-table", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChanged: "pageChanged" }, host: { styleAttribute: "height: -webkit-fill-available;" }, viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-data-table\n  id=\"axp-entity-table\"\n  [allowReordering]=\"true\"\n  (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\"\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  [highlightText]=\"vm().inlineFilterHighlightText()\"\n  [rowCssClass]=\"resolveRowCssClass\"\n  [cellCssClass]=\"resolveCellCssClass\"\n  (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n  (onRowDbClick)=\"handleRowDbClick($event)\"\n  (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n  (onPageChanged)=\"onPageChanged($event)\"\n>\n  @if (vm().showIndexColumn()) {\n    <ax-index-column\n      id=\"axp-table-col-index\"\n      [caption]=\"('@general:terms.common.row-number' | translate | async)!\"\n      fixed=\"start\"\n      [width]=\"'80px'\"\n      [padZero]=\"false\"\n    ></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\n        [attr.id]=\"'axp-table-col-' + col.name\"\n        [expandHandler]=\"$index === 0 && vm().parentKey() ? true : false\"\n        [caption]=\"(col.title | translate | async)!\"\n        [node]=\"col.node()\"\n        [customWidth]=\"col.width\"\n        [sortEnabled]=\"!!col.sortEnabled\"\n        [headerSortDirection]=\"resolveColumnSortDirection(vm().sortedFields(), col.name)\"\n        [headerSortPriority]=\"resolveColumnSortIndex(vm().sortedFields(), col.name)\"\n        (sortToggle)=\"handleColumnSort(col.name, $event)\"\n      ></axp-widget-column-renderer>\n    }\n  }\n  @if (getCommandRowItems().length) {\n    <ax-command-column\n      id=\"axp-table-col-commands\"\n      fixed=\"end\"\n      [width]=\"getCommandRowItems().length * 70 + 'px'\"\n      [items]=\"getCommandRowItems()\"\n      (onItemClick)=\"handleRowCommandClick($event)\"\n    ></ax-command-column>\n  }\n  <ax-dropdown-command-column\n    id=\"axp-table-col-dropdown-commands\"\n    fixed=\"end\"\n    [width]=\"'60px'\"\n    [items]=\"getDropdownRowItems\"\n    (onItemClick)=\"handleRowCommandClick($event)\"\n  ></ax-dropdown-command-column>\n</ax-data-table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i7.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: 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: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i7$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-entity-master-list-data-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXDataTableModule, AXTranslationModule, AXPWidgetCoreModule, AXPWidgetsModule], host: {
+                        style: 'height: -webkit-fill-available;',
+                    }, template: "<ax-data-table\n  id=\"axp-entity-table\"\n  [allowReordering]=\"true\"\n  (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\"\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  [highlightText]=\"vm().inlineFilterHighlightText()\"\n  [rowCssClass]=\"resolveRowCssClass\"\n  [cellCssClass]=\"resolveCellCssClass\"\n  (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n  (onRowDbClick)=\"handleRowDbClick($event)\"\n  (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n  (onPageChanged)=\"onPageChanged($event)\"\n>\n  @if (vm().showIndexColumn()) {\n    <ax-index-column\n      id=\"axp-table-col-index\"\n      [caption]=\"('@general:terms.common.row-number' | translate | async)!\"\n      fixed=\"start\"\n      [width]=\"'80px'\"\n      [padZero]=\"false\"\n    ></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\n        [attr.id]=\"'axp-table-col-' + col.name\"\n        [expandHandler]=\"$index === 0 && vm().parentKey() ? true : false\"\n        [caption]=\"(col.title | translate | async)!\"\n        [node]=\"col.node()\"\n        [customWidth]=\"col.width\"\n        [sortEnabled]=\"!!col.sortEnabled\"\n        [headerSortDirection]=\"resolveColumnSortDirection(vm().sortedFields(), col.name)\"\n        [headerSortPriority]=\"resolveColumnSortIndex(vm().sortedFields(), col.name)\"\n        (sortToggle)=\"handleColumnSort(col.name, $event)\"\n      ></axp-widget-column-renderer>\n    }\n  }\n  @if (getCommandRowItems().length) {\n    <ax-command-column\n      id=\"axp-table-col-commands\"\n      fixed=\"end\"\n      [width]=\"getCommandRowItems().length * 70 + 'px'\"\n      [items]=\"getCommandRowItems()\"\n      (onItemClick)=\"handleRowCommandClick($event)\"\n    ></ax-command-column>\n  }\n  <ax-dropdown-command-column\n    id=\"axp-table-col-dropdown-commands\"\n    fixed=\"end\"\n    [width]=\"'60px'\"\n    [items]=\"getDropdownRowItems\"\n    (onItemClick)=\"handleRowCommandClick($event)\"\n  ></ax-dropdown-command-column>\n</ax-data-table>\n" }]
+        }], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }], gridRef: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
+
+class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
+    constructor(platform) {
+        super();
+        this.platform = platform;
+        //#region ---- Services & Dependencies ----
+        this.activeRoute = inject(ActivatedRoute);
+        //#endregion
+        //#region ---- View State ----
+        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 */ []));
+        //#endregion
+        //#region ---- View References ----
+        this.dataTable = viewChild(AXPEntityMasterListDataTableComponent, ...(ngDevMode ? [{ debugName: "dataTable" }] : /* istanbul ignore next */ []));
+        this.cardList = viewChild(AXPEntityMasterListCardListComponent, ...(ngDevMode ? [{ debugName: "cardList" }] : /* istanbul ignore next */ []));
+        this.listHostReady = signal(false, ...(ngDevMode ? [{ debugName: "listHostReady" }] : /* istanbul ignore next */ []));
+        this.previousAppTabActive = false;
+        this.lastEvaluatedViewName = null;
+        this.componentDestroyed = new Subject();
+        this.isRestoringExpandedRows = false;
+        this.restoreExpandedRowsScheduled = false;
+        /** Blocks deferred `replaceUrl` view sync after destroy or once details navigation has started. */
+        this.listQueryParamSyncDisabled = false;
+        effect(() => {
+            const grid = this.grid();
+            if (grid) {
+                grid.selectedRows = this.vm.selectedItems();
+            }
+        });
+        this.vm.events$.subscribe(async (e) => {
+            const refreshTargetId = e.meta?.refreshTargetId;
+            const highlightRowId = e.meta?.highlightRowId;
+            const resetPagination = e.meta?.resetPagination === true || (highlightRowId != null && refreshTargetId == null);
+            if (e.action == 'refresh') {
+                traceEntityMasterList('list-view', 'refresh event received', () => ({
+                    viewName: this.vm.view().name,
+                    activeListLayout: this.vm.activeListLayout(),
+                    resetPagination,
+                    refreshTargetId,
+                    highlightRowId,
+                    hasGrid: !!this.grid(),
+                    hasCardList: !!this.cardList(),
+                    dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
+                }));
+                if (highlightRowId == null) {
+                    this.cardList()?.clearCardHighlight();
+                }
+                if (resetPagination) {
+                    this.vm.resetListPagingSkip();
+                }
+                if (refreshTargetId) {
+                    await this.grid()?.refreshItemChildren(refreshTargetId);
+                    this.updateParentHasChildAfterRefresh(refreshTargetId);
+                }
+                else {
+                    await this.reloadListData(resetPagination);
+                }
+                if (highlightRowId != null) {
+                    await this.highlightRowById(highlightRowId);
+                }
+                traceEntityMasterList('list-view', 'refresh event handled', () => this.buildListHostTraceSnapshot());
+            }
+        });
+        effect(() => {
+            if (!this.listHostReady()) {
+                return;
+            }
+            const currentViewName = this.vm.view().name;
+            const urlView = this.activeRoute.snapshot.queryParamMap.get('view');
+            if (currentViewName && currentViewName !== urlView) {
+                this.syncListViewQueryParam(currentViewName);
+            }
+        });
+        effect(() => {
+            const currentViewName = this.vm.view().name;
+            if (!this.listHostReady()) {
+                this.lastEvaluatedViewName = currentViewName;
+                return;
+            }
+            if (this.lastEvaluatedViewName !== currentViewName) {
+                traceEntityMasterList('list-view', 'view name changed in list host', () => ({
+                    previousViewName: this.lastEvaluatedViewName,
+                    nextViewName: currentViewName,
+                    activeListLayout: this.vm.activeListLayout(),
+                    dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
+                }));
+                this.lastEvaluatedViewName = currentViewName;
+                this.recompute();
+                this.scheduleRestoreExpandedRows();
+            }
+        });
+        effect(() => {
+            const layout = this.vm.activeListLayout();
+            if (!this.listHostReady()) {
+                return;
+            }
+            const previous = this.previousActiveListLayout;
+            this.previousActiveListLayout = layout;
+            if (previous === undefined || previous === layout) {
+                return;
+            }
+            traceEntityMasterList('list-view', 'list layout switched', () => ({
+                previousLayout: previous,
+                nextLayout: layout,
+                viewName: this.vm.view().name,
+                hasGrid: !!this.grid(),
+                hasCardList: !!this.cardList(),
+                ...this.buildListHostTraceSnapshot(),
+            }));
+            if (layout === 'table') {
+                // TODO: Avoid redundant list query when switching card → table if the shared data source
+                // already has the current page. grid.refresh() refetches in manual mode even though rows
+                // are cached; need a cache-only repaint API on ax-data-table (see entity-master-list traces).
+                void this.reloadListData(false);
+                return;
+            }
+            this.cardList()?.syncFromDataSource();
+        });
+        effect(() => {
+            if (!this.listHostReady()) {
+                return;
+            }
+            const pageTabKey = this.getPageTabKey();
+            const activeTabKey = this.tabNavigation.activeKey();
+            const isThisTabActive = !!pageTabKey && activeTabKey === pageTabKey;
+            const wasActive = this.previousAppTabActive;
+            this.previousAppTabActive = isThisTabActive;
+            if (!isThisTabActive || wasActive) {
+                return;
+            }
+            traceEntityMasterList('list-view', 'app tab activated for entity list', () => ({
+                pageTabKey,
+                activeTabKey,
+                viewName: this.vm.view().name,
+                activeListLayout: this.vm.activeListLayout(),
+                ...this.buildListHostTraceSnapshot(),
+            }));
+        });
+    }
+    async ngOnInit() {
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationStart), takeUntil(this.componentDestroyed))
+            .subscribe((event) => {
+            if (axpIsEntityListRoute(this.router) && !axpIsEntityListPath(event.url)) {
+                this.listQueryParamSyncDisabled = true;
+            }
+        });
+        this.queryParamSub = this.activeRoute.queryParamMap.subscribe(async (qp) => {
+            const viewFromUrl = qp.get('view');
+            traceEntityMasterList('list-view', 'route view query param changed', () => ({
+                viewFromUrl,
+                currentViewName: this.vm.view().name,
+                activeListLayout: this.vm.activeListLayout(),
+            }));
+            // TODO: Consolidate list init setView calls (resolver, toolbar ngOnInit, queryParamSub, ngAfterViewInit).
+            await this.vm.setView(viewFromUrl);
+            this.scheduleRestoreExpandedRows();
+        });
+    }
+    async ngAfterViewInit() {
+        const viewFromUrl = this.activeRoute.snapshot.queryParamMap.get('view');
+        // TODO: See queryParamSub — setView is also invoked from resolver and toolbar on first load.
+        await this.vm.setView(viewFromUrl);
+        const resolvedView = this.vm.view().name;
+        const currentUrlView = this.activeRoute.snapshot.queryParamMap.get('view');
+        if (currentUrlView !== resolvedView) {
+            this.syncListViewQueryParam(resolvedView);
+        }
+        this.listHostReady.set(true);
+        this.bindExpandedRowPersistence();
+        this.scheduleRestoreExpandedRows();
+        this.recompute();
+    }
+    ngOnDestroy() {
+        this.listQueryParamSyncDisabled = true;
+        this.componentDestroyed.next();
+        this.componentDestroyed.complete();
+        this.queryParamSub?.unsubscribe();
+        this.vm.destroy();
+    }
+    //#endregion
+    //#region ---- List Layout Handlers ----
+    onListPageChanged() {
+        this.scheduleRestoreExpandedRows();
+    }
+    handleUnselectAll() {
+        this.vm.selectedItems.set([]);
+    }
+    //#endregion
+    //#region ---- Toolbar & Sidebar Handlers ----
+    makeResponsive(value) {
+        if (this.platform.is('Mobile') || this.platform.is('SM')) {
+            return '';
+        }
+        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;
+            }
+        }
+    }
+    handleApplyClick(sideBar) {
+        this.vm.applyFilterAndSort();
+        this.toggleEndSide();
+    }
+    toggleCategoryDrawer() {
+        this.toggleStartSide();
+    }
+    //#endregion
+    //#region ---- Page Layout ----
+    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);
+        }
+    }
+    //#endregion
+    //#region ---- Grid Helpers ----
+    /**
+     * Syncs the list `view` query param without polluting history.
+     * Re-checks the live URL so a deferred call cannot `replaceUrl` over a details entry.
+     */
+    syncListViewQueryParam(viewName) {
+        if (this.listQueryParamSyncDisabled) {
+            return;
+        }
+        queueMicrotask(() => {
+            if (this.listQueryParamSyncDisabled) {
+                return;
+            }
+            axpReplaceEntityListRouteQueryParams(this.router, { view: viewName });
+        });
+    }
+    async reloadListData(resetPagination = false) {
+        traceEntityMasterList('list-view', 'reloadListData start', () => ({
+            resetPagination,
+            activeListLayout: this.vm.activeListLayout(),
+            viewName: this.vm.view().name,
+            hasGrid: !!this.grid(),
+            hasCardList: !!this.cardList(),
+            dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
+        }));
+        if (!resetPagination) {
+            await this.vm.ensureListPagingResolved();
+            this.vm.applyPagingToDataSourceWithoutLoad();
+        }
+        if (this.vm.activeListLayout() === 'card') {
+            await this.cardList()?.reload(resetPagination);
+            traceEntityMasterList('list-view', 'reloadListData complete (card)', () => this.buildListHostTraceSnapshot());
+            return;
+        }
+        const grid = this.grid();
+        if (grid) {
+            const dataReady = this.waitForDataSourceLoad(grid.dataSource);
+            grid.refresh({ reset: resetPagination });
+            await dataReady;
+            if (!resetPagination) {
+                this.scheduleSyncGridPagerUi();
+            }
+            this.scheduleRestoreExpandedRows();
+        }
+        else {
+            const dataReady = this.waitForDataSourceLoad(this.vm.dataSource);
+            this.vm.dataSource.refresh({ reset: resetPagination });
+            await dataReady;
+        }
+        traceEntityMasterList('list-view', 'reloadListData complete (table)', () => this.buildListHostTraceSnapshot());
+    }
+    buildListHostTraceSnapshot() {
+        const gridRef = this.grid();
+        const gridWithDisplayedRows = gridRef;
+        const displayedRows = gridWithDisplayedRows?.displayedRows?.() ?? [];
+        return {
+            viewName: this.vm.view().name,
+            activeListLayout: this.vm.activeListLayout(),
+            cardContentExpanded: this.vm.cardContentExpanded(),
+            hasGrid: !!gridRef,
+            displayedRowCount: displayedRows.length,
+            cardList: this.cardList()?.getTraceSnapshot() ?? null,
+            dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
+        };
+    }
+    /**
+     * Waits until a `refresh()` load cycle completes (loading started, then finished with data).
+     */
+    waitForDataSourceLoad(dataSource) {
+        return new Promise((resolve) => {
+            let settled = false;
+            const finish = () => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                clearTimeout(timeoutId);
+                loadingSub.unsubscribe();
+                changedSub.unsubscribe();
+                resolve();
+            };
+            const changedSub = dataSource.onChanged.subscribe(() => {
+                if (!dataSource.isLoading) {
+                    queueMicrotask(finish);
+                }
+            });
+            const loadingSub = dataSource.onLoadingChanged.subscribe((isLoading) => {
+                if (!isLoading) {
+                    queueMicrotask(finish);
+                }
+            });
+            const timeoutId = setTimeout(finish, 10_000);
+        });
+    }
+    grid() {
+        return this.dataTable()?.grid();
+    }
+    /**
+     * Highlights a freshly created row in the active list layout (table or card).
+     */
+    async highlightRowById(rowId) {
+        if (this.vm.activeListLayout() === 'card') {
+            this.cardList()?.highlightCardById(rowId);
+            return;
+        }
+        const gridRef = this.grid();
+        if (!gridRef) {
+            return;
+        }
+        const rowKey = this.vm.dataSource.config?.key ?? 'id';
+        const gridWithDisplayedRows = gridRef;
+        const displayedRows = gridWithDisplayedRows.displayedRows?.() ?? [];
+        const items = displayedRows.length > 0 ? displayedRows : (gridRef.dataSource.cachedItems ?? []);
+        const row = this.findItemById(items, String(rowId), rowKey);
+        if (row) {
+            gridRef.highlightRow(row);
+        }
+    }
+    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;
+    }
+    bindExpandedRowPersistence() {
+        if (!this.vm.parentKey()) {
+            return;
+        }
+        this.vm.dataSource.onItemExpanded.pipe(takeUntil(this.componentDestroyed)).subscribe((event) => {
+            const expandedItem = event?.expandedItem;
+            if (expandedItem && typeof expandedItem === 'object') {
+                this.vm.handleRowExpandChange(expandedItem);
+            }
+        });
+    }
+    scheduleSyncGridPagerUi() {
+        queueMicrotask(() => {
+            this.syncGridPagerUi();
+        });
+    }
+    syncGridPagerUi() {
+        const gridRef = this.grid();
+        if (!gridRef) {
+            return;
+        }
+        const pageIndex = getDataSourcePageIndex(this.vm.dataSource);
+        const take = this.vm.dataSource.config.pageSize;
+        const pagerPage = pageIndex + 1;
+        const grid = gridRef;
+        this.vm.skipListPagingPersistence = true;
+        try {
+            if (grid.page() !== pageIndex) {
+                grid.page.set(pageIndex);
+            }
+            grid.pageSize.set(take);
+            const pager = grid.dataPager;
+            if (pager && pager.value !== pagerPage) {
+                pager.goToPage(pagerPage);
+            }
+        }
+        finally {
+            this.vm.skipListPagingPersistence = false;
+        }
+    }
+    scheduleRestoreExpandedRows() {
+        if (!this.vm.parentKey() || this.restoreExpandedRowsScheduled) {
+            return;
+        }
+        this.restoreExpandedRowsScheduled = true;
+        queueMicrotask(() => {
+            this.restoreExpandedRowsScheduled = false;
+            void this.restoreExpandedRows();
+        });
+    }
+    async restoreExpandedRows() {
+        if (!this.vm.parentKey() || this.isRestoringExpandedRows) {
+            return;
+        }
+        const expandedRowIds = this.vm.getExpandedRowIds();
+        if (!expandedRowIds.length) {
+            return;
+        }
+        const gridRef = this.grid();
+        if (!gridRef || gridRef.dataSource.isLoading) {
+            return;
+        }
+        const gridWithDisplayedRows = gridRef;
+        const displayedRows = gridWithDisplayedRows.displayedRows?.() ?? [];
+        if (!displayedRows.length) {
+            return;
+        }
+        this.isRestoringExpandedRows = true;
+        this.vm.skipExpandedRowPersistence = true;
+        try {
+            const rowKey = this.vm.dataSource.config?.key ?? 'id';
+            await restoreEntityListExpandedRows({
+                expandedRowIds,
+                rowKey,
+                getDisplayedRows: () => gridWithDisplayedRows.displayedRows?.() ?? [],
+                expandRow: (row) => gridRef.expandRow(row),
+            });
+        }
+        finally {
+            this.vm.skipExpandedRowPersistence = false;
+            this.isRestoringExpandedRows = false;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListViewComponent, deps: [{ token: i1$4.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: "dataTable", first: true, predicate: AXPEntityMasterListDataTableComponent, descendants: true, isSignal: true }, { propertyName: "cardList", first: true, predicate: AXPEntityMasterListCardListComponent, 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\n        id=\"axp-entity-category\"\n        class=\"ax-w-80\"\n        [vm]=\"vm\"\n        [searchValue]=\"categorySearchValue()\"\n      ></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\n      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]=\"!vm.selectedItems().length\"\n    >\n      <span\n        >{{ vm.selectedItems().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    @if (vm.enabledListLayouts().includes('table')) {\n      <axp-entity-master-list-data-table\n        class=\"axp-entity-list-host\"\n        [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'table'\"\n        [vm]=\"vm\"\n        (pageChanged)=\"onListPageChanged()\"\n      ></axp-entity-master-list-data-table>\n    }\n    @if (vm.enabledListLayouts().includes('card')) {\n      <axp-entity-master-list-card-list\n        class=\"axp-entity-list-host\"\n        [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'card'\"\n        [vm]=\"vm\"\n        (pageChanged)=\"onListPageChanged()\"\n      ></axp-entity-master-list-card-list>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}axp-entity-master-list .axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column}axp-entity-master-list axp-page-content{display:flex;min-height:0px;flex-direction:column}axp-entity-master-list .axp-entity-list-host--hidden{display:none!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: AXTranslationModule }, { kind: "directive", type: i3$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { 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: "component", type: AXPEntityMasterListDataTableComponent, selector: "axp-entity-master-list-data-table", inputs: ["vm"], outputs: ["pageChanged"] }, { kind: "component", type: AXPEntityMasterListCardListComponent, selector: "axp-entity-master-list-card-list", inputs: ["vm"], outputs: ["pageChanged"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.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,
+                        AXTranslationModule,
+                        DragDropModule,
+                        AXPAuthModule,
+                        AXPEntityMasterToolbarViewComponent,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutStartSideComponent,
+                        AXPEntityCategoryComponent,
+                        AXPEntityMasterListDataTableComponent,
+                        AXPEntityMasterListCardListComponent,
+                    ], 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\n        id=\"axp-entity-category\"\n        class=\"ax-w-80\"\n        [vm]=\"vm\"\n        [searchValue]=\"categorySearchValue()\"\n      ></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\n      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]=\"!vm.selectedItems().length\"\n    >\n      <span\n        >{{ vm.selectedItems().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    @if (vm.enabledListLayouts().includes('table')) {\n      <axp-entity-master-list-data-table\n        class=\"axp-entity-list-host\"\n        [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'table'\"\n        [vm]=\"vm\"\n        (pageChanged)=\"onListPageChanged()\"\n      ></axp-entity-master-list-data-table>\n    }\n    @if (vm.enabledListLayouts().includes('card')) {\n      <axp-entity-master-list-card-list\n        class=\"axp-entity-list-host\"\n        [class.axp-entity-list-host--hidden]=\"vm.activeListLayout() !== 'card'\"\n        [vm]=\"vm\"\n        (pageChanged)=\"onListPageChanged()\"\n      ></axp-entity-master-list-card-list>\n    }\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}axp-entity-master-list .axp-entity-list-host{display:flex;height:100%;min-height:0px;flex-direction:column}axp-entity-master-list axp-page-content{display:flex;min-height:0px;flex-direction:column}axp-entity-master-list .axp-entity-list-host--hidden{display:none!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$4.AXPlatform }], propDecorators: { dataTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPEntityMasterListDataTableComponent), { isSignal: true }] }], cardList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPEntityMasterListCardListComponent), { isSignal: true }] }] } });
+
+var entityMasterListView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPEntityMasterListViewComponent: AXPEntityMasterListViewComponent
+});
+
+class AXPRootLayoutFooterComponent {
+    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$5.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: "21.2.9", ngImport: i0, type: AXPRootLayoutFooterComponent, decorators: [{
+            type: Component,
+            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
+                    ], 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" }]
+        }] });
+
+//#region ---- Types ----
+//#endregion
+//#region ---- Layout ----
+const DEFAULT_MIN_WIDTH_PX = 88;
+const DEFAULT_MAX_WIDTH_PX = 192;
+const DEFAULT_TAB_GAP_PX = 8;
+/**
+ * Chrome-like tab strip layout: equal flexible widths between min/max; horizontal scroll when needed.
+ */
+function computeRouteTabBarLayout(stripWidthPx, tabs, _activeKey, options = {}) {
+    const minWidthPx = options.minWidthPx ?? DEFAULT_MIN_WIDTH_PX;
+    const maxWidthPx = options.maxWidthPx ?? DEFAULT_MAX_WIDTH_PX;
+    const tabGapPx = options.tabGapPx ?? DEFAULT_TAB_GAP_PX;
+    if (stripWidthPx <= 0 || !tabs.length) {
+        return {
+            tabWidthPx: minWidthPx,
+            isScrollable: false,
+        };
+    }
+    const count = tabs.length;
+    const gapsForAll = Math.max(0, count - 1) * tabGapPx;
+    const rawWidth = (stripWidthPx - gapsForAll) / count;
+    const fittedWidth = Math.min(maxWidthPx, Math.max(minWidthPx, rawWidth));
+    const needsScroll = count * fittedWidth + gapsForAll > stripWidthPx;
+    const tabWidthPx = needsScroll ? minWidthPx : Math.floor(fittedWidth);
+    return {
+        tabWidthPx,
+        isScrollable: needsScroll,
+    };
+}
+//#endregion
+
+const AXP_ROUTE_TAB_TITLE_TOOLTIP_OPEN_AFTER_MS = 500;
+class AXPRouteTabBarComponent {
+    constructor() {
+        //#region ---- Services & Dependencies ----
+        this.tabNavigation = inject(AXPTabNavigationService);
+        this.tabPreviewService = inject(AXPTabPreviewService);
+        this.translateService = inject(AXTranslationService);
+        this.host = inject((ElementRef));
+        this.tabStrip = viewChild('tabStrip', ...(ngDevMode ? [{ debugName: "tabStrip" }] : /* istanbul ignore next */ []));
+        this.tabsScroll = viewChild('tabsScroll', ...(ngDevMode ? [{ debugName: "tabsScroll" }] : /* istanbul ignore next */ []));
+        this.contextMenu = viewChild('tabContextMenu', ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+        this.suppressTabChange = signal(false, ...(ngDevMode ? [{ debugName: "suppressTabChange" }] : /* istanbul ignore next */ []));
+        this.contextTabKey = signal(null, ...(ngDevMode ? [{ debugName: "contextTabKey" }] : /* istanbul ignore next */ []));
+        this.stripWidthPx = signal(0, ...(ngDevMode ? [{ debugName: "stripWidthPx" }] : /* istanbul ignore next */ []));
+        this.isTabDragging = signal(false, ...(ngDevMode ? [{ debugName: "isTabDragging" }] : /* istanbul ignore next */ []));
+        this.inHeader = signal(false, ...(ngDevMode ? [{ debugName: "inHeader" }] : /* istanbul ignore next */ []));
+        this.tabTitleTooltipOpenAfterMs = AXP_ROUTE_TAB_TITLE_TOOLTIP_OPEN_AFTER_MS;
+        //#endregion
+        //#region ---- Layout State ----
+        this.layout = computed(() => computeRouteTabBarLayout(this.stripWidthPx(), this.tabNavigation.tabList(), this.tabNavigation.activeKey()), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.tabWidthPx = computed(() => this.layout().tabWidthPx, ...(ngDevMode ? [{ debugName: "tabWidthPx" }] : /* istanbul ignore next */ []));
+        this.hasHorizontalOverflow = signal(false, ...(ngDevMode ? [{ debugName: "hasHorizontalOverflow" }] : /* istanbul ignore next */ []));
+        this.canScrollForward = signal(false, ...(ngDevMode ? [{ debugName: "canScrollForward" }] : /* istanbul ignore next */ []));
+        this.canScrollBackward = signal(false, ...(ngDevMode ? [{ debugName: "canScrollBackward" }] : /* istanbul ignore next */ []));
+        this.scrollForwardIcon = computed(() => this.#isTabsRtl() ? 'fa-solid fa-chevron-left' : 'fa-solid fa-chevron-right', ...(ngDevMode ? [{ debugName: "scrollForwardIcon" }] : /* istanbul ignore next */ []));
+        this.scrollBackwardIcon = computed(() => this.#isTabsRtl() ? 'fa-solid fa-chevron-right' : 'fa-solid fa-chevron-left', ...(ngDevMode ? [{ debugName: "scrollBackwardIcon" }] : /* istanbul ignore next */ []));
+        this.isMiddlePanning = signal(false, ...(ngDevMode ? [{ debugName: "isMiddlePanning" }] : /* istanbul ignore next */ []));
+        this.middlePanSession = null;
+        this.middlePanMoved = false;
+        //#endregion
+        //#region ---- Layout Helpers ----
+        this.#onTabsScroll = () => {
+            this.#updateScrollState();
+        };
+        this.#onMiddlePanMove = (event) => {
+            const session = this.middlePanSession;
+            if (!session) {
+                return;
+            }
+            const deltaX = event.clientX - session.lastX;
+            session.lastX = event.clientX;
+            if (Math.abs(event.clientX - session.startX) > 2) {
+                session.moved = true;
+            }
+            session.container.scrollBy({ left: -deltaX });
+            this.#updateScrollState();
+        };
+        this.#onMiddlePanUp = (event) => {
+            if (event.button !== 1 && event.buttons !== 0) {
+                return;
+            }
+            this.#endMiddlePan();
+        };
+        //#endregion
+        //#region ---- Tab Strip Sync ----
+        /** Scrolls the active tab into view when the strip overflows horizontally. */
+        this.#scrollActiveTabIntoView = effect(() => {
+            const activeKey = this.tabNavigation.activeKey();
+            const tabs = this.tabNavigation.tabList();
+            this.tabWidthPx();
+            this.stripWidthPx();
+            if (!activeKey || !tabs.length) {
+                return;
+            }
+            untracked(() => {
+                queueMicrotask(() => {
+                    this.#updateScrollState();
+                    this.#scrollTabIntoView(activeKey);
+                });
+            });
+        }, ...(ngDevMode ? [{ debugName: "#scrollActiveTabIntoView" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ---- Lifecycle Methods ----
+    ngAfterViewInit() {
+        this.inHeader.set(this.host.nativeElement.classList.contains('axp-route-tab-bar--in-header'));
+        const strip = this.tabStrip()?.nativeElement;
+        if (!strip) {
+            return;
+        }
+        this.stripWidthPx.set(strip.clientWidth);
+        this.stripResizeObserver = new ResizeObserver(() => {
+            this.stripWidthPx.set(strip.clientWidth);
+            this.#updateScrollState();
+        });
+        this.stripResizeObserver.observe(strip);
+        const scrollElement = this.tabsScroll()?.nativeElement;
+        if (scrollElement) {
+            this.tabsScrollElement = scrollElement;
+            scrollElement.addEventListener('scroll', this.#onTabsScroll, { passive: true });
+            this.tabsScrollObserver = new ResizeObserver(() => {
+                this.#updateScrollState();
+            });
+            this.tabsScrollObserver.observe(scrollElement);
+            const tabList = scrollElement.querySelector('.axp-route-tab-bar__tab-list');
+            if (tabList) {
+                this.tabsScrollObserver.observe(tabList);
+            }
+        }
+        this.#updateScrollState();
+    }
+    ngOnDestroy() {
+        this.#endMiddlePan();
+        this.tabsScrollElement?.removeEventListener('scroll', this.#onTabsScroll);
+        this.stripResizeObserver?.disconnect();
+        this.tabsScrollObserver?.disconnect();
+    }
+    //#endregion
+    //#region ---- Layout Helpers ----
+    #onTabsScroll;
+    /** Updates overflow and edge scroll affordances from the live tab strip. */
+    #updateScrollState() {
+        const tabsElement = this.#getTabsScrollElement();
+        if (!tabsElement) {
+            this.hasHorizontalOverflow.set(false);
+            this.canScrollForward.set(false);
+            this.canScrollBackward.set(false);
+            return;
+        }
+        const hasOverflow = tabsElement.scrollWidth - tabsElement.clientWidth > 1;
+        this.hasHorizontalOverflow.set(hasOverflow);
+        if (!hasOverflow) {
+            this.canScrollForward.set(false);
+            this.canScrollBackward.set(false);
+            return;
+        }
+        this.canScrollForward.set(!!this.#findScrollTarget(tabsElement, 'forward'));
+        this.canScrollBackward.set(!!this.#findScrollTarget(tabsElement, 'backward'));
+    }
+    #getTabsScrollElement() {
+        return this.tabsScrollElement ?? this.tabsScroll()?.nativeElement ?? null;
+    }
+    #isTabsRtl() {
+        const tabsElement = this.#getTabsScrollElement();
+        if (!tabsElement) {
+            return false;
+        }
+        return getComputedStyle(tabsElement).direction === 'rtl';
+    }
+    #findScrollTarget(container, direction) {
+        const tabs = Array.from(container.querySelectorAll('[data-tab-key]'));
+        if (!tabs.length) {
+            return null;
+        }
+        const bounds = container.getBoundingClientRect();
+        const epsilon = 2;
+        const isRtl = this.#isTabsRtl();
+        if (direction === 'forward') {
+            if (!isRtl) {
+                return tabs.find((tab) => tab.getBoundingClientRect().right > bounds.right + epsilon) ?? null;
+            }
+            return [...tabs].reverse().find((tab) => tab.getBoundingClientRect().left < bounds.left - epsilon) ?? null;
+        }
+        if (!isRtl) {
+            return [...tabs].reverse().find((tab) => tab.getBoundingClientRect().left < bounds.left - epsilon) ?? null;
+        }
+        return tabs.find((tab) => tab.getBoundingClientRect().right > bounds.right + epsilon) ?? null;
+    }
+    /** Scrolls the strip toward hidden tabs on the requested edge. */
+    scrollTabs(direction) {
+        const container = this.#getTabsScrollElement();
+        if (!container) {
+            return;
+        }
+        const target = this.#findScrollTarget(container, direction);
+        target?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+    }
+    /** Smoothly brings a tab header into view inside the scrollable strip. */
+    #scrollTabIntoView(key) {
+        const scrollElement = this.#getTabsScrollElement();
+        const activeTab = scrollElement?.querySelector(`[data-tab-key="${key}"]`);
+        activeTab?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+    }
+    /** Starts middle-mouse drag scrolling on the tab strip. */
+    onTabsScrollMouseDown(event) {
+        if (event.button !== 1) {
+            return;
+        }
+        if (event.target.closest('.axp-route-tab-bar__close')) {
+            return;
+        }
+        const container = this.#getTabsScrollElement();
+        if (!container) {
+            return;
+        }
+        event.preventDefault();
+        this.middlePanSession = {
+            container,
+            startX: event.clientX,
+            lastX: event.clientX,
+            moved: false,
+        };
+        this.isMiddlePanning.set(true);
+        document.body.style.cursor = 'grabbing';
+        window.addEventListener('mousemove', this.#onMiddlePanMove);
+        window.addEventListener('mouseup', this.#onMiddlePanUp);
+    }
+    #onMiddlePanMove;
+    #onMiddlePanUp;
+    #endMiddlePan() {
+        window.removeEventListener('mousemove', this.#onMiddlePanMove);
+        window.removeEventListener('mouseup', this.#onMiddlePanUp);
+        document.body.style.cursor = '';
+        this.isMiddlePanning.set(false);
+        this.middlePanMoved = this.middlePanSession?.moved ?? false;
+        this.middlePanSession = null;
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    /** Whether a tab can be dragged (home tab stays fixed at the start). */
+    isTabDragDisabled(tab) {
+        return tab.key === AXP_HOME_TAB_KEY;
+    }
+    onTabDragStarted() {
+        this.isTabDragging.set(true);
+    }
+    onTabDragEnded() {
+        queueMicrotask(() => {
+            this.isTabDragging.set(false);
+        });
+    }
+    onTabDropped(event) {
+        this.tabNavigation.reorderTabs(event.previousIndex, event.currentIndex);
+    }
+    async onTabActivate(tab, event) {
+        if (this.isTabDragging() || this.suppressTabChange()) {
+            return;
+        }
+        if (event.defaultPrevented) {
+            return;
+        }
+        this.#scrollTabIntoView(tab.key);
+        if (tab.key === this.tabNavigation.activeKey()) {
+            return;
+        }
+        await this.tabNavigation.activateTabKey(tab.key);
+    }
+    /** Resolves tab metadata for context menu actions. */
+    findTab(key) {
+        return this.tabNavigation.tabList().find((item) => item.key === key);
+    }
+    /** Resolves tab label parts from structured breadcrumb segments when available. */
+    resolveTabTitleParts(tab, translatedTitle) {
+        return axpResolveTabTitleParts(tab, translatedTitle);
+    }
+    /** Normalizes menu/page icon classes for `ax-icon`. */
+    resolveTabIcon(tab) {
+        const icon = tab.icon?.trim();
+        if (!icon) {
+            return 'fa-light fa-window';
+        }
+        if (icon.includes(' ')) {
+            return icon;
+        }
+        return `fa-light ${icon}`;
+    }
+    /** Closes a tab when the close button is clicked. */
+    async onTabCloseClick(tab, event) {
+        if (!tab.closable || tab.pinned) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.suppressTabChange.set(true);
+        try {
+            await this.tabNavigation.closeTab(tab.key);
+        }
+        finally {
+            this.suppressTabChange.set(false);
+        }
+    }
+    /** Closes a tab on middle mouse button click (browser-style). */
+    async onTabMiddleClick(tab, event) {
+        if (this.middlePanMoved) {
+            this.middlePanMoved = false;
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        if (event.button !== 1 || !tab.closable || tab.pinned) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.suppressTabChange.set(true);
+        try {
+            await this.tabNavigation.closeTab(tab.key);
+        }
+        finally {
+            this.suppressTabChange.set(false);
+        }
+    }
+    async openTabContextMenu(event, key) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.contextTabKey.set(key);
+        const tab = this.findTab(key);
+        const isHomeTab = key === AXP_HOME_TAB_KEY;
+        const closableTabs = this.tabNavigation.tabList().filter((item) => item.closable && !item.pinned);
+        const otherClosableCount = closableTabs.filter((item) => item.key !== key).length;
+        const canCloseTab = !!tab?.closable && !tab.pinned;
+        const [pinText, unpinText, closeText, closeOthersText, closeAllText] = await Promise.all([
+            this.translateService.translateAsync('@general:actions.pin-tab.title'),
+            this.translateService.translateAsync('@general:actions.unpin-tab.title'),
+            this.translateService.translateAsync('@general:actions.close-tab.title'),
+            this.translateService.translateAsync('@general:actions.close-other-tabs.title'),
+            this.translateService.translateAsync('@general:actions.close-all-tabs.title'),
+        ]);
+        const items = [
+            {
+                name: 'toggle-pin',
+                text: tab?.pinned ? unpinText : pinText,
+                icon: tab?.pinned ? 'fa-light fa-thumbtack-slash' : 'fa-light fa-thumbtack',
+                disabled: isHomeTab,
+            },
+            {
+                name: 'close',
+                text: closeText,
+                icon: 'fa-light fa-xmark',
+                disabled: !canCloseTab,
+                break: true,
+            },
+            {
+                name: 'close-others',
+                text: closeOthersText,
+                icon: 'fa-light fa-clone',
+                disabled: otherClosableCount === 0,
+                break: true,
+            },
+            {
+                name: 'close-all',
+                text: closeAllText,
+                icon: 'fa-light fa-table-columns',
+                disabled: closableTabs.length === 0,
+            },
+        ];
+        const menu = this.contextMenu();
+        const targetElement = event.currentTarget;
+        if (!menu) {
+            return;
+        }
+        const openingEvent = {
+            sender: menu,
+            canceled: false,
+            targetElement,
+            items,
+        };
+        menu.showAt({ x: event.clientX, y: event.clientY }, targetElement, openingEvent);
+    }
+    async handleTabContextMenuItemClick(event) {
+        const key = this.contextTabKey();
+        if (!key) {
+            return;
+        }
+        const action = event.item.name;
+        this.suppressTabChange.set(true);
+        try {
+            switch (action) {
+                case 'toggle-pin':
+                    this.tabNavigation.toggleTabPinned(key);
+                    break;
+                case 'close':
+                    await this.tabNavigation.closeTab(key);
+                    break;
+                case 'close-others':
+                    await this.tabNavigation.closeOtherTabs(key);
+                    break;
+                case 'close-all':
+                    await this.tabNavigation.closeAllTabs();
+                    break;
+            }
+        }
+        finally {
+            this.suppressTabChange.set(false);
+            this.contextTabKey.set(null);
+        }
+    }
+    //#endregion
+    //#region ---- Tab Strip Sync ----
+    /** Scrolls the active tab into view when the strip overflows horizontally. */
+    #scrollActiveTabIntoView;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRouteTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRouteTabBarComponent, isStandalone: true, selector: "axp-route-tab-bar", host: { properties: { "class.axp-route-tab-bar--scrollable": "hasHorizontalOverflow()" }, classAttribute: "axp-route-tab-bar" }, viewQueries: [{ propertyName: "tabStrip", first: true, predicate: ["tabStrip"], descendants: true, isSignal: true }, { propertyName: "tabsScroll", first: true, predicate: ["tabsScroll"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: ["tabContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (tabNavigation.isTabBarVisible()) {\n  <div class=\"axp-route-tab-bar__strip\" #tabStrip [style.--axp-tab-width.px]=\"tabWidthPx()\">\n    <div class=\"axp-route-tab-bar__viewport\">\n      @if (canScrollBackward()) {\n        <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--start\">\n          <button\n            type=\"button\"\n            class=\"axp-route-tab-bar__scroll-btn\"\n            [title]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n            [attr.aria-label]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n            (click)=\"scrollTabs('backward')\"\n          >\n            <ax-icon [icon]=\"scrollBackwardIcon()\"></ax-icon>\n          </button>\n        </div>\n      }\n\n      <div\n        class=\"axp-route-tab-bar__scroll-wrap\"\n        [class.axp-route-tab-bar__scroll-wrap--overflow-start]=\"canScrollBackward()\"\n        [class.axp-route-tab-bar__scroll-wrap--overflow-end]=\"canScrollForward()\"\n      >\n        <div\n          #tabsScroll\n          class=\"axp-route-tab-bar__scroll\"\n          [class.axp-route-tab-bar__scroll--panning]=\"isMiddlePanning()\"\n          (mousedown)=\"onTabsScrollMouseDown($event)\"\n        >\n          <div\n            class=\"axp-route-tab-bar__tab-list\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"tabNavigation.tabList()\"\n            (cdkDropListDropped)=\"onTabDropped($event)\"\n          >\n            @for (tab of tabNavigation.tabList(); track tab.key) {\n              @let tabTitle = (tab.title | translate | async) || '';\n              @let tabTitleParts = resolveTabTitleParts(tab, tabTitle);\n              @let isTabDirty = !!tabPreviewService.previews()[tab.key]?.isDirty;\n              @let isTabActive = tabNavigation.activeKey() === tab.key;\n              <ng-template #tabTitleTooltip>\n                <div class=\"axp-route-tab-bar__title-tooltip\">\n                  <span class=\"axp-route-tab-bar__title-tooltip-prefix\">{{ tabTitleParts.prefix }}</span>\n                  <span class=\"axp-route-tab-bar__title-tooltip-leaf\">{{ tabTitleParts.leaf }}</span>\n                  @if (isTabDirty) {\n                    <span class=\"axp-route-tab-bar__title-tooltip-dirty\">\n                      {{ '@general:terms.interface.save-status.not-saved.description' | translate | async }}\n                    </span>\n                  }\n                </div>\n              </ng-template>\n              <div\n                class=\"axp-route-tab-bar__tab\"\n                [class.axp-route-tab-bar__tab--active]=\"isTabActive\"\n                [class.axp-route-tab-bar__tab--dirty]=\"isTabDirty\"\n                [class.axp-route-tab-bar__tab--dragging]=\"isTabDragging()\"\n                [attr.data-tab-key]=\"tab.key\"\n                role=\"tab\"\n                [attr.aria-selected]=\"isTabActive\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                [cdkDragData]=\"tab\"\n                [cdkDragDisabled]=\"isTabDragDisabled(tab)\"\n                (cdkDragStarted)=\"onTabDragStarted()\"\n                (cdkDragEnded)=\"onTabDragEnded()\"\n                (click)=\"onTabActivate(tab, $event)\"\n              >\n                <div\n                  class=\"axp-route-tab-bar__tab-inner\"\n                  cdkDragHandle\n                  [axTooltip]=\"tabTitleTooltip\"\n                  [axTooltipOpenAfter]=\"tabTitleTooltipOpenAfterMs\"\n                  [axTooltipDisabled]=\"!tabTitleParts.prefix || isTabActive\"\n                  axTooltipPlacement=\"bottom\"\n                  [attr.aria-label]=\"isTabDirty ? ('@general:terms.interface.save-status.not-saved.title' | translate | async) : null\"\n                  (contextmenu)=\"openTabContextMenu($event, tab.key)\"\n                  (auxclick)=\"onTabMiddleClick(tab, $event)\"\n                >\n                  <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n                    <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n                  </span>\n\n                  <span class=\"axp-route-tab-bar__tab-title-fade\" axpRouteTabTitleOverflow>\n                    <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n                  </span>\n\n                  @if (tab.pinned) {\n                    <span class=\"axp-route-tab-bar__pin\" aria-hidden=\"true\">\n                      <ax-icon icon=\"fa-solid fa-thumbtack\"></ax-icon>\n                    </span>\n                  } @else if (tab.closable) {\n                    <button\n                      type=\"button\"\n                      class=\"axp-route-tab-bar__close\"\n                      [title]=\"'@general:actions.close-tab.title' | translate | async\"\n                      (click)=\"onTabCloseClick(tab, $event)\"\n                    >\n                      <ax-icon icon=\"far fa-xmark\"></ax-icon>\n                    </button>\n                  }\n                </div>\n\n                <ng-template cdkDragPreview>\n                  <div\n                    class=\"axp-route-tab-bar__drag-preview\"\n                    [class.axp-route-tab-bar__drag-preview--in-header]=\"inHeader()\"\n                    [class.axp-route-tab-bar__drag-preview--active]=\"isTabActive\"\n                    [class.axp-route-tab-bar__drag-preview--dirty]=\"isTabDirty\"\n                    [style.width.px]=\"tabWidthPx()\"\n                  >\n                    <div class=\"axp-route-tab-bar__drag-preview-inner\">\n                      <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n                        <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n                      </span>\n                      <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n                    </div>\n                  </div>\n                </ng-template>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (canScrollForward()) {\n        <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--end\">\n          <button\n            type=\"button\"\n            class=\"axp-route-tab-bar__scroll-btn\"\n            [title]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n            [attr.aria-label]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n            (click)=\"scrollTabs('forward')\"\n          >\n            <ax-icon [icon]=\"scrollForwardIcon()\"></ax-icon>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<ax-context-menu\n  #tabContextMenu\n  [closeOn]=\"'click'\"\n  [orientation]=\"'vertical'\"\n  (onItemClick)=\"handleTabContextMenuItemClick($event)\"\n></ax-context-menu>\n", styles: ["axp-route-tab-bar{display:block;min-width:0;--axp-route-tab-bar-fade: var(--ax-sys-color-lightest-surface);--axp-route-tab-bar-chevron-size: 2rem}axp-route-tab-bar .axp-route-tab-bar__strip{display:flex;align-items:stretch;gap:.5rem;min-width:0}axp-route-tab-bar .axp-route-tab-bar__viewport{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;min-width:0;height:100%;gap:.25rem}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .ax-tabs-scroll-area,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list{overflow:visible!important;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .ax-tabs-scroll-area::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}axp-route-tab-bar .axp-route-tab-bar__scroll-rail{display:flex;flex:0 0 var(--axp-route-tab-bar-chevron-size);align-items:center;justify-content:center;align-self:center;width:var(--axp-route-tab-bar-chevron-size);min-width:var(--axp-route-tab-bar-chevron-size);height:var(--axp-route-tab-bar-tab-row-height, 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap{position:relative;flex:1 1 auto;min-width:0;height:100%;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{content:\"\";position:absolute;inset-block:0;width:1.5rem;z-index:1;pointer-events:none}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{inset-inline-start:0;background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-inline-end:0;background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll{width:100%;min-width:0;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;cursor:default;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning,axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}axp-route-tab-bar .axp-route-tab-bar__tabs-host{height:100%;min-width:0;width:max-content}axp-route-tab-bar .axp-route-tab-bar__tab-list{display:flex;flex:none;flex-wrap:nowrap;align-items:stretch;width:max-content;min-width:max-content;height:100%;gap:.5rem}axp-route-tab-bar .axp-route-tab-bar__tab{cursor:pointer;flex:0 0 var(--axp-tab-width, 5.5rem);width:var(--axp-tab-width, 5.5rem);min-width:var(--axp-tab-width, 5.5rem);max-width:var(--axp-tab-width, 5.5rem);height:100%;transform:translateY(0);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-disabled{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging,axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging .axp-route-tab-bar__tab-inner{cursor:grabbing}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-placeholder{opacity:.35}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-animating{transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab-list.cdk-drop-list-dragging .axp-route-tab-bar__tab:not(.cdk-drag-placeholder){transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__scroll-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:0;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.88;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}axp-route-tab-bar .axp-route-tab-bar__scroll-btn ax-icon{font-size:.75rem}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:hover{opacity:1}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:focus-visible{opacity:1;outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:1px}axp-route-tab-bar .axp-route-tab-bar__tab-inner{position:relative;display:flex;justify-content:space-between;width:100%;align-items:center;gap:.375rem;min-width:0;max-width:100%;height:100%;padding-inline:.625rem;cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab-inner.cdk-drag-handle{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab--dirty{position:relative}axp-route-tab-bar .axp-route-tab-bar__tab--dirty:before{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500));pointer-events:none}axp-route-tab-bar .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}axp-route-tab-bar .axp-route-tab-bar__tab-icon ax-icon{font-size:.875rem}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade{position:relative;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__tab-title{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;line-height:1.25rem}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__pin{display:inline-flex;flex-shrink:0;color:inherit}axp-route-tab-bar .axp-route-tab-bar__pin ax-icon{font-size:.6875rem}axp-route-tab-bar .axp-route-tab-bar__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:0;height:1.25rem;margin:0;padding:0;overflow:hidden;border:none;background:transparent;color:inherit;border-radius:var(--ax-sys-border-radius);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .15s ease,width .15s ease,background-color .15s ease}axp-route-tab-bar .axp-route-tab-bar__close ax-icon{font-size:.75rem}axp-route-tab-bar .axp-route-tab-bar__tab:hover .axp-route-tab-bar__close,axp-route-tab-bar .axp-route-tab-bar__close:focus-visible{width:1.25rem;opacity:.72;pointer-events:auto}axp-route-tab-bar .axp-route-tab-bar__close:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header){border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__strip{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));padding-inline:.5rem}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{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-route-tab-bar.axp-route-tab-bar--in-header{align-self:stretch;height:100%;--axp-route-tab-bar-fade: var(--ax-sys-color-primary-surface);--axp-route-tab-bar-tab-row-height: 2.25rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__strip{display:flex;align-self:stretch;height:100%;align-items:stretch;background:transparent;color:rgb(var(--ax-sys-color-on-primary-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__viewport{align-items:flex-end}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-rail{align-self:flex-end;margin-bottom:0}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-block-end:0;inset-block-start:auto;height:var(--axp-route-tab-bar-tab-row-height)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll{cursor:default}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab-list{align-self:stretch;align-items:flex-end;min-height:0;padding-top:1rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab{align-self:center;padding:0;border-top-left-radius:.5rem;border-top-right-radius:.5rem;border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:rgb(var(--ax-sys-color-primary-dark-surface));color:rgb(var(--ax-sys-color-on-primary-dark-surface));border-color:rgb(var(--ax-sys-color-border-primary-dark-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab ax-icon{color:inherit}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:rgb(var(--ax-sys-color-primary-light-surface));color:rgb(var(--ax-sys-color-on-primary-light-surface));border-color:rgb(var(--ax-sys-color-border-primary-light-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{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-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-primary-darkest-surface));color:rgb(var(--ax-sys-color-on-primary-darkest-surface));border-color:rgb(var(--ax-sys-color-border-primary-darkest-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab .axp-route-tab-bar__close:hover{background-color:rgb(var(--ax-sys-color-primary-light-surface));color:rgb(var(--ax-sys-color-on-primary-light-surface));border-color:rgb(var(--ax-sys-color-border-primary-light-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active .axp-route-tab-bar__close:hover{background-color:rgb(var(--ax-sys-color-primary-light-surface));color:rgb(var(--ax-sys-color-on-primary-light-surface));border-color:rgb(var(--ax-sys-color-border-primary-light-surface))}.cdk-drag-preview.axp-route-tab-bar__drag-preview{display:flex;align-items:center;box-sizing:border-box;height:var(--axp-route-tab-bar-tab-row-height, 2.25rem);opacity:.96;cursor:grabbing;box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.16),0 1px 3px rgb(var(--ax-sys-color-dark)/.12)}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__drag-preview-inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0;height:100%;padding-inline:.625rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon ax-icon{font-size:.875rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty{position:relative}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty:before{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500));pointer-events:none}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header{border-top-left-radius:.5rem;border-top-right-radius:.5rem;border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:rgb(var(--ax-sys-color-primary-dark-surface));color:rgb(var(--ax-sys-color-on-primary-dark-surface));border-color:rgb(var(--ax-sys-color-border-primary-dark-surface))}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active{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))}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-primary-darkest-surface));color:rgb(var(--ax-sys-color-on-primary-darkest-surface));border-color:rgb(var(--ax-sys-color-border-primary-darkest-surface))}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header){border-radius:.375rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header).axp-route-tab-bar__drag-preview--active{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-route-tab-bar__title-tooltip{display:flex;flex-direction:column;gap:.25rem;max-width:20rem;padding:.75rem 1rem;text-align:start;border-radius:var(--ax-sys-border-radius);background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.12),0 1px 3px rgb(var(--ax-sys-color-dark)/.08)}.axp-route-tab-bar__title-tooltip-prefix{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;line-height:1rem;opacity:.82}.axp-route-tab-bar__title-tooltip-leaf{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-route-tab-bar__title-tooltip-dirty{margin-top:.25rem;padding-top:.5rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));font-size:.75rem;line-height:1.125rem;color:rgb(var(--ax-sys-color-warning-600))}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2$3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRouteTabBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-route-tab-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'axp-route-tab-bar',
+                        '[class.axp-route-tab-bar--scrollable]': 'hasHorizontalOverflow()',
+                    }, imports: [
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDragPreview,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXTooltipModule,
+                        AXContextMenuComponent,
+                        AsyncPipe,
+                    ], template: "@if (tabNavigation.isTabBarVisible()) {\n  <div class=\"axp-route-tab-bar__strip\" #tabStrip [style.--axp-tab-width.px]=\"tabWidthPx()\">\n    <div class=\"axp-route-tab-bar__viewport\">\n      @if (canScrollBackward()) {\n        <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--start\">\n          <button\n            type=\"button\"\n            class=\"axp-route-tab-bar__scroll-btn\"\n            [title]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n            [attr.aria-label]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n            (click)=\"scrollTabs('backward')\"\n          >\n            <ax-icon [icon]=\"scrollBackwardIcon()\"></ax-icon>\n          </button>\n        </div>\n      }\n\n      <div\n        class=\"axp-route-tab-bar__scroll-wrap\"\n        [class.axp-route-tab-bar__scroll-wrap--overflow-start]=\"canScrollBackward()\"\n        [class.axp-route-tab-bar__scroll-wrap--overflow-end]=\"canScrollForward()\"\n      >\n        <div\n          #tabsScroll\n          class=\"axp-route-tab-bar__scroll\"\n          [class.axp-route-tab-bar__scroll--panning]=\"isMiddlePanning()\"\n          (mousedown)=\"onTabsScrollMouseDown($event)\"\n        >\n          <div\n            class=\"axp-route-tab-bar__tab-list\"\n            cdkDropList\n            cdkDropListOrientation=\"horizontal\"\n            [cdkDropListData]=\"tabNavigation.tabList()\"\n            (cdkDropListDropped)=\"onTabDropped($event)\"\n          >\n            @for (tab of tabNavigation.tabList(); track tab.key) {\n              @let tabTitle = (tab.title | translate | async) || '';\n              @let tabTitleParts = resolveTabTitleParts(tab, tabTitle);\n              @let isTabDirty = !!tabPreviewService.previews()[tab.key]?.isDirty;\n              @let isTabActive = tabNavigation.activeKey() === tab.key;\n              <ng-template #tabTitleTooltip>\n                <div class=\"axp-route-tab-bar__title-tooltip\">\n                  <span class=\"axp-route-tab-bar__title-tooltip-prefix\">{{ tabTitleParts.prefix }}</span>\n                  <span class=\"axp-route-tab-bar__title-tooltip-leaf\">{{ tabTitleParts.leaf }}</span>\n                  @if (isTabDirty) {\n                    <span class=\"axp-route-tab-bar__title-tooltip-dirty\">\n                      {{ '@general:terms.interface.save-status.not-saved.description' | translate | async }}\n                    </span>\n                  }\n                </div>\n              </ng-template>\n              <div\n                class=\"axp-route-tab-bar__tab\"\n                [class.axp-route-tab-bar__tab--active]=\"isTabActive\"\n                [class.axp-route-tab-bar__tab--dirty]=\"isTabDirty\"\n                [class.axp-route-tab-bar__tab--dragging]=\"isTabDragging()\"\n                [attr.data-tab-key]=\"tab.key\"\n                role=\"tab\"\n                [attr.aria-selected]=\"isTabActive\"\n                cdkDrag\n                cdkDragLockAxis=\"x\"\n                [cdkDragData]=\"tab\"\n                [cdkDragDisabled]=\"isTabDragDisabled(tab)\"\n                (cdkDragStarted)=\"onTabDragStarted()\"\n                (cdkDragEnded)=\"onTabDragEnded()\"\n                (click)=\"onTabActivate(tab, $event)\"\n              >\n                <div\n                  class=\"axp-route-tab-bar__tab-inner\"\n                  cdkDragHandle\n                  [axTooltip]=\"tabTitleTooltip\"\n                  [axTooltipOpenAfter]=\"tabTitleTooltipOpenAfterMs\"\n                  [axTooltipDisabled]=\"!tabTitleParts.prefix || isTabActive\"\n                  axTooltipPlacement=\"bottom\"\n                  [attr.aria-label]=\"isTabDirty ? ('@general:terms.interface.save-status.not-saved.title' | translate | async) : null\"\n                  (contextmenu)=\"openTabContextMenu($event, tab.key)\"\n                  (auxclick)=\"onTabMiddleClick(tab, $event)\"\n                >\n                  <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n                    <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n                  </span>\n\n                  <span class=\"axp-route-tab-bar__tab-title-fade\" axpRouteTabTitleOverflow>\n                    <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n                  </span>\n\n                  @if (tab.pinned) {\n                    <span class=\"axp-route-tab-bar__pin\" aria-hidden=\"true\">\n                      <ax-icon icon=\"fa-solid fa-thumbtack\"></ax-icon>\n                    </span>\n                  } @else if (tab.closable) {\n                    <button\n                      type=\"button\"\n                      class=\"axp-route-tab-bar__close\"\n                      [title]=\"'@general:actions.close-tab.title' | translate | async\"\n                      (click)=\"onTabCloseClick(tab, $event)\"\n                    >\n                      <ax-icon icon=\"far fa-xmark\"></ax-icon>\n                    </button>\n                  }\n                </div>\n\n                <ng-template cdkDragPreview>\n                  <div\n                    class=\"axp-route-tab-bar__drag-preview\"\n                    [class.axp-route-tab-bar__drag-preview--in-header]=\"inHeader()\"\n                    [class.axp-route-tab-bar__drag-preview--active]=\"isTabActive\"\n                    [class.axp-route-tab-bar__drag-preview--dirty]=\"isTabDirty\"\n                    [style.width.px]=\"tabWidthPx()\"\n                  >\n                    <div class=\"axp-route-tab-bar__drag-preview-inner\">\n                      <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n                        <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n                      </span>\n                      <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n                    </div>\n                  </div>\n                </ng-template>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      @if (canScrollForward()) {\n        <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--end\">\n          <button\n            type=\"button\"\n            class=\"axp-route-tab-bar__scroll-btn\"\n            [title]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n            [attr.aria-label]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n            (click)=\"scrollTabs('forward')\"\n          >\n            <ax-icon [icon]=\"scrollForwardIcon()\"></ax-icon>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<ax-context-menu\n  #tabContextMenu\n  [closeOn]=\"'click'\"\n  [orientation]=\"'vertical'\"\n  (onItemClick)=\"handleTabContextMenuItemClick($event)\"\n></ax-context-menu>\n", styles: ["axp-route-tab-bar{display:block;min-width:0;--axp-route-tab-bar-fade: var(--ax-sys-color-lightest-surface);--axp-route-tab-bar-chevron-size: 2rem}axp-route-tab-bar .axp-route-tab-bar__strip{display:flex;align-items:stretch;gap:.5rem;min-width:0}axp-route-tab-bar .axp-route-tab-bar__viewport{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;min-width:0;height:100%;gap:.25rem}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .ax-tabs-scroll-area,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list{overflow:visible!important;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .ax-tabs-scroll-area::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}axp-route-tab-bar .axp-route-tab-bar__scroll-rail{display:flex;flex:0 0 var(--axp-route-tab-bar-chevron-size);align-items:center;justify-content:center;align-self:center;width:var(--axp-route-tab-bar-chevron-size);min-width:var(--axp-route-tab-bar-chevron-size);height:var(--axp-route-tab-bar-tab-row-height, 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap{position:relative;flex:1 1 auto;min-width:0;height:100%;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{content:\"\";position:absolute;inset-block:0;width:1.5rem;z-index:1;pointer-events:none}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{inset-inline-start:0;background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-inline-end:0;background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll{width:100%;min-width:0;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;cursor:default;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning,axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}axp-route-tab-bar .axp-route-tab-bar__tabs-host{height:100%;min-width:0;width:max-content}axp-route-tab-bar .axp-route-tab-bar__tab-list{display:flex;flex:none;flex-wrap:nowrap;align-items:stretch;width:max-content;min-width:max-content;height:100%;gap:.5rem}axp-route-tab-bar .axp-route-tab-bar__tab{cursor:pointer;flex:0 0 var(--axp-tab-width, 5.5rem);width:var(--axp-tab-width, 5.5rem);min-width:var(--axp-tab-width, 5.5rem);max-width:var(--axp-tab-width, 5.5rem);height:100%;transform:translateY(0);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-disabled{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging,axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging .axp-route-tab-bar__tab-inner{cursor:grabbing}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-placeholder{opacity:.35}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-animating{transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab-list.cdk-drop-list-dragging .axp-route-tab-bar__tab:not(.cdk-drag-placeholder){transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__scroll-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:0;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.88;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}axp-route-tab-bar .axp-route-tab-bar__scroll-btn ax-icon{font-size:.75rem}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:hover{opacity:1}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:focus-visible{opacity:1;outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:1px}axp-route-tab-bar .axp-route-tab-bar__tab-inner{position:relative;display:flex;justify-content:space-between;width:100%;align-items:center;gap:.375rem;min-width:0;max-width:100%;height:100%;padding-inline:.625rem;cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab-inner.cdk-drag-handle{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab--dirty{position:relative}axp-route-tab-bar .axp-route-tab-bar__tab--dirty:before{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500));pointer-events:none}axp-route-tab-bar .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}axp-route-tab-bar .axp-route-tab-bar__tab-icon ax-icon{font-size:.875rem}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade{position:relative;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__tab-title{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;line-height:1.25rem}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__pin{display:inline-flex;flex-shrink:0;color:inherit}axp-route-tab-bar .axp-route-tab-bar__pin ax-icon{font-size:.6875rem}axp-route-tab-bar .axp-route-tab-bar__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:0;height:1.25rem;margin:0;padding:0;overflow:hidden;border:none;background:transparent;color:inherit;border-radius:var(--ax-sys-border-radius);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .15s ease,width .15s ease,background-color .15s ease}axp-route-tab-bar .axp-route-tab-bar__close ax-icon{font-size:.75rem}axp-route-tab-bar .axp-route-tab-bar__tab:hover .axp-route-tab-bar__close,axp-route-tab-bar .axp-route-tab-bar__close:focus-visible{width:1.25rem;opacity:.72;pointer-events:auto}axp-route-tab-bar .axp-route-tab-bar__close:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header){border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__strip{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));padding-inline:.5rem}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{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-route-tab-bar.axp-route-tab-bar--in-header{align-self:stretch;height:100%;--axp-route-tab-bar-fade: var(--ax-sys-color-primary-surface);--axp-route-tab-bar-tab-row-height: 2.25rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__strip{display:flex;align-self:stretch;height:100%;align-items:stretch;background:transparent;color:rgb(var(--ax-sys-color-on-primary-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__viewport{align-items:flex-end}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-rail{align-self:flex-end;margin-bottom:0}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-block-end:0;inset-block-start:auto;height:var(--axp-route-tab-bar-tab-row-height)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll{cursor:default}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab-list{align-self:stretch;align-items:flex-end;min-height:0;padding-top:1rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab{align-self:center;padding:0;border-top-left-radius:.5rem;border-top-right-radius:.5rem;border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:rgb(var(--ax-sys-color-primary-dark-surface));color:rgb(var(--ax-sys-color-on-primary-dark-surface));border-color:rgb(var(--ax-sys-color-border-primary-dark-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab ax-icon{color:inherit}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:rgb(var(--ax-sys-color-primary-light-surface));color:rgb(var(--ax-sys-color-on-primary-light-surface));border-color:rgb(var(--ax-sys-color-border-primary-light-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{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-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-primary-darkest-surface));color:rgb(var(--ax-sys-color-on-primary-darkest-surface));border-color:rgb(var(--ax-sys-color-border-primary-darkest-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab .axp-route-tab-bar__close:hover{background-color:rgb(var(--ax-sys-color-primary-light-surface));color:rgb(var(--ax-sys-color-on-primary-light-surface));border-color:rgb(var(--ax-sys-color-border-primary-light-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active .axp-route-tab-bar__close:hover{background-color:rgb(var(--ax-sys-color-primary-light-surface));color:rgb(var(--ax-sys-color-on-primary-light-surface));border-color:rgb(var(--ax-sys-color-border-primary-light-surface))}.cdk-drag-preview.axp-route-tab-bar__drag-preview{display:flex;align-items:center;box-sizing:border-box;height:var(--axp-route-tab-bar-tab-row-height, 2.25rem);opacity:.96;cursor:grabbing;box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.16),0 1px 3px rgb(var(--ax-sys-color-dark)/.12)}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__drag-preview-inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0;height:100%;padding-inline:.625rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon ax-icon{font-size:.875rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty{position:relative}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty:before{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500));pointer-events:none}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header{border-top-left-radius:.5rem;border-top-right-radius:.5rem;border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:rgb(var(--ax-sys-color-primary-dark-surface));color:rgb(var(--ax-sys-color-on-primary-dark-surface));border-color:rgb(var(--ax-sys-color-border-primary-dark-surface))}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active{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))}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active:is(.ax-dark *){background-color:rgb(var(--ax-sys-color-primary-darkest-surface));color:rgb(var(--ax-sys-color-on-primary-darkest-surface));border-color:rgb(var(--ax-sys-color-border-primary-darkest-surface))}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header){border-radius:.375rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header).axp-route-tab-bar__drag-preview--active{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-route-tab-bar__title-tooltip{display:flex;flex-direction:column;gap:.25rem;max-width:20rem;padding:.75rem 1rem;text-align:start;border-radius:var(--ax-sys-border-radius);background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.12),0 1px 3px rgb(var(--ax-sys-color-dark)/.08)}.axp-route-tab-bar__title-tooltip-prefix{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;line-height:1rem;opacity:.82}.axp-route-tab-bar__title-tooltip-leaf{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-route-tab-bar__title-tooltip-dirty{margin-top:.25rem;padding-top:.5rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));font-size:.75rem;line-height:1.125rem;color:rgb(var(--ax-sys-color-warning-600))}\n"] }]
+        }], propDecorators: { tabStrip: [{ type: i0.ViewChild, args: ['tabStrip', { isSignal: true }] }], tabsScroll: [{ type: i0.ViewChild, args: ['tabsScroll', { isSignal: true }] }], contextMenu: [{ type: i0.ViewChild, args: ['tabContextMenu', { isSignal: true }] }] } });
+
+class AXPRootLayoutHeaderComponent {
+    //#endregion
+    //#region ---- Lifecycle Methods ----
+    constructor() {
+        //#region ---- Services & Dependencies ----
+        this.config = inject(AXP_PLATFORM_CONFIG_TOKEN);
+        this.router = inject(Router);
+        this.destroyRef = inject(DestroyRef);
+        this.shortcutRegistry = inject(AXPKeyboardShortcutRegistry);
+        this.store = inject(AXPLayoutThemeService);
+        this.tabNavigation = inject(AXPTabNavigationService);
+        this.logo = this.config.logo;
+        this.shortcutRegistry.register({
+            owner: this.destroyRef,
+            id: 'root-layout-toggle-side-menu',
+            priority: AXPKeyboardShortcutPriority.Global,
+            group: '@general:keyboard-shortcuts.groups.global',
+            shortcuts: [
+                {
+                    keys: ['ctrl+shift+b'],
+                    title: '@general:keyboard-shortcuts.actions.toggle-side-menu',
+                    allowInEditableFields: true,
+                    handler: () => {
+                        this.toggleSideMenu();
+                    },
+                },
+            ],
+        });
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    toggleSideMenu() {
+        this.store.toggleSideMenu();
+    }
+    handleLogoClick() {
+        this.router.navigate(['/']);
+    }
+    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-min-w-0 ax-items-center ax-gap-2 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\n<div class=\"axp-root-header__main ax-h-full ax-flex ax-min-w-0 ax-flex-1 ax-items-center ax-gap-2\">\n  @if (tabNavigation.isTabBarVisible()) {\n    <axp-route-tab-bar class=\"axp-route-tab-bar--in-header ax-min-w-0 ax-flex-1 ax-self-stretch\"></axp-route-tab-bar>\n  }\n  <div class=\"ax-flex ax-min-w-0 ax-items-center ax-gap-1\" [class.ax-flex-1]=\"!tabNavigation.isTabBarVisible()\">\n    <axp-component-slot name=\"root-header-start\"></axp-component-slot>\n  </div>\n</div>\n\n<div class=\"ax-flex ax-shrink-0 ax-items-center ax-gap-1\">\n  <axp-component-slot name=\"root-header-end\"></axp-component-slot>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$5.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"] }, { kind: "component", type: AXPRouteTabBarComponent, selector: "axp-route-tab-bar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+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-min-w-0 ax-items-center ax-gap-2 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, AXPRouteTabBarComponent], 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\n<div class=\"axp-root-header__main ax-h-full ax-flex ax-min-w-0 ax-flex-1 ax-items-center ax-gap-2\">\n  @if (tabNavigation.isTabBarVisible()) {\n    <axp-route-tab-bar class=\"axp-route-tab-bar--in-header ax-min-w-0 ax-flex-1 ax-self-stretch\"></axp-route-tab-bar>\n  }\n  <div class=\"ax-flex ax-min-w-0 ax-items-center ax-gap-1\" [class.ax-flex-1]=\"!tabNavigation.isTabBarVisible()\">\n    <axp-component-slot name=\"root-header-start\"></axp-component-slot>\n  </div>\n</div>\n\n<div class=\"ax-flex ax-shrink-0 ax-items-center ax-gap-1\">\n  <axp-component-slot name=\"root-header-end\"></axp-component-slot>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+class AXPRootLayoutMenuComponent {
+    constructor() {
+        //#region ---- Services & Dependencies ----
+        this.menuStore = inject(AXPMenuService);
+        this.router = inject(Router);
+        this.badgeService = inject(AXPTaskBadgeService);
+        this.settingsService = inject(AXPSettingsService);
+        this.visibilityService = inject(AXPMenuVisibilityService);
+        this.themeStore = inject(AXPLayoutThemeService);
+        //#endregion
+        //#region ---- Component State ----
+        this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : /* istanbul ignore next */ []));
+        this.menuMode = this.themeStore.effectiveMenuVerticalMode;
+    }
+    //#endregion
+    async ngOnInit() {
+        this.badgeVisible.set(await this.settingsService.get(AXPThemeLayoutSetting.MenuBadgeVisible));
+        this.settingsService.onChanged.subscribe((setting) => {
+            if (setting.keys.includes(AXPThemeLayoutSetting.MenuBadgeVisible)) {
+                this.badgeVisible.set(setting.values[AXPThemeLayoutSetting.MenuBadgeVisible]);
+            }
+        });
+    }
+    onMenuItemClick(item) {
+        if (item.children?.length) {
+            return;
+        }
+        this.menuStore.executeCommand(item);
+    }
+    /**
+     * Determines whether a menu item should render as active.
+     * Do not bind `routerLink` on `ax-side-menu-item`: that component ignores the `active` input
+     * and only uses `RouterLinkActive`, which cannot match entity detail routes to list menu paths.
+     */
+    /**
+     * In compact mode, keep all branches collapsed so route-driven selection does not
+     * auto-open flyout submenus when switching internal tabs.
+     */
+    isMenuItemCollapsed(item) {
+        if (this.menuMode() === AXPMenuVerticalMode.Compact) {
+            return true;
+        }
+        return !this.menuStore.isItemOpen(item);
+    }
+    isMenuItemActive(item) {
+        const selected = this.menuStore.selectedMenuItem().item;
+        if (selected && this.isSameMenuItem(selected, item)) {
+            return true;
+        }
+        const routePath = this.getMenuItemRoutePath(item);
+        if (!routePath) {
+            return false;
+        }
+        return axpMenuPathsMatch(routePath, this.router.url).isMatch;
+    }
+    isSameMenuItem(left, right) {
+        if (left === right) {
+            return true;
+        }
+        return !!left.name && left.name === right.name;
+    }
+    getMenuItemRoutePath(item) {
+        const navigation = this.extractRouterNavigation(item);
+        if (!navigation?.path) {
+            return null;
+        }
+        return this.normalizeRouterPath(navigation.path);
+    }
+    sort(items) {
+        return sortBy(items, [(c) => c.priority ?? 0, (c) => c.text]);
+    }
+    getMenuBadge(item) {
+        return AXPMenuBadgeHelper.getTotalCount(item, this.badgeService);
+    }
+    //#region ----   Menu Visibility Helpers   ----
+    /**
+     * Checks if a menu item should be visible based on permissions and features.
+     */
+    isItemVisible(item) {
+        return this.visibilityService.isItemVisible(item);
+    }
+    /**
+     * Determines if a menu item should be rendered.
+     * A menu item should be rendered if:
+     * 1. It has a routerLink, OR
+     * 2. It has visible children, OR
+     * 3. It has a command (for non-router navigation)
+     */
+    shouldRenderMenuItem(item) {
+        return this.visibilityService.shouldRenderMenuItem(item, (item) => this.getRouterLink(item));
+    }
+    /**
+     * Checks if an item takes up visual space in the menu (group title or rendered menu item).
+     */
+    isItemRendered(item) {
+        if (item.type === 'break') {
+            return false;
+        }
+        if (item.type === 'group') {
+            return this.isItemVisible(item);
+        }
+        return this.shouldRenderMenuItem(item);
+    }
+    /**
+     * Determines if a divider should be shown. A divider is only shown when there is
+     * visible content on both sides; if before or after is blank, the divider is hidden.
+     */
+    shouldShowDivider(item, items, index) {
+        if (item.type !== 'break' || !items || index < 0) {
+            return false;
+        }
+        const hasVisibleBefore = items.slice(0, index).some((i) => this.isItemRendered(i));
+        const hasVisibleAfter = items.slice(index + 1).some((i) => this.isItemRendered(i));
+        return hasVisibleBefore && hasVisibleAfter;
+    }
+    //#endregion
+    //#region ----   Menu Navigation Helpers   ----
+    /**
+     * Builds a UrlTree that can be consumed by the routerLink directive when the menu item targets
+     * an internal route. When the item does not represent an internal route, null is returned so the
+     * command execution pipeline remains responsible for navigation.
+     */
+    getRouterLink(item) {
+        const routePath = this.getMenuItemRoutePath(item);
+        if (!routePath) {
+            return null;
+        }
+        const navigation = this.extractRouterNavigation(item);
+        if (!navigation || !this.isRouterLinkCompatible(navigation)) {
+            return null;
+        }
+        try {
+            return this.router.parseUrl(routePath);
+        }
+        catch (error) {
+            console.warn('Failed to create router link for menu item.', { item, error });
+            return null;
+        }
+    }
+    /**
+     * Extracts internal navigation data regardless of whether it is provided via the legacy `path`
+     * property, a direct navigate command, or the execution command wrapper.
+     */
+    extractRouterNavigation(item) {
+        if (item.path) {
+            return { path: item.path };
+        }
+        const command = item.command;
+        if (!command) {
+            return null;
+        }
+        const navigateCommand = command;
+        if (navigateCommand?.type === 'router' && typeof navigateCommand.options?.path === 'string') {
+            return {
+                path: navigateCommand.options.path,
+                extras: navigateCommand.options.extras,
+            };
+        }
+        const executeCommand = command;
+        if (executeCommand?.options && typeof executeCommand.options === 'object') {
+            const commandOptions = executeCommand.options;
+            if (commandOptions?.type === 'router') {
+                const routerOptions = commandOptions.options ?? commandOptions;
+                if (typeof routerOptions?.path === 'string') {
+                    return {
+                        path: routerOptions.path,
+                        extras: routerOptions.extras,
+                    };
+                }
+            }
+            if (typeof commandOptions?.path === 'string') {
+                return { path: commandOptions.path };
+            }
+        }
+        return null;
+    }
+    /**
+     * Determines whether routerLink can safely be used based on the target path and navigation
+     * extras. If the navigation requires additional runtime behaviour (e.g., opening in a new tab),
+     * we fallback to the imperative command pipeline.
+     */
+    isRouterLinkCompatible(navigation) {
+        if (!navigation.path) {
+            return false;
+        }
+        if (this.isExternalNavigation(navigation.path)) {
+            return false;
+        }
+        const extras = navigation.extras;
+        if (!extras) {
+            return true;
+        }
+        if (extras.target === 'blank') {
+            return false;
+        }
+        const unsupportedKeys = ['skipLocationChange', 'replaceUrl', 'state'];
+        return !unsupportedKeys.some((key) => extras[key] !== undefined);
+    }
+    /**
+     * Ensures router links include a leading slash while preserving any query parameters or
+     * fragments present in the original path.
+     */
+    normalizeRouterPath(path) {
+        const trimmed = path.trim();
+        if (!trimmed.length) {
+            return trimmed;
+        }
+        if (trimmed.startsWith('/') || trimmed.startsWith('?') || trimmed.startsWith('#')) {
+            return trimmed;
+        }
+        return `/${trimmed}`;
+    }
+    isExternalNavigation(path) {
+        const lowerPath = path.trim().toLowerCase();
+        return lowerPath.startsWith('http://') || lowerPath.startsWith('https://');
+    }
+    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\" [mode]=\"menuMode()\">\n  @let sortedItems = sort(menuStore.items());\n  @for (item of sortedItems; track item; let i = $index) {\n    <ng-container\n      [ngTemplateOutlet]=\"recursiveMenu\"\n      [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"\n    >\n    </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' && menuMode() === 'full') {\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-side-menu-item\n        [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\"\n        (onClick)=\"onMenuItemClick(item)\"\n        [active]=\"isMenuItemActive(item)\"\n        [isCollapsed]=\"isMenuItemCollapsed(item)\"\n      >\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\n                [ngTemplateOutlet]=\"recursiveMenu\"\n                [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\"\n              >\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</ng-template>\n", 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$4.AXSideMenuComponent, selector: "ax-side-menu", inputs: ["items", "look", "location", "mode"], outputs: ["itemsChange"] }, { kind: "component", type: i2$4.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: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+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,
+                        AXSideMenuModule,
+                        AXTranslationModule,
+                        AXPTaskBadgeDirective,
+                        AXDecoratorModule,
+                        AXBadgeModule,
+                    ], template: "<ax-side-menu look=\"pills\" [mode]=\"menuMode()\">\n  @let sortedItems = sort(menuStore.items());\n  @for (item of sortedItems; track item; let i = $index) {\n    <ng-container\n      [ngTemplateOutlet]=\"recursiveMenu\"\n      [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"\n    >\n    </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' && menuMode() === 'full') {\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-side-menu-item\n        [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\"\n        (onClick)=\"onMenuItemClick(item)\"\n        [active]=\"isMenuItemActive(item)\"\n        [isCollapsed]=\"isMenuItemCollapsed(item)\"\n      >\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\n                [ngTemplateOutlet]=\"recursiveMenu\"\n                [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\"\n              >\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</ng-template>\n" }]
+        }] });
+
+class AXPHorizontalMenuComponent {
+    constructor() {
+        this.platformConfig = inject(AXP_PLATFORM_CONFIG_TOKEN);
+        this.menuStore = inject(AXPMenuService);
+        this.router = inject(Router);
+        this.layoutService = inject(AXPLayoutThemeService);
+        this.badgeService = inject(AXPTaskBadgeService);
+        this.settingsService = inject(AXPSettingsService);
+        this.visibilityService = inject(AXPMenuVisibilityService);
+        this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : /* istanbul ignore next */ []));
+    }
+    async ngOnInit() {
+        this.badgeVisible.set(await this.settingsService.get(AXPThemeLayoutSetting.MenuBadgeVisible));
+        //subscribe to changes
+        this.settingsService.onChanged.subscribe(setting => {
+            if (setting.keys.includes(AXPThemeLayoutSetting.MenuBadgeVisible)) {
+                this.badgeVisible.set(setting.values[AXPThemeLayoutSetting.MenuBadgeVisible]);
+            }
+        });
+    }
+    onMenuItemClick(item) {
+        if (!item.children?.length) {
+            this.menuStore.executeCommand(item);
+        }
+    }
+    sort(items) {
+        return sortBy$1(items, [c => c.priority ?? 0, c => c.text]);
+    }
+    getMenuBadge(item) {
+        return AXPMenuBadgeHelper.getTotalCount(item, this.badgeService);
+    }
+    //#region ----   Menu Visibility Helpers   ----
+    /**
+     * Checks if a menu item should be visible based on permissions and features.
+     */
+    isItemVisible(item) {
+        return this.visibilityService.isItemVisible(item);
+    }
+    /**
+     * Determines if a menu item should be rendered.
+     * A menu item should be rendered if:
+     * 1. It has a routerLink, OR
+     * 2. It has visible children, OR
+     * 3. It has a command (for non-router navigation)
+     */
+    shouldRenderMenuItem(item) {
+        return this.visibilityService.shouldRenderMenuItem(item, (item) => this.getRouterLink(item));
+    }
+    /**
+     * Checks if an item takes up visual space in the menu (group title or rendered menu item).
+     */
+    isItemRendered(item) {
+        if (item.type === 'break') {
+            return false;
+        }
+        if (item.type === 'group') {
+            return this.isItemVisible(item);
+        }
+        return this.shouldRenderMenuItem(item);
+    }
+    /**
+     * Determines if a divider should be shown. A divider is only shown when there is
+     * visible content on both sides; if before or after is blank, the divider is hidden.
+     */
+    shouldShowDivider(item, items, index) {
+        if (item.type !== 'break' || !items || index < 0) {
+            return false;
+        }
+        const hasVisibleBefore = items.slice(0, index).some((i) => this.isItemRendered(i));
+        const hasVisibleAfter = items.slice(index + 1).some((i) => this.isItemRendered(i));
+        return hasVisibleBefore && hasVisibleAfter;
+    }
+    //#endregion
+    //#region ----   Menu Navigation Helpers   ----
+    /**
+     * Builds a UrlTree that can be consumed by the routerLink directive when the menu item targets
+     * an internal route. When the item does not represent an internal route, null is returned so the
+     * command execution pipeline remains responsible for navigation.
+     */
+    getRouterLink(item) {
+        const navigation = this.extractRouterNavigation(item);
+        if (!navigation) {
+            return null;
+        }
+        if (!this.isRouterLinkCompatible(navigation)) {
+            return null;
+        }
+        const normalizedPath = this.normalizeRouterPath(navigation.path);
+        try {
+            return this.router.parseUrl(normalizedPath);
+        }
+        catch (error) {
+            console.warn('Failed to create router link for menu item.', { item, error });
+            return null;
+        }
+    }
+    /**
+     * Extracts internal navigation data regardless of whether it is provided via the legacy `path`
+     * property, a direct navigate command, or the execution command wrapper.
+     */
+    extractRouterNavigation(item) {
+        if (item.path) {
+            return { path: item.path };
+        }
+        const command = item.command;
+        if (!command) {
+            return null;
+        }
+        const navigateCommand = command;
+        if (navigateCommand?.type === 'router' && typeof navigateCommand.options?.path === 'string') {
+            return {
+                path: navigateCommand.options.path,
+                extras: navigateCommand.options.extras,
+            };
+        }
+        const executeCommand = command;
+        if (executeCommand?.options && typeof executeCommand.options === 'object') {
+            const commandOptions = executeCommand.options;
+            if (commandOptions?.type === 'router') {
+                const routerOptions = commandOptions.options ?? commandOptions;
+                if (typeof routerOptions?.path === 'string') {
+                    return {
+                        path: routerOptions.path,
+                        extras: routerOptions.extras,
+                    };
+                }
+            }
+            if (typeof commandOptions?.path === 'string') {
+                return { path: commandOptions.path };
+            }
+        }
+        return null;
+    }
+    /**
+     * Determines whether routerLink can safely be used based on the target path and navigation
+     * extras. If the navigation requires additional runtime behaviour (e.g., opening in a new tab),
+     * we fallback to the imperative command pipeline.
+     */
+    isRouterLinkCompatible(navigation) {
+        if (!navigation.path) {
+            return false;
+        }
+        if (this.isExternalNavigation(navigation.path)) {
+            return false;
+        }
+        const extras = navigation.extras;
+        if (!extras) {
+            return true;
+        }
+        if (extras.target === 'blank') {
+            return false;
+        }
+        const unsupportedKeys = ['skipLocationChange', 'replaceUrl', 'state'];
+        return !unsupportedKeys.some((key) => extras[key] !== undefined);
+    }
+    /**
+     * Ensures router links include a leading slash while preserving any query parameters or
+     * fragments present in the original path.
+     */
+    normalizeRouterPath(path) {
+        const trimmed = path.trim();
+        if (!trimmed.length) {
+            return trimmed;
+        }
+        if (trimmed.startsWith('/') || trimmed.startsWith('?') || trimmed.startsWith('#')) {
+            return trimmed;
+        }
+        return `/${trimmed}`;
+    }
+    isExternalNavigation(path) {
+        const lowerPath = path.trim().toLowerCase();
+        return lowerPath.startsWith('http://') || lowerPath.startsWith('https://');
+    }
+    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$5.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.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i4.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: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+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,
+                        AXPComponentSlotModule,
+                        AXDecoratorModule,
+                        AXPLogoComponent,
+                        AXMenuModule,
+                        AXTranslationModule,
+                        AXPTaskBadgeDirective,
+                        AXBadgeModule,
+                    ], 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"] }]
+        }] });
+
+class AXPRootHorizontalLayoutComponent {
+    constructor() {
+        this.config = inject(AXP_PLATFORM_CONFIG_TOKEN);
+        this.logo = this.config.logo;
+        this.store = inject(AXPLayoutThemeService);
+    }
+    handleCollapsedChange(value) {
+        if (value) {
+            this.store.closeSideMenu();
+        }
+    }
+    handleResizingEnded(e) {
+        if (e.isUserInteraction) {
+            this.store.setSideMenuWidth(e.value);
+        }
+    }
+    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$6.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$4.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: "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,
+                        AXButtonModule,
+                        AXTranslationModule,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        AXAvatarModule,
+                        AXImageModule,
+                        AXImageModule,
+                        AXPopoverModule,
+                        AXBadgeModule,
+                        AXTabsModule,
+                        AXDrawerModule,
+                        AXSideMenuModule,
+                        AXLoadingModule,
+                        AXPAuthModule,
+                        AXPRootLayoutFooterComponent,
+                        AXPHorizontalMenuComponent,
+                        AXPComponentSlotModule
+                    ], 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"] }]
+        }], propDecorators: { drawer: [{
+                type: ViewChild,
+                args: ['drawer']
+            }] } });
+
+class AXPRootVerticalLayoutComponent {
+    constructor() {
+        this.config = inject(AXP_PLATFORM_CONFIG_TOKEN);
+        this.logo = this.config.logo;
+        this.store = inject(AXPLayoutThemeService);
+        this.deviceService = inject(AXPDeviceService);
+        this.router = inject(Router);
+        /** Recreates the drawer when switching overlay ↔ push to reset internal layout sizing. */
+        this.sideMenuDrawerKey = computed(() => this.deviceService.isSmall() || this.deviceService.isMedium() ? 'overlay' : 'push', ...(ngDevMode ? [{ debugName: "sideMenuDrawerKey" }] : /* istanbul ignore next */ []));
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+            if (this.sideMenuDrawerKey() === 'overlay') {
+                this.store.closeSideMenu();
+            }
+        });
+    }
+    handleResizingEnded(e) {
+        if (e.isUserInteraction) {
+            this.store.setSideMenuDrawerWidth(e.value);
+        }
+    }
+    handleBackdropClick() {
+        this.store.closeSideMenu();
+    }
+    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", ngImport: i0, template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n  <ax-drawer-container>\n    @for (drawerKey of [sideMenuDrawerKey()]; track drawerKey) {\n    <ax-drawer id=\"axp-side-menu-drawer\" [axResizable]=\"drawerKey === 'push'\"\n      class=\"ax-border-lighter ax-bg-lighter dark:ax-border-darkest dark:ax-bg-darkest ax-h-full !ax-flex ax-flex-col\"\n      [class.ax-w-[75%]]=\"drawerKey === 'overlay'\" [width]=\"store.sideMenuDrawerWidth()\" location=\"start\"\n      [collapsed]=\"!store.isSideMenuOpen()\" [closeOnBackdropClick]=\"false\" [defaultWidth]=\"store.sideMenuDrawerWidth()\"\n      [mode]=\"drawerKey === 'overlay' ? 'overlay' : 'push'\" [dblClickAction]=\"'fit'\"\n      (onResizingEnded)=\"handleResizingEnded($event)\" (onResizingDblClick)=\"handleResizingEnded($event)\"\n        (onBackdropClick)=\"handleBackdropClick()\" 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-y-auto ax-overflow-x-hidden\">\n        <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n        <div class=\"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    }\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-component-slot name=\"root-layout-overlay\"></axp-component-slot>\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-side-menu-drawer{box-sizing:border-box}.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$6.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$4.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$4.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$5.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: "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,
+                        AXButtonModule,
+                        AXTranslationModule,
+                        AXDecoratorModule,
+                        AXDropdownModule,
+                        AXAvatarModule,
+                        AXImageModule,
+                        AXImageModule,
+                        AXPopoverModule,
+                        AXBadgeModule,
+                        AXTabsModule,
+                        AXDrawerModule,
+                        AXDrawerModule,
+                        AXSideMenuModule,
+                        AXLoadingModule,
+                        AXPLogoComponent,
+                        AXPAuthModule,
+                        AXResizableDirective,
+                        AXPRootLayoutFooterComponent,
+                        AXPRootLayoutHeaderComponent,
+                        AXPRootLayoutMenuComponent,
+                        AXPComponentSlotModule,
+                    ], template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n  <ax-drawer-container>\n    @for (drawerKey of [sideMenuDrawerKey()]; track drawerKey) {\n    <ax-drawer id=\"axp-side-menu-drawer\" [axResizable]=\"drawerKey === 'push'\"\n      class=\"ax-border-lighter ax-bg-lighter dark:ax-border-darkest dark:ax-bg-darkest ax-h-full !ax-flex ax-flex-col\"\n      [class.ax-w-[75%]]=\"drawerKey === 'overlay'\" [width]=\"store.sideMenuDrawerWidth()\" location=\"start\"\n      [collapsed]=\"!store.isSideMenuOpen()\" [closeOnBackdropClick]=\"false\" [defaultWidth]=\"store.sideMenuDrawerWidth()\"\n      [mode]=\"drawerKey === 'overlay' ? 'overlay' : 'push'\" [dblClickAction]=\"'fit'\"\n      (onResizingEnded)=\"handleResizingEnded($event)\" (onResizingDblClick)=\"handleResizingEnded($event)\"\n        (onBackdropClick)=\"handleBackdropClick()\" 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-y-auto ax-overflow-x-hidden\">\n        <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n        <div class=\"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    }\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-component-slot name=\"root-layout-overlay\"></axp-component-slot>\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-side-menu-drawer{box-sizing:border-box}.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"] }]
+        }], ctorParameters: () => [] });
+
+class AXPRootLayoutComponent {
+    /** Only show the loading dialog when overlay loading stays active longer than this. */
+    static { this.overlayLoadingShowDelayMs = 2000; }
+    constructor() {
+        this.layout = inject(AXPLayoutThemeService);
+        this.menuStore = inject(AXPMenuService);
+        this.router = inject(Router);
+        this.eventService = inject(AXPBroadcastEventService);
+        this.sessionService = inject(AXPSessionService);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.contextStore = inject(AXPContextStore);
+        this.loadingDialog = inject(AXLoadingDialogService);
+        this.translationService = inject(AXTranslationService);
+        this.destroyRef = inject(DestroyRef);
+        this.overlayLoadingDialogRef = null;
+        this.overlayLoadingShowTimer = null;
+        effect(() => {
+            const isLoading = this.layout.isOverlayLoading();
+            untracked(() => {
+                this.syncOverlayLoadingDialog(isLoading);
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            this.cancelOverlayLoadingShowTimer();
+            this.closeOverlayLoadingDialog();
+        });
+    }
+    syncOverlayLoadingDialog(isLoading) {
+        if (isLoading) {
+            if (this.overlayLoadingDialogRef || this.overlayLoadingShowTimer) {
+                return;
+            }
+            this.overlayLoadingShowTimer = setTimeout(() => {
+                this.overlayLoadingShowTimer = null;
+                if (!this.layout.isOverlayLoading()) {
+                    return;
+                }
+                void this.openOverlayLoadingDialog();
+            }, AXPRootLayoutComponent.overlayLoadingShowDelayMs);
+            return;
+        }
+        this.cancelOverlayLoadingShowTimer();
+        this.closeOverlayLoadingDialog();
+    }
+    async openOverlayLoadingDialog() {
+        if (this.overlayLoadingDialogRef || !this.layout.isOverlayLoading()) {
+            return;
+        }
+        this.overlayLoadingDialogRef = this.loadingDialog.show({
+            title: await this.translationService.translateAsync('@general:state-message.loading.title'),
+            mode: 'indeterminate',
+            text: await this.translationService.translateAsync('@general:state-message.loading.description'),
+        });
+    }
+    cancelOverlayLoadingShowTimer() {
+        if (this.overlayLoadingShowTimer) {
+            clearTimeout(this.overlayLoadingShowTimer);
+            this.overlayLoadingShowTimer = null;
+        }
+    }
+    closeOverlayLoadingDialog() {
+        this.overlayLoadingDialogRef?.close();
+        this.overlayLoadingDialogRef = null;
+    }
+    ngOnInit() {
+        this.#syncMenuSelectionByRoute(this.router.url);
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), this.unsubscriber.takeUntilDestroy)
+            .subscribe((event) => {
+            this.#syncMenuSelectionByRoute(event.urlAfterRedirects);
+            this.contextStore.reset();
+        });
+        this.eventService.listen(AXPSessionStatus.SignedOut).subscribe(() => {
+            console.log('signed out in root layout');
+            this.router.navigate(['/auth/login']);
+        });
+        //
+        this.sessionService.status$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async (status) => {
+            // Don't redirect if still loading
+            const isLoading = await firstValueFrom(this.sessionService.isLoading$);
+            if (isLoading) {
+                console.log('Session is still loading, skipping redirect check');
+                return;
+            }
+            const redirectKeys = [AXPSessionStatus.SignedOut, AXPSessionStatus.Unauthenticated, AXPSessionStatus.Expired];
+            if (redirectKeys.includes(status)) {
+                console.log('Redirecting to login due to status:', status);
+                this.router.navigate(['/auth/login']);
+            }
+        });
+    }
+    #syncMenuSelectionByRoute(url) {
+        this.menuStore.selectMenuItemByRoute(url);
+    }
+    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 {
+      <axp-root-vertical-layout></axp-root-vertical-layout>
+    }
+  `, 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: "21.2.9", ngImport: i0, type: AXPRootLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    @if (layout.isMenuHorizontal()) {
+      <axp-root-horizontal-layout></axp-root-horizontal-layout>
+    } @else {
+      <axp-root-vertical-layout></axp-root-vertical-layout>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [AXPRootHorizontalLayoutComponent, AXPRootVerticalLayoutComponent],
+                    providers: [AXUnsubscriber, AXPContextStore],
+                }]
+        }], ctorParameters: () => [] });
+
+var rootLayout_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPRootLayoutComponent: AXPRootLayoutComponent
+});
+
+/**
+ * Route reuse strategy that powers both same-route reuse (`reuse` route data) and tabular
+ * navigation. In tabular mode it detaches the leaf page component of an open tab when the user
+ * switches away, caches the live component instance, and reattaches it on return so state such as
+ * data-table selection, scroll position, and unsaved form values is preserved — like browser tabs.
+ */
+class AXPEntityReuseStrategy {
+    constructor() {
+        //#region ---- Services & Dependencies ----
+        this.routeCache = inject(AXPTabRouteCacheRegistry);
+        /** Lazy lookup avoids Router ↔ RouteReuseStrategy construction cycle (NG0200). */
+        this.injector = inject(Injector);
+        //#endregion
+    }
+    //#endregion
+    //#region ---- Detach / Attach ----
+    shouldDetach(route) {
+        if (!this.routeCache.isEnabled() || !this.isTabCacheRoute(route)) {
+            return false;
+        }
+        const scopedKey = this.scopedTabKeyFor(route);
+        const cacheKey = this.routeCacheKeyFor(route);
+        if (!scopedKey || !cacheKey || !this.routeCache.isOpen(scopedKey)) {
+            return false;
+        }
+        // Keep the live component when navigating within the same scoped tab (e.g. chat → chat/:id).
+        return this.isLeavingScopedTab(route);
+    }
+    store(route, handle) {
+        if (!this.routeCache.isEnabled()) {
+            return;
+        }
+        const key = this.routeCacheKeyFor(route);
+        if (!key) {
+            return;
+        }
+        // A null handle is Angular releasing a just-reattached view; drop it without destroying.
+        if (handle) {
+            this.routeCache.store(key, handle);
+        }
+        else {
+            this.routeCache.release(key);
+        }
+    }
+    shouldAttach(route) {
+        if (!this.routeCache.isEnabled() || !this.isTabCacheRoute(route)) {
+            return false;
+        }
+        const key = this.routeCacheKeyFor(route);
+        return !!key && this.routeCache.has(key);
+    }
+    retrieve(route) {
+        if (!this.routeCache.isEnabled() || !this.isTabCacheRoute(route)) {
+            return null;
+        }
+        const key = this.routeCacheKeyFor(route);
+        return key ? this.routeCache.retrieve(key) : null;
+    }
+    //#endregion
+    //#region ---- Reuse Decision ----
+    shouldReuseRoute(future, curr) {
+        // Reuse the single root-layout shell across module navigations so the heavy shell (menus,
+        // header, session subscriptions, theme) is not destroyed and recreated on every route switch.
+        // Uses `routeConfig.data` (the node's own data) so inherited child data does not leak this flag.
+        if (future.routeConfig?.data?.['rootLayout'] === true && curr.routeConfig?.data?.['rootLayout'] === true) {
+            return true;
+        }
+        const reuseConfig = future.data?.['reuse'];
+        if (reuseConfig === false) {
+            return false;
+        }
+        // `reuse: true` on sibling routes under the same scoped tab (e.g. chat '' ↔ :id).
+        if (reuseConfig === true) {
+            // Same route node re-activated (e.g. settings `:scope` change reusing its `setting-page`).
+            // Use config reference equality, not path strings: different tabs can share a path (e.g. the
+            // empty-path child of both settings and chat), and once the root-layout shell is reused those
+            // siblings get compared directly — a path-only match would wrongly keep the previous content.
+            if (future.routeConfig && future.routeConfig === curr.routeConfig) {
+                return true;
+            }
+            if (curr.data?.['reuse'] === true) {
+                return axpResolveTabKeyFromSnapshot(future) === axpResolveTabKeyFromSnapshot(curr);
+            }
+            return false;
+        }
+        // Baseline "same route node" check. Reference equality (not path strings) so same-path children
+        // of different reused shells (e.g. the empty-path child of notifications vs comments) are treated
+        // as distinct and their content swaps correctly.
+        if (future.routeConfig !== curr.routeConfig) {
+            return false;
+        }
+        if (typeof reuseConfig === 'string') {
+            const paramsChanged = this.haveParamsChanged(future, curr);
+            const queryParamsChanged = this.haveQueryParamsChanged(future, curr);
+            switch (reuseConfig) {
+                case 'paramsChange':
+                    return !queryParamsChanged;
+                case 'queryParamsChange':
+                    return !paramsChanged;
+                case 'paramsOrQueryParamsChange':
+                    return true;
+                default:
+                    return true;
+            }
+        }
+        return true;
+    }
+    //#endregion
+    //#region ---- Helper Methods ----
+    /**
+     * True when this route is the detach/attach target: a routable leaf, or a scoped tab shell
+     * (`data.tab = true`) that owns a nested outlet (e.g. settings page).
+     */
+    isTabCacheRoute(route) {
+        return this.resolveTabCacheTarget(route) === route;
+    }
+    /**
+     * Under a scoped tab, cache the `reuse: true` page shell (settings page) instead of nested outlet
+     * children (setting-view). Otherwise cache the routable leaf (entity pages, chat).
+     */
+    resolveTabCacheTarget(route) {
+        const shell = this.findScopedShellRoute(route);
+        if (shell) {
+            // A scoped shell that owns a nested routed outlet (e.g. the settings page, whose `:group`
+            // child renders `setting-view`) cannot be safely detached and reattached: Angular does not
+            // resume the nested child's `effect()`s / change detection after reattach, so dirty tracking
+            // and child content swaps silently stop working. Skip caching these shells — they recreate
+            // fresh on tab return (the active child is preserved via the URL). Flat leaf shells (e.g. the
+            // chat component) have no nested outlet and reattach correctly, so they stay cached.
+            if (this.shellOwnsNestedOutlet(shell)) {
+                return null;
+            }
+            return shell;
+        }
+        if (this.isRoutableLeaf(route)) {
+            return route;
+        }
+        return null;
+    }
+    /** True when the scoped shell route declares child routes (i.e. it hosts a nested outlet). */
+    shellOwnsNestedOutlet(shell) {
+        const config = shell.routeConfig;
+        return !!(config?.children?.length || config?.loadChildren);
+    }
+    /** Nearest ancestor route that declares `data.tab = true`. */
+    findScopedAncestor(route) {
+        for (let index = route.pathFromRoot.length - 1; index >= 0; index--) {
+            const snapshot = route.pathFromRoot[index];
+            if (axpHasTabScope(snapshot.data)) {
+                return snapshot;
+            }
+        }
+        return null;
+    }
+    /**
+     * The innermost `reuse: true` component route between a scoped ancestor and the active route.
+     * Settings: `setting-page` (not `setting-view`). Chat: the active chat child route.
+     */
+    findScopedShellRoute(route) {
+        const scope = this.findScopedAncestor(route);
+        if (!scope) {
+            return null;
+        }
+        const chain = route.pathFromRoot;
+        const scopeIndex = chain.indexOf(scope);
+        if (scopeIndex < 0) {
+            return null;
+        }
+        let shell = null;
+        for (let index = scopeIndex + 1; index < chain.length; index++) {
+            const snapshot = chain[index];
+            if (snapshot.data?.['reuse'] === true && this.hasRoutableComponent(snapshot)) {
+                shell = snapshot;
+            }
+        }
+        return shell;
+    }
+    isRoutableLeaf(route) {
+        if (route.firstChild) {
+            return false;
+        }
+        return this.hasRoutableComponent(route);
+    }
+    hasRoutableComponent(route) {
+        const config = route.routeConfig;
+        return !!(route.component || config?.component || config?.loadComponent);
+    }
+    /** Cache key — scoped tab path for shells, full leaf path otherwise. */
+    routeCacheKeyFor(route) {
+        if (!this.isTabCacheRoute(route)) {
+            return null;
+        }
+        const path = this.findScopedShellRoute(route) ? axpResolveTabKeyFromSnapshot(route) : axpPathFromSnapshot(route);
+        return axpIsTabEligibleUrl(path) ? path : null;
+    }
+    /** Scoped tab key — matches open tab descriptors (`data.tab = true`). */
+    scopedTabKeyFor(route) {
+        const target = this.resolveTabCacheTarget(route);
+        if (!target) {
+            return null;
+        }
+        const path = axpResolveTabKeyFromSnapshot(target);
+        return axpIsTabEligibleUrl(path) ? path : null;
+    }
+    /** True when the in-flight navigation leaves the scoped tab that owns this route. */
+    isLeavingScopedTab(route) {
+        const currentScoped = axpResolveTabKeyFromSnapshot(route);
+        const router = this.injector.get(Router, null);
+        if (!router) {
+            return true;
+        }
+        const navigation = router.getCurrentNavigation();
+        if (!navigation?.finalUrl) {
+            return true;
+        }
+        const targetPath = router.serializeUrl(navigation.finalUrl).split('?')[0].split('#')[0];
+        const futureScoped = axpResolveTabKeyFromRouteConfig(router.config, targetPath) ??
+            (targetPath.startsWith('/') ? targetPath : `/${targetPath}`);
+        return currentScoped !== futureScoped;
+    }
+    haveParamsChanged(future, curr) {
+        const futureParams = future.params;
+        const currParams = curr.params;
+        const futureKeys = Object.keys(futureParams);
+        const currKeys = Object.keys(currParams);
+        if (futureKeys.length !== currKeys.length) {
+            return true;
+        }
+        for (const key of futureKeys) {
+            if (futureParams[key] !== currParams[key]) {
+                return true;
+            }
+        }
+        return false;
+    }
+    haveQueryParamsChanged(future, curr) {
+        const futureQueryParams = future.queryParams;
+        const currQueryParams = curr.queryParams;
+        const futureKeys = Object.keys(futureQueryParams);
+        const currKeys = Object.keys(currQueryParams);
+        if (futureKeys.length !== currKeys.length) {
+            return true;
+        }
+        for (const key of futureKeys) {
+            if (futureQueryParams[key] !== currQueryParams[key]) {
+                return true;
+            }
+        }
+        return false;
+    }
+}
+
+function routesFacory() {
+    const config = inject(AXP_ENTITY_CONFIG_TOKEN);
+    let routes = [
+        {
+            path: ':app/modules/:module/:entity',
+            canActivate: [...AXP_PROTECTED_ROUTE_GUARDS],
+            data: { rootLayout: true },
+            loadComponent: () => {
+                return config.viewers.root();
+            },
+            // children: [
+            //   {
+            //     path: 'details/:id',
+            //     loadComponent: () => import('@acorex-platform/framework-client/layout/views').then((c) => c.AXPLayoutDetailsViewComponent),
+            //     data: { reuse: true },
+            //     resolve: {
+            //       adapter: AXPLayoutDetailsViewRouteResolver,
+            //     },
+            //   },
+            // ],
+        },
+        {
+            path: 'error',
+            children: [
+                {
+                    path: 'offline',
+                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-offline.component-DR6G8gPC.mjs').then((c) => c.AXPErrorOfflineComponent),
+                },
+                {
+                    path: '404',
+                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-404.component-Byyqk8pH.mjs').then((c) => c.AXPError404Component),
+                },
+                {
+                    path: '401',
+                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-401.component-D--_MIar.mjs').then((c) => c.AXPError401Component),
+                },
+            ],
+        },
+        {
+            path: '404',
+            redirectTo: 'error/404',
+            pathMatch: 'full',
+        },
+        {
+            path: '401',
+            redirectTo: 'error/401',
+            pathMatch: 'full',
+        },
+    ];
+    return routes;
+}
+class AXPDefaultThemeModule {
+    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: () => {
+                    const config = {
+                        viewers: {
+                            root: () => Promise.resolve().then(function () { return rootLayout_component; }).then((c) => c.AXPRootLayoutComponent),
+                            master: {
+                                single: () => import('./acorex-platform-framework-client-themes-default-entity-master-single-view.component-D1a7UI71.mjs').then((c) => c.AXPEntityMasterSingleViewComponent),
+                                details: () => import('@acorex-platform/framework-client/layout/views').then((c) => c.AXPLayoutDetailsViewComponent),
+                                ///
+                                create: () => import('./acorex-platform-framework-client-themes-default-entity-master-create-view.component-DnTHwsDJ.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
+                                ///
+                                modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-BpR9g6QS.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
+                                //
+                                list: () => Promise.resolve().then(function () { return entityMasterListView_component; }).then((c) => c.AXPEntityMasterListViewComponent),
+                            },
+                        },
+                    };
+                    return config;
+                },
+            },
+            { provide: RouteReuseStrategy, useClass: AXPEntityReuseStrategy },
+            {
+                provide: ROUTES,
+                multi: true,
+                useFactory: routesFacory,
+            },
+        ], imports: [AXPCommonModule, AXPThemesSharedModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDefaultThemeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXPCommonModule, AXPThemesSharedModule],
+                    exports: [],
+                    declarations: [],
+                    providers: [
+                        {
+                            provide: AXP_ENTITY_CONFIG_TOKEN,
+                            useFactory: () => {
+                                const config = {
+                                    viewers: {
+                                        root: () => Promise.resolve().then(function () { return rootLayout_component; }).then((c) => c.AXPRootLayoutComponent),
+                                        master: {
+                                            single: () => import('./acorex-platform-framework-client-themes-default-entity-master-single-view.component-D1a7UI71.mjs').then((c) => c.AXPEntityMasterSingleViewComponent),
+                                            details: () => import('@acorex-platform/framework-client/layout/views').then((c) => c.AXPLayoutDetailsViewComponent),
+                                            ///
+                                            create: () => import('./acorex-platform-framework-client-themes-default-entity-master-create-view.component-DnTHwsDJ.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
+                                            ///
+                                            modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-BpR9g6QS.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
+                                            //
+                                            list: () => Promise.resolve().then(function () { return entityMasterListView_component; }).then((c) => c.AXPEntityMasterListViewComponent),
+                                        },
+                                    },
+                                };
+                                return config;
+                            },
+                        },
+                        { provide: RouteReuseStrategy, useClass: AXPEntityReuseStrategy },
+                        {
+                            provide: ROUTES,
+                            multi: true,
+                            useFactory: routesFacory,
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXPDefaultThemeModule, AXPEntityDetailListViewComponent, AXPEntityMasterListViewComponent, AXPRootHorizontalLayoutComponent, AXPRootLayoutComponent, AXPRootLayoutFooterComponent, AXPRootLayoutHeaderComponent, AXPRootLayoutMenuComponent, AXPRootVerticalLayoutComponent, AXPRouteTabBarComponent };
+//# sourceMappingURL=acorex-platform-framework-client-themes-default.mjs.map