@acorex-platform/framework-client 2.0.0-next.3 → 2.0.0-next.31

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

@@ -30,13 +30,13 @@ import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPAuthModule, AXPSessionService, AXPSessionStatus } from '@acorex-platform/framework-client/auth';
 import * as i1$3 from '@acorex-platform/framework-client/core';
 import { AXPEntityBroadcastService, AXPDeviceService, AXHighlightService, AXPPageContextRegistry, AXPPageContextPriority, AXPComponentSlotModule, AXPKeyboardShortcutRegistry, AXPLogoComponent, AXPBroadcastEventService, AXPContextStore } from '@acorex-platform/framework-client/core';
-import { getDataSourcePageIndex, applyDataSourcePagingWithoutLoad, AXPEntityCardComponent, AXPEntityCardSkeletonComponent, AXP_CATEGORY_TREE_ROOT_TITLE_I18N_KEY, AXPEntityDefinitionRegistryService, AXPCategoryTreeService, traceEntityMasterList, buildDataSourceTraceSnapshot, AXPEntityListViewColumnViewModel, getEntityInfo, axpRunEntityListPageContextAction, axpBuildEntityListPageContextSnapshot, restoreEntityListExpandedRows, AXP_ENTITY_CONFIG_TOKEN } from '@acorex-platform/framework-client/layout/entity';
+import { getDataSourcePageIndex, applyDataSourcePagingWithoutLoad, watchNextDataSourceLoad, AXPEntityCardComponent, AXPEntityCardSkeletonComponent, AXP_CATEGORY_TREE_ROOT_TITLE_I18N_KEY, AXPEntityDefinitionRegistryService, AXPCategoryTreeService, traceEntityMasterList, buildDataSourceTraceSnapshot, AXPEntityListViewColumnViewModel, getEntityInfo, axpRunEntityListPageContextAction, axpBuildEntityListPageContextSnapshot, restoreEntityListExpandedRows, AXP_ENTITY_CONFIG_TOKEN } from '@acorex-platform/framework-client/layout/entity';
 import { mergeInfiniteScrollPage, AXPInfiniteScrollDirective, AXPStateMessageComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutToolbarComponent, AXPQueryViewSaveDialogService, AXPEntityListStylingDialogService, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewSaveButtonComponent, AXPQueryViewTabsComponent, AXPQueryColumnsComponent, AXPThemeLayoutStartSideComponent, AXPTaskBadgeService, AXPMenuBadgeHelper, AXPTaskBadgeDirective, provideFileChooserHooks } from '@acorex-platform/framework-client/layout/components';
 import { resolveEntityCardAvatarPath, listEntityMasterStylingLockedRules, withQueryViewFilterVisibility, queryViewConditionsToFilterQueries } from '@acorex-platform/framework-shared/entity';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, computed, viewChild, effect, untracked, afterRenderEffect, ChangeDetectionStrategy, Component, inject, ViewChild, Input, ViewEncapsulation, afterNextRender, Injector, output, DestroyRef, ElementRef, NgModule } from '@angular/core';
+import { input, signal, computed, effect, untracked, viewChild, afterRenderEffect, ChangeDetectionStrategy, Component, inject, ViewChild, Input, ViewEncapsulation, afterNextRender, Injector, output, DestroyRef, ElementRef, NgModule } from '@angular/core';
 import { get, isEqual, sortBy } from 'lodash-es';
 import * as i7$1 from '@acorex-platform/framework-client/layout/widget-core';
 import { AXPWidgetCoreModule } from '@acorex-platform/framework-client/layout/widget-core';
@@ -48,7 +48,7 @@ import { RouterModule, Router, ActivatedRoute, NavigationStart, NavigationEnd, R
 import { Subject, takeUntil, filter, combineLatest, firstValueFrom, take } from 'rxjs';
 import { runtimeCommandPayloadData, isThemeSurfaceClass, isRuntimeHexSurfaceClass, AXP_THEME_SURFACE_STYLES, createRandomUuid, AXPKeyboardShortcutPriority } from '@acorex-platform/framework-shared/core';
 import * as i1$2 from '@acorex/core/platform';
-import { AXPSettingsService, AXPCommonSettings, axpIsEntityListRoute, axpReplaceEntityListRouteQueryParams, axpIsEntityListPath, AXPTabNavigationService, AXPTabPreviewService, AXP_HOME_TAB_KEY, axpResolveTabTitleParts, AXPMenuService, AXPMenuVisibilityService, axpMenuPathsMatch, AXPPlatformBrandingService, AXPTabRouteCacheRegistry, axpResolveTabKeyFromSnapshot, axpHasTabScope, axpPathFromSnapshot, axpIsTabEligibleUrl, axpResolveTabKeyFromRouteConfig, AXP_PROTECTED_ROUTE_GUARDS, AXPCommonModule } from '@acorex-platform/framework-client/common';
+import { AXPSettingsService, AXPCommonSettings, axpIsEntityListRoute, axpReplaceEntityListRouteQueryParams, axpIsEntityListPath, AXPTabNavigationService, AXPTabPreviewService, AXP_HOME_TAB_KEY, axpResolveTabTitleParts, AXPMenuService, AXPMenuVisibilityService, axpMenuPathsMatch, AXPPlatformBrandingService, AXPTabRouteCacheRegistry, axpResolveTabKeyFromSnapshot, axpSnapshotDeclaresTabScope, axpPathFromSnapshot, axpEntityListNavigationTabKey, axpIsTabEligibleUrl, axpInTabErrorSourceUrl, axpResolveTabKey, axpResolveTabKeyFromRouteConfig, AXP_PROTECTED_ROUTE_GUARDS, AXPCommonModule } from '@acorex-platform/framework-client/common';
 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';
@@ -74,6 +74,7 @@ import { AXResizableDirective } from '@acorex/cdk/resizable';
 const LOAD_MORE_SKELETON_COUNT = 3;
 //#endregion
 class AXPEntityMasterListCardListComponent {
+    #viewTransitionEffect;
     //#endregion
     //#region ----- Lifecycle -----
     constructor() {
@@ -112,6 +113,19 @@ class AXPEntityMasterListCardListComponent {
         ...(ngDevMode ? [{ debugName: "showListStatus" }] : /* istanbul ignore next */ []));
         this.skeletonCount = computed(() => Math.max(this.pageSize(), 1), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "skeletonCount" }] : /* istanbul ignore next */ []));
+        this.#viewTransitionEffect = effect(() => {
+            const vm = this.vm();
+            if (!vm.listTransitionLoading?.()) {
+                return;
+            }
+            untracked(() => {
+                this.items.set([]);
+                this.hasMore.set(false);
+                this.loading.set(true);
+                this.loadingMore.set(false);
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#viewTransitionEffect" }] : /* istanbul ignore next */ []));
         this.loadMoreSkeletonPlaceholders = Array.from({ length: LOAD_MORE_SKELETON_COUNT }, (_, index) => index);
         this.showSkeletonAvatar = computed(() => {
             if (this.vm().cardLayout()?.header?.avatar) {
@@ -345,9 +359,14 @@ class AXPEntityMasterListCardListComponent {
     }
     async loadPage(reset) {
         const vm = this.vm();
+        const switchEpoch = vm.viewSwitchEpoch?.() ?? null;
+        const stillCurrent = () => this.isListSwitchCurrent(vm, switchEpoch);
         const take = this.resolvePageSize(vm);
         this.pageSize.set(take);
         const skip = reset ? 0 : this.items().length;
+        if (!stillCurrent()) {
+            return;
+        }
         this.appending = !reset;
         if (reset) {
             this.items.set([]);
@@ -359,17 +378,41 @@ class AXPEntityMasterListCardListComponent {
         }
         applyDataSourcePagingWithoutLoad(vm.dataSource, { take, skip });
         invalidateDataSourceFetchedPages(vm.dataSource);
+        if (!stillCurrent()) {
+            this.appending = false;
+            return;
+        }
+        const watch = watchNextDataSourceLoad(vm.dataSource, stillCurrent);
         try {
-            const dataReady = this.waitForDataSourceLoad(vm.dataSource);
             vm.dataSource.refresh({ reset });
-            await dataReady;
+            if (!stillCurrent()) {
+                watch.stop();
+                return;
+            }
+            if (vm.dataSource.isLoading) {
+                await watch.promise;
+            }
+            else {
+                watch.stop();
+            }
+            if (!stillCurrent()) {
+                return;
+            }
             this.applyPageFromDataSource(reset);
         }
         finally {
             this.appending = false;
-            this.loading.set(false);
-            this.loadingMore.set(false);
+            if (stillCurrent()) {
+                this.loading.set(false);
+                this.loadingMore.set(false);
+            }
+        }
+    }
+    isListSwitchCurrent(vm, epoch) {
+        if (epoch == null || vm.viewSwitchEpoch == null) {
+            return true;
         }
+        return vm.viewSwitchEpoch() === epoch;
     }
     applyPageFromDataSource(reset) {
         const ds = this.vm().dataSource;
@@ -386,32 +429,6 @@ class AXPEntityMasterListCardListComponent {
     resolvePageSize(vm) {
         return vm.getResolvedListPaging().take || 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: "22.0.8", ngImport: i0, type: AXPEntityMasterListCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPEntityMasterListCardListComponent, isStandalone: true, selector: "axp-entity-master-list-card-list", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, userStylingRules: { classPropertyName: "userStylingRules", publicName: "userStylingRules", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "cardGrid", first: true, predicate: ["cardGrid"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-entity-card-list\" [class.axp-entity-card-list--rows]=\"isRowLayout()\">\n  @if (loading() && !items().length) {\n    <!-- ----- Skeleton cards while the first page is fetched ----- -->\n    <div class=\"axp-entity-card-list__grid\" aria-busy=\"true\" aria-live=\"polite\">\n      @for (index of skeletonPlaceholders(); track index) {\n        <div class=\"axp-entity-card-list__cell\">\n          <axp-entity-card-skeleton\n            [fieldCount]=\"skeletonFieldCount()\"\n            [badgeCount]=\"skeletonBadgeCount()\"\n            [showContent]=\"true\"\n            [showFooter]=\"skeletonShowFooter()\"\n            [rowLayout]=\"isRowLayout()\"\n            [showAvatar]=\"showSkeletonAvatar()\"\n            [fillHost]=\"true\"\n          />\n        </div>\n      }\n    </div>\n  } @else if (!items().length) {\n    <!-- ----- Empty state when the list has no rows ----- -->\n    <div class=\"axp-entity-card-list__empty\">\n      <axp-state-message\n        icon=\"fa-light fa-clipboard-list\"\n        [title]=\"'@general:empty-states.no-records-found.title'\"\n        [description]=\"'@general:empty-states.no-records-found.description'\"\n      ></axp-state-message>\n    </div>\n  } @else {\n    <!-- ----- Accumulated card grid with infinite scroll ----- -->\n    <div #cardGrid class=\"axp-entity-card-list__grid\">\n      @for (row of items(); track trackRow($index, row)) {\n        <!--->\n        <!-- ----- Render a card when the row record is present ----- -->\n        @if (row) {\n          <div class=\"axp-entity-card-list__cell\">\n            <axp-entity-card\n              [entity]=\"vm().entityDef\"\n              [layout]=\"vm().cardLayout()\"\n              [row]=\"row\"\n              [fields]=\"vm().cardFields()\"\n              [userStylingRules]=\"userStylingRules()\"\n              [variant]=\"isRowLayout() ? 'row' : 'card'\"\n              [interactive]=\"true\"\n              [fillHost]=\"true\"\n              [extraExpanded]=\"isCardExpanded(row)\"\n              [showSelection]=\"showSelection()\"\n              [selected]=\"isRowSelected(row)\"\n              [showNewBadge]=\"isRowHighlighted(row)\"\n              [primaryActions]=\"vm().primaryRowActions()\"\n              [secondaryActionLoader]=\"loadSecondaryActions\"\n              (extraExpandedChange)=\"onCardExtraExpanded($index, $event)\"\n              (selectionChange)=\"onRowSelectionChange(row, $event)\"\n              (commandClick)=\"onCommandClick($event, row)\"\n            />\n          </div>\n        }\n      }\n      <!--->\n      <!-- ----- Skeleton cards while the next chunk is fetched ----- -->\n      @if (loadingMore()) {\n        @for (index of loadMoreSkeletonPlaceholders; track index) {\n          <div class=\"axp-entity-card-list__cell\">\n            <axp-entity-card-skeleton\n              [fieldCount]=\"skeletonFieldCount()\"\n              [badgeCount]=\"skeletonBadgeCount()\"\n              [showContent]=\"true\"\n              [showFooter]=\"skeletonShowFooter()\"\n              [rowLayout]=\"isRowLayout()\"\n              [showAvatar]=\"showSkeletonAvatar()\"\n              [fillHost]=\"true\"\n            />\n          </div>\n        }\n      }\n      <div\n        axpInfiniteScroll\n        class=\"axp-entity-card-list__sentinel\"\n        [axpInfiniteScrollEnabled]=\"canLoadMore()\"\n        (axpInfiniteScrollReached)=\"onInfiniteScrollReached()\"\n      ></div>\n    </div>\n    <!--------------------------------------------------------------->\n    <!-- ----- Compact loaded count, pinned under the scrolling grid ----- -->\n    @if (showListStatus()) {\n      <div class=\"axp-entity-card-list__status\" aria-live=\"polite\">\n        {{\n          '@general:terms.interface.list-range'\n            | translate: { params: { loaded: loadedCount(), total: totalCount() } }\n            | async\n        }}\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer properties;: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;flex-direction:column;gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-list .axp-entity-card-list__empty{display:flex;min-height:0px;flex:1;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-lightest-surface))}.axp-entity-card-list .axp-entity-card-list__grid{display:grid;min-height:0px;flex:1;grid-template-columns:repeat(1,minmax(0,1fr));align-items:stretch;gap:calc(var(--spacing, .25rem) * 2);overflow:auto;align-content:start;grid-auto-rows:auto}@media(width>=48rem){.axp-entity-card-list .axp-entity-card-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=80rem){.axp-entity-card-list .axp-entity-card-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.axp-entity-card-list .axp-entity-card-list__cell{display:flex;min-width:0;flex-direction:column}.axp-entity-card-list .axp-entity-card-list__cell>axp-entity-card,.axp-entity-card-list .axp-entity-card-list__cell>axp-entity-card-skeleton{display:flex;width:100%;min-width:0;flex:1 1 auto;flex-direction:column}.axp-entity-card-list.axp-entity-card-list--rows .axp-entity-card-list__grid{grid-template-columns:repeat(1,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 2)}@media(width>=48rem){.axp-entity-card-list.axp-entity-card-list--rows .axp-entity-card-list__grid{grid-template-columns:repeat(1,minmax(0,1fr))}}@media(width>=80rem){.axp-entity-card-list.axp-entity-card-list--rows .axp-entity-card-list__grid{grid-template-columns:repeat(1,minmax(0,1fr))}}.axp-entity-card-list .axp-entity-card-list__sentinel{grid-column:1 / -1;height:1px;width:100%}.axp-entity-card-list .axp-entity-card-list__status{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;padding-top:calc(var(--spacing, .25rem) * .5);padding-bottom:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-entity-card-list .axp-entity-card-list__status{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXPEntityCardComponent, selector: "axp-entity-card", inputs: ["entity", "layout", "row", "fields", "userStylingRules", "variant", "interactive", "embedded", "elevated", "disableLookupPopover", "fillHost", "extraExpanded", "selected", "showNewBadge", "showSelection", "showClose", "primaryActions", "primaryActionLook", "secondaryActionLoader"], outputs: ["extraExpandedChange", "selectionChange", "commandClick", "closeClick"] }, { kind: "component", type: AXPEntityCardSkeletonComponent, selector: "axp-entity-card-skeleton", inputs: ["fieldCount", "badgeCount", "showFooter", "showHeaderMenu", "showContent", "rowLayout", "showAvatar", "fillHost", "embedded", "elevated"] }, { kind: "directive", type: AXPInfiniteScrollDirective, selector: "[axpInfiniteScroll]", inputs: ["axpInfiniteScrollEnabled", "axpInfiniteScrollRoot", "axpInfiniteScrollRootMargin", "axpInfiniteScrollThreshold"], outputs: ["axpInfiniteScrollReached"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -619,7 +636,7 @@ class AXPEntityDetailListViewComponent {
         this.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPEntityDetailListViewComponent, deps: [{ token: i1$1.AXActionSheetService }, { token: i2$1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPEntityDetailListViewComponent, isStandalone: true, selector: "axp-entity-detail-list-view", inputs: { vm: ["viewModel", "vm"] }, providers: [AXUnsubscriber], viewQueries: [{ propertyName: "listDisplayModePopover", first: true, predicate: ["listDisplayModePopover"], descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], ngImport: i0, template: "<div class=\"flex p-2\">\n  <div class=\"flex flex-col items-stretch gap-3 flex-1 overflow-auto min-h-72\">\n    <div class=\"flex justify-between items-center w-full\">\n      <div class=\"flex justify-between items-center\">\n        <div class=\"flex justify-start items-center gap-4\">\n          @if (vm.hasSelectedItems()) {\n            <div class=\"flex gap-3 items-center h-10\">\n              <span class=\"text-xl font-bold\">\n                {{ vm.selectedItems().length }}\n                {{ '@general:terms.items-selected' | translate | async }}\n              </span>\n              <span\n                (click)=\"vm.clearSelection()\"\n                class=\"text-sm text-primary-500 underline cursor-pointer\"\n                >{{ '@general:actions.unselect.title' | translate | async }}</span\n              >\n            </div>\n          } @else {\n            @if (vm.hasInlineFilters() && !deviceService.isSmall()) {\n              <div class=\"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=\"flex items-center gap-3\">\n        @if (showListDisplayModeControl()) {\n          <div>\n            <ax-button [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n              <i [class]=\"listDisplayModeButtonIcon()\"></i>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"10\"\n              [target]=\"listDisplayButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              #listDisplayModePopover\n            >\n              <div class=\"lightest-surface shadow-md border md:w-72 w-full rounded-md\">\n                <ax-header class=\"border-b lighter-surface rounded-t-md p-4 font-bold\">\n                  {{ '@general:terms.interface.list-display' | translate | async }}\n                </ax-header>\n                <div class=\"py-2 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() && (hasCardListDisplayOption() || hasRowListDisplayOption())) {\n                      <ax-divider />\n                    }\n                    @if (hasCardListDisplayOption()) {\n                      <!-- ----- Card grid presentation ----- -->\n                      <ax-button-item\n                        [text]=\"('@general:terms.interface.card-view' | translate | async)!\"\n                        [selected]=\"listDisplayMode() === 'card'\"\n                        (onClick)=\"setListDisplayMode('card')\"\n                      >\n                        <ax-prefix>\n                          <i class=\"fa-light fa-grid-2\"></i>\n                        </ax-prefix>\n                      </ax-button-item>\n                    }\n                    @if (hasRowListDisplayOption()) {\n                      <!-- ----- Horizontal row-list presentation ----- -->\n                      <ax-button-item\n                        [text]=\"('@general:terms.interface.row-view' | translate | async)!\"\n                        [selected]=\"listDisplayMode() === 'row'\"\n                        (onClick)=\"setListDisplayMode('row')\"\n                      >\n                        <ax-prefix>\n                          <i class=\"fa-light fa-grip-lines\"></i>\n                        </ax-prefix>\n                      </ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </div>\n              </div>\n            </ax-popover>\n          </div>\n        }\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=\"font-semibold 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    @if (vm.enabledListLayouts().includes('table')) {\n      <div class=\"flex flex-1 pt-0 overflow-auto max-w-full w-full\" [class.hidden]=\"vm.activeListLayout() !== 'table'\">\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"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    }\n    @if (vm.enabledListLayouts().includes('card') || vm.enabledListLayouts().includes('row')) {\n      <axp-entity-master-list-card-list\n        class=\"axp-entity-list-host w-full min-h-0 flex-1\"\n        [class.hidden]=\"!vm.isCardHostLayout()\"\n        [vm]=\"vm\"\n      ></axp-entity-master-list-card-list>\n    }\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", "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$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$2.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: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: 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: i7.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: i8.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: i8.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i8.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed", "advanceSelect"] }, { kind: "component", type: i8.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i8.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPEntityDetailListViewComponent, isStandalone: true, selector: "axp-entity-detail-list-view", inputs: { vm: ["viewModel", "vm"] }, providers: [AXUnsubscriber], viewQueries: [{ propertyName: "listDisplayModePopover", first: true, predicate: ["listDisplayModePopover"], descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], ngImport: i0, template: "<div class=\"flex p-2\">\n  <div class=\"flex flex-col items-stretch gap-3 flex-1 overflow-auto min-h-72\">\n    <div class=\"flex justify-between items-center w-full\">\n      <div class=\"flex justify-between items-center\">\n        <div class=\"flex justify-start items-center gap-4\">\n          @if (vm.hasSelectedItems()) {\n            <div class=\"flex gap-3 items-center h-10\">\n              <span class=\"text-xl font-bold\">\n                {{ vm.selectedItems().length }}\n                {{ '@general:terms.items-selected' | translate | async }}\n              </span>\n              <span\n                (click)=\"vm.clearSelection()\"\n                class=\"text-sm text-primary-500 underline cursor-pointer\"\n                >{{ '@general:actions.unselect.title' | translate | async }}</span\n              >\n            </div>\n          } @else {\n            @if (vm.hasInlineFilters() && !deviceService.isSmall()) {\n              <div class=\"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=\"flex items-center gap-3\">\n        @if (showListDisplayModeControl()) {\n          <div>\n            <ax-button [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n              <i [class]=\"listDisplayModeButtonIcon()\"></i>\n            </ax-button>\n            <ax-popover\n              [adaptivityEnabled]=\"true\"\n              [offsetY]=\"10\"\n              [target]=\"listDisplayButton\"\n              [openOn]=\"'toggle'\"\n              [closeOn]=\"'clickOut'\"\n              #listDisplayModePopover\n            >\n              <div class=\"lightest-surface shadow-md border md:w-72 w-full rounded-md\">\n                <ax-header class=\"border-b lighter-surface rounded-t-md p-4 font-bold\">\n                  {{ '@general:terms.interface.list-display' | translate | async }}\n                </ax-header>\n                <div class=\"py-2 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() && (hasCardListDisplayOption() || hasRowListDisplayOption())) {\n                      <ax-divider />\n                    }\n                    @if (hasCardListDisplayOption()) {\n                      <!-- ----- Card grid presentation ----- -->\n                      <ax-button-item\n                        [text]=\"('@general:terms.interface.card-view' | translate | async)!\"\n                        [selected]=\"listDisplayMode() === 'card'\"\n                        (onClick)=\"setListDisplayMode('card')\"\n                      >\n                        <ax-prefix>\n                          <i class=\"fa-light fa-grid-2\"></i>\n                        </ax-prefix>\n                      </ax-button-item>\n                    }\n                    @if (hasRowListDisplayOption()) {\n                      <!-- ----- Horizontal row-list presentation ----- -->\n                      <ax-button-item\n                        [text]=\"('@general:terms.interface.row-view' | translate | async)!\"\n                        [selected]=\"listDisplayMode() === 'row'\"\n                        (onClick)=\"setListDisplayMode('row')\"\n                      >\n                        <ax-prefix>\n                          <i class=\"fa-light fa-grip-lines\"></i>\n                        </ax-prefix>\n                      </ax-button-item>\n                    }\n                  </ax-button-item-list>\n                </div>\n              </div>\n            </ax-popover>\n          </div>\n        }\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=\"font-semibold 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    @if (vm.enabledListLayouts().includes('table')) {\n      <div class=\"flex flex-1 pt-0 overflow-auto max-w-full w-full\" [class.hidden]=\"vm.activeListLayout() !== 'table'\">\n      <ax-data-table\n        #grid\n        [showFooter]=\"false\"\n        class=\"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    }\n    @if (vm.enabledListLayouts().includes('card') || vm.enabledListLayouts().includes('row')) {\n      <axp-entity-master-list-card-list\n        class=\"axp-entity-list-host w-full min-h-0 flex-1\"\n        [class.hidden]=\"!vm.isCardHostLayout()\"\n        [vm]=\"vm\"\n      ></axp-entity-master-list-card-list>\n    }\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", "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$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$2.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: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: i7.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: i8.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: i8.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i8.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed", "advanceSelect"] }, { kind: "component", type: i8.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i8.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", "columnKey", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPEntityMasterListCardListComponent, selector: "axp-entity-master-list-card-list", inputs: ["vm", "userStylingRules"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -1738,6 +1755,8 @@ class AXPEntityMasterToolbarViewComponent {
         this.translationService = inject(AXTranslationService);
         this.toastService = inject(AXToastService);
         this.isInitializing = false;
+        /** Which `runInitialListLoad` currently owns `isInitializing`. */
+        this.initializingToken = null;
         this.pendingInitialSorts = true;
         this.filterTriggerMode = 'manual';
         this.sortMenuOpen = signal(false, /* @ts-ignore */
@@ -1818,9 +1837,14 @@ class AXPEntityMasterToolbarViewComponent {
                 return;
             }
             untracked(() => {
-                this.isInitializing = true;
+                const loadOwnsGate = this.initializingToken != null;
+                if (!loadOwnsGate) {
+                    this.isInitializing = true;
+                }
                 this.setInitialFiltersFromSettingsOrView();
-                this.isInitializing = false;
+                if (!loadOwnsGate) {
+                    this.isInitializing = false;
+                }
             });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#listInstanceFiltersEffect" }] : /* istanbul ignore next */ []));
@@ -1870,23 +1894,42 @@ class AXPEntityMasterToolbarViewComponent {
      * 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() {
+    async runInitialListLoad(viewSwitchEpoch) {
+        const stillCurrent = () => viewSwitchEpoch == null || this.vm.isViewSwitchCurrent(viewSwitchEpoch);
+        if (!stillCurrent()) {
+            return;
+        }
+        const token = viewSwitchEpoch ?? -1;
         traceEntityMasterList('toolbar', 'runInitialListLoad start', () => ({
             viewName: this.vm.view().name,
             activeListLayout: this.vm.activeListLayout(),
             dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
         }));
         this.isInitializing = true;
+        this.initializingToken = token;
         this.pendingInitialSorts = true;
-        this.setInitialFiltersFromSettingsOrView();
-        this.filtersDefinitions.set(this.vm.filterDefinitions());
-        this.filtersReady.set(true);
-        await this.waitForQueryFiltersSync();
-        await this.vm.applyFilterAndSort();
-        this.previousFilterQueries.set(this.vm.filterQueries());
-        this.stripFiltersFromRouteQueryParam();
-        this.isInitializing = false;
-        this.pendingInitialSorts = false;
+        try {
+            this.setInitialFiltersFromSettingsOrView();
+            this.filtersDefinitions.set(this.vm.filterDefinitions());
+            this.filtersReady.set(true);
+            await this.waitForQueryFiltersSync();
+            if (!stillCurrent()) {
+                return;
+            }
+            await this.vm.applyFilterAndSort({
+                resetPagination: viewSwitchEpoch != null,
+                viewSwitchEpoch,
+                forceReload: viewSwitchEpoch != null,
+            });
+            if (!stillCurrent()) {
+                return;
+            }
+            this.previousFilterQueries.set(this.vm.filterQueries());
+            this.stripFiltersFromRouteQueryParam();
+        }
+        finally {
+            this.releaseInitializing(token);
+        }
         traceEntityMasterList('toolbar', 'runInitialListLoad complete', () => ({
             viewName: this.vm.view().name,
             activeListLayout: this.vm.activeListLayout(),
@@ -1894,6 +1937,15 @@ class AXPEntityMasterToolbarViewComponent {
             dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
         }));
     }
+    /** Drops the init gate only if a newer load has not taken it. */
+    releaseInitializing(token) {
+        if (this.initializingToken !== token) {
+            return;
+        }
+        this.isInitializing = false;
+        this.pendingInitialSorts = false;
+        this.initializingToken = null;
+    }
     /** Waits until query-filters has rendered and synced converted `initialFilters`. */
     waitForQueryFiltersSync() {
         return new Promise((resolve) => {
@@ -1950,21 +2002,26 @@ class AXPEntityMasterToolbarViewComponent {
         }, 50);
     }
     async onViewChanged(view) {
+        const switchingView = view.name !== this.vm.view().name;
+        const viewSwitchEpoch = switchingView ? this.vm.beginViewSwitch() : undefined;
         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);
+        await this.vm.setView(view.name, viewSwitchEpoch);
+        if (viewSwitchEpoch != null && !this.vm.isViewSwitchCurrent(viewSwitchEpoch)) {
+            return;
+        }
         if (axpIsEntityListRoute(this.router)) {
-            axpReplaceEntityListRouteQueryParams(this.router, { view: view.name });
-            // Prevent queryParamSub from re-applying the same view change while initial load runs.
+            // Mark the next URL before replaceUrl so the queryParam emission does not start a second switch.
             this.vm.markRouteQueryContextSynced(this.activeRoute.snapshot.queryParamMap, {
                 view: view.name,
             });
+            axpReplaceEntityListRouteQueryParams(this.router, { view: view.name });
         }
-        await this.runInitialListLoad();
+        await this.runInitialListLoad(viewSwitchEpoch);
         traceEntityMasterList('toolbar', 'view tab change handled', () => ({
             viewName: this.vm.view().name,
             activeListLayout: this.vm.activeListLayout(),
@@ -2165,7 +2222,7 @@ class AXPEntityMasterToolbarViewComponent {
             .join('|');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "w-full" }, viewQueries: [{ propertyName: "viewPopover", first: true, predicate: ["viewPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-query-view-tabs\n  id=\"axp-toolbar-view-selector\"\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n  (edit)=\"onEditQueryView($event)\"\n  (remove)=\"onDeleteQueryView($event)\"\n></axp-query-view-tabs>\n<div\n  class=\"axp-entity-master-toolbar__row flex w-full flex-wrap items-center border-b border-light\"\n  [class.min-w-0]=\"deviceService.isSmall()\"\n  [class.gap-2]=\"!deviceService.isSmall()\"\n  [class.gap-1]=\"deviceService.isSmall()\"\n>\n  <!-- ----- Filter chips, search, and Ctrl+F stay on the leading edge ----- -->\n  @if (filtersReady()) {\n    <axp-query-filters\n      id=\"axp-toolbar-filters\"\n      class=\"min-w-0 flex-1\"\n      [filtersDefinitions]=\"filtersDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      [quickSearch]=\"true\"\n      [mode]=\"vm.filterMode()\"\n      [sortPresets]=\"mobileSortPresets()\"\n      [activeSortPresetName]=\"activeSortPresetName()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n      (onSortPresetSelected)=\"onSortPresetSelected($event)\"\n    ></axp-query-filters>\n  }\n\n  <div\n    class=\"axp-toolbar-list-tools ms-auto flex shrink-0 items-center gap-1\"\n  >\n    <!-- ----- Apply pending filters when the list is in manual apply mode ----- -->\n    @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n      <ax-button\n        id=\"axp-toolbar-btn-filter\"\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\" aria-hidden=\"true\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    <!-- ----- Save View appears when the list layout is dirty ----- -->\n    <axp-query-view-save-button\n      [visible]=\"vm.canSaveActiveQueryView()\"\n      (save)=\"onSaveQueryView()\"\n    ></axp-query-view-save-button>\n\n    <!-- ----- Sort stays a direct button on larger screens ----- -->\n    @if (vm.canSort() && !deviceService.isSmall()) {\n      <div class=\"axp-toolbar-btn-host\">\n        <ax-button\n          id=\"axp-toolbar-btn-sort\"\n          class=\"axp-toolbar-btn axp-toolbar-btn-sort\"\n          [class.axp-toolbar-btn--active]=\"activeSortCount() > 0\"\n          [look]=\"'outline'\"\n          [iconOnly]=\"true\"\n          [color]=\"activeSortCount() > 0 ? 'primary' : 'default'\"\n          [attr.aria-expanded]=\"sortMenuOpen()\"\n          [attr.aria-haspopup]=\"'dialog'\"\n          [title]=\"\n            (activeSortCount() > 0\n              ? ('@general:terms.interface.sort.button-active' | translate: { params: { count: activeSortCount() } } | async)\n              : ('@general:actions.sort.title' | translate | async)) ?? ''\n          \"\n          #sortButton\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-sort-amount-up\" aria-hidden=\"true\"></i>\n          </ax-prefix>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-sort\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"8\"\n          [target]=\"sortButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          (onOpened)=\"sortMenuOpen.set(true)\"\n          (onClosed)=\"sortMenuOpen.set(false)\"\n          #sortPopover\n        >\n          <div class=\"axp-toolbar-popover lightest-surface shadow-md border md:w-96 w-full rounded-md overflow-hidden\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              [sortPresets]=\"vm.sortPresets()\"\n              [defaultSortQueries]=\"defaultSortQueries()\"\n              (sortQueriesChange)=\"onSortQueriesChange($event)\"\n              [initialSortQueries]=\"sortQueries()\"\n            ></axp-query-sorts>\n          </div>\n        </ax-popover>\n      </div>\n    }\n\n    <!-- ----- On small screens this button also holds sort and category ----- -->\n    <div class=\"axp-toolbar-btn-host\">\n      <ax-button\n        id=\"axp-toolbar-btn-view\"\n        class=\"axp-toolbar-btn axp-toolbar-btn-view\"\n        [class.axp-toolbar-btn--open]=\"viewMenuOpen()\"\n        [class.axp-toolbar-btn--active]=\"deviceService.isSmall() && activeSortCount() > 0\"\n        [look]=\"'outline'\"\n        [iconOnly]=\"true\"\n        [color]=\"deviceService.isSmall() && activeSortCount() > 0 ? 'primary' : 'default'\"\n        [attr.aria-expanded]=\"viewMenuOpen()\"\n        [attr.aria-haspopup]=\"'menu'\"\n        [title]=\"((deviceService.isSmall()\n          ? '@general:terms.interface.view.list-options'\n          : '@general:terms.interface.view.menu-button') | translate | async) ?? ''\"\n        #viewButton\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-sliders\" aria-hidden=\"true\"></i>\n        </ax-prefix>\n      </ax-button>\n      <ax-popover\n        id=\"axp-popover-view\"\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"8\"\n        [target]=\"viewButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        (onOpened)=\"onViewMenuOpened()\"\n        (onClosed)=\"onViewMenuClosed()\"\n        #viewPopover\n      >\n        <div\n          class=\"axp-toolbar-popover axp-toolbar-view-menu lightest-surface shadow-md border max-w-full overflow-hidden\"\n          [class.w-72]=\"!deviceService.isSmall()\"\n          [class.rounded-md]=\"!deviceService.isSmall()\"\n          [class.w-full]=\"deviceService.isSmall()\"\n          [class.axp-toolbar-view-menu--sheet]=\"deviceService.isSmall()\"\n        >\n          <!-- ----- Nested sort panel on small screens ----- -->\n          @if (viewMenuPanel() === 'sort') {\n            <div class=\"axp-toolbar-view-menu__header flex items-center justify-between gap-2 border-b border-light px-3 py-2\">\n              <ax-button\n                class=\"ax-sm\"\n                [look]=\"'blank'\"\n                [color]=\"'default'\"\n                [title]=\"('@general:actions.back.title' | translate | async) ?? ''\"\n                (onClick)=\"viewMenuPanel.set('root')\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-chevron-left rtl:rotate-180\" aria-hidden=\"true\"></i>\n                </ax-prefix>\n              </ax-button>\n              <span class=\"min-w-0 flex-1 truncate font-bold\">\n                {{ '@general:terms.interface.sort.title' | translate | async }}\n              </span>\n              <ax-button\n                class=\"ax-sm\"\n                [look]=\"'blank'\"\n                [color]=\"'primary'\"\n                [disabled]=\"!canResetSorts()\"\n                [text]=\"'@general:terms.interface.sort.clear' | translate | async\"\n                (onClick)=\"resetSortsFromMenu()\"\n              ></ax-button>\n            </div>\n            <div class=\"axp-toolbar-view-menu__body axp-toolbar-sort-panel\">\n              <axp-query-sorts\n                [sortDefinitions]=\"sortDefinitions()\"\n                [sortPresets]=\"vm.sortPresets()\"\n                [defaultSortQueries]=\"defaultSortQueries()\"\n                (sortQueriesChange)=\"onSortQueriesChange($event)\"\n                [initialSortQueries]=\"sortQueries()\"\n              ></axp-query-sorts>\n            </div>\n          }\n          <!-- ----- Nested column visibility panel ----- -->\n          @else if (viewMenuPanel() === 'columns') {\n            <div class=\"axp-toolbar-view-menu__header flex items-center justify-between gap-2 border-b border-light px-3 py-2\">\n              <ax-button\n                class=\"ax-sm\"\n                [look]=\"'blank'\"\n                [color]=\"'default'\"\n                [title]=\"('@general:actions.back.title' | translate | async) ?? ''\"\n                (onClick)=\"viewMenuPanel.set('root')\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-chevron-left rtl:rotate-180\" aria-hidden=\"true\"></i>\n                </ax-prefix>\n              </ax-button>\n              <span class=\"min-w-0 flex-1 truncate font-bold\">\n                {{ '@general:terms.common.columns' | translate | async }}\n              </span>\n              <ax-button\n                class=\"ax-sm\"\n                [look]=\"'blank'\"\n                [color]=\"'primary'\"\n                [text]=\"'@general:actions.reset.title' | translate | async\"\n                (onClick)=\"resetViewColumns()\"\n              ></ax-button>\n            </div>\n            <div class=\"axp-toolbar-view-menu__body px-4 py-3\">\n              <axp-query-columns\n                [columns]=\"vm.columns()\"\n                [constrainHeight]=\"false\"\n                (columnsChange)=\"onColumnsChange($event)\"\n              ></axp-query-columns>\n            </div>\n          }\n          <!-- ----- Root presentation menu ----- -->\n          @else {\n            <div class=\"axp-toolbar-view-menu__header border-b border-light px-4 py-3 font-bold\">\n              {{ (deviceService.isSmall()\n                ? '@general:terms.interface.view.list-options'\n                : '@general:terms.interface.view.menu-title') | translate | async }}\n            </div>\n            <div class=\"axp-toolbar-view-menu__body py-2\">\n              <!--------------------------------------------------------------->\n              <!-- ----- Sort opens the sort panel on small screens ----- -->\n              @if (deviceService.isSmall() && vm.canSort()) {\n                <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                  {{ '@general:actions.sort.title' | translate | async }}\n                </div>\n                <ax-button-item-list>\n                  <ax-button-item\n                    [text]=\"(activeSortCount() > 0\n                      ? ('@general:terms.interface.sort.button-active' | translate: { params: { count: activeSortCount() } } | async)\n                      : ('@general:terms.interface.sort.title' | translate | async))!\"\n                    (onClick)=\"openViewSortPanel()\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-sort-amount-up\" aria-hidden=\"true\"></i>\n                    </ax-prefix>\n                    <ax-suffix>\n                      <i class=\"fa-light fa-chevron-right rtl:rotate-180\" aria-hidden=\"true\"></i>\n                    </ax-suffix>\n                  </ax-button-item>\n                </ax-button-item-list>\n                <ax-divider />\n              }\n              <!-- ----- Display mode ----- -->\n              @if (showListDisplayModeControl()) {\n                <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                  {{ '@general:terms.interface.view.display-mode' | translate | async }}\n                </div>\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\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                      <!--->\n                      <!-- ----- Selected table layout ----- -->\n                      @if (listDisplayMode() === 'table') {\n                        <ax-suffix>\n                          <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                        </ax-suffix>\n                      }\n                    </ax-button-item>\n                  }\n                  @if (hasCardListDisplayOption()) {\n                    <!-- ----- Card grid presentation ----- -->\n                    <ax-button-item\n                      [text]=\"('@general:terms.interface.card-view' | translate | async)!\"\n                      [selected]=\"listDisplayMode() === 'card'\"\n                      (onClick)=\"setListDisplayMode('card')\"\n                    >\n                      <ax-prefix>\n                        <i class=\"fa-light fa-grid-2\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                      <!--->\n                      <!-- ----- Selected card layout ----- -->\n                      @if (listDisplayMode() === 'card') {\n                        <ax-suffix>\n                          <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                        </ax-suffix>\n                      }\n                    </ax-button-item>\n                  }\n                  @if (hasRowListDisplayOption()) {\n                    <!-- ----- Horizontal row-list presentation ----- -->\n                    <ax-button-item\n                      [text]=\"('@general:terms.interface.row-view' | translate | async)!\"\n                      [selected]=\"listDisplayMode() === 'row'\"\n                      (onClick)=\"setListDisplayMode('row')\"\n                    >\n                      <ax-prefix>\n                        <i class=\"fa-light fa-grip-lines\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                      <!--->\n                      <!-- ----- Selected row layout ----- -->\n                      @if (listDisplayMode() === 'row') {\n                        <ax-suffix>\n                          <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                        </ax-suffix>\n                      }\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              }\n\n              <!-- ----- Columns ----- -->\n              @if (showColumnsControl()) {\n                <!--->\n                <!-- ----- Divider when a display-mode section is already shown ----- -->\n                @if (showListDisplayModeControl()) {\n                  <ax-divider />\n                }\n                <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                  {{ '@general:terms.common.columns' | translate | async }}\n                </div>\n                <ax-button-item-list>\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.view.manage-columns' | translate | async)!\"\n                    (onClick)=\"openViewColumnsPanel()\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-table-columns\" aria-hidden=\"true\"></i>\n                    </ax-prefix>\n                    <ax-suffix>\n                      <i class=\"fa-light fa-chevron-right rtl:rotate-180\" aria-hidden=\"true\"></i>\n                    </ax-suffix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              }\n\n              <!-- ----- Appearance / row highlight ----- -->\n              <!--->\n              <!-- ----- Divider when earlier presentation sections are present ----- -->\n              @if (showListDisplayModeControl() || showColumnsControl()) {\n                <ax-divider />\n              }\n              <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                {{ '@general:terms.interface.appearance' | translate | async }}\n              </div>\n              <ax-button-item-list>\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.styling.title' | translate | async)!\"\n                  (onClick)=\"openListStylingFromViewMenu()\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-palette\" aria-hidden=\"true\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n              <!--------------------------------------------------------------->\n              <!-- ----- Category opens the navigation drawer on small screens ----- -->\n              @if (deviceService.isSmall() && vm.entityDef.category) {\n                <ax-divider />\n                <ax-button-item-list>\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.category.title' | translate | async)!\"\n                    (onClick)=\"openCategoryFromViewMenu()\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-bars\" aria-hidden=\"true\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              }\n            </div>\n          }\n        </div>\n      </ax-popover>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;.axp-entity-master-toolbar__row{box-sizing:border-box;min-height:2.875rem;padding-block:.1875rem}.axp-toolbar-list-tools{width:max-content;flex:0 0 auto}.axp-toolbar-btn-host{display:inline-flex;width:max-content;flex:0 0 auto;position:relative}.axp-toolbar-btn.ax-button,.axp-toolbar-btn{flex:0 0 auto;width:max-content}.axp-toolbar-btn.ax-button-icon,.axp-toolbar-btn.ax-button-icon button{box-sizing:border-box;height:var(--ax-sys-size-base);min-height:var(--ax-sys-size-base);max-height:var(--ax-sys-size-base);min-width:var(--ax-sys-size-base);max-width:var(--ax-sys-size-base);width:var(--ax-sys-size-base)}.axp-toolbar-btn-sort.ax-button-icon button i{font-size:1em}.axp-toolbar-btn--active button{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-toolbar-btn--active button{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-toolbar-view-menu__section-label{padding-inline:var(--spacing, .25rem);padding-top:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wider, .05em);letter-spacing:var(--tracking-wider, .05em);color:var(--color-neutral-400, oklch(70.8% 0 none));text-transform:uppercase}.axp-toolbar-popover{display:flex;max-height:min(28rem,70vh);flex-direction:column;overflow:hidden}.axp-toolbar-view-menu__header{flex-shrink:0}.axp-toolbar-view-menu__body{min-height:0px;flex:1;overflow-x:hidden;overflow-y:auto}.axp-toolbar-view-menu__body .ax-sorted-list{max-height:none;overflow:visible}.axp-toolbar-sort-panel .axp-query-sorts__header{display:none}.axp-toolbar-view-menu--sheet{width:100%;max-width:100%;border-radius:0;border-inline:0}@media(max-width:600px){.axp-entity-master-toolbar__row{padding-block:.375rem;padding-inline:.25rem}axp-query-filters>.flex{padding-block:0}.axp-toolbar-list-tools{justify-content:flex-end}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: 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$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters", "mode", "quickSearch", "sortPresets", "activeSortPresetName"], outputs: ["onFiltersChanged", "onSortPresetSelected"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "sortPresets", "initialSortQueries", "defaultSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryViewSaveButtonComponent, selector: "axp-query-view-save-button", inputs: ["visible"], outputs: ["save"] }, { kind: "component", type: AXPQueryViewTabsComponent, selector: "axp-query-view-tabs", inputs: ["views", "selectedView"], outputs: ["selectedViewChange", "edit", "remove"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns", "constrainHeight"], outputs: ["columnsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "w-full" }, viewQueries: [{ propertyName: "viewPopover", first: true, predicate: ["viewPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-query-view-tabs\n  id=\"axp-toolbar-view-selector\"\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n  (edit)=\"onEditQueryView($event)\"\n  (remove)=\"onDeleteQueryView($event)\"\n></axp-query-view-tabs>\n<div\n  class=\"axp-entity-master-toolbar__row flex w-full flex-wrap items-center border-b border-light\"\n  [class.min-w-0]=\"deviceService.isSmall()\"\n  [class.gap-2]=\"!deviceService.isSmall()\"\n  [class.gap-1]=\"deviceService.isSmall()\"\n>\n  <!-- ----- Filter chips, search, and Ctrl+F stay on the leading edge ----- -->\n  @if (filtersReady()) {\n    <axp-query-filters\n      id=\"axp-toolbar-filters\"\n      class=\"min-w-0 flex-1\"\n      [filtersDefinitions]=\"filtersDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      [quickSearch]=\"true\"\n      [mode]=\"vm.filterMode()\"\n      [sortPresets]=\"mobileSortPresets()\"\n      [activeSortPresetName]=\"activeSortPresetName()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n      (onSortPresetSelected)=\"onSortPresetSelected($event)\"\n    ></axp-query-filters>\n  }\n\n  <div\n    class=\"axp-toolbar-list-tools ms-auto flex shrink-0 items-center gap-1\"\n  >\n    <!-- ----- Apply pending filters when the list is in manual apply mode ----- -->\n    @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n      <ax-button\n        id=\"axp-toolbar-btn-filter\"\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\" aria-hidden=\"true\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    <!-- ----- Save View appears when the list layout is dirty ----- -->\n    <axp-query-view-save-button\n      [visible]=\"vm.canSaveActiveQueryView()\"\n      (save)=\"onSaveQueryView()\"\n    ></axp-query-view-save-button>\n\n    <!-- ----- Sort stays a direct button on larger screens ----- -->\n    @if (vm.canSort() && !deviceService.isSmall()) {\n      <div class=\"axp-toolbar-btn-host\">\n        <ax-button\n          id=\"axp-toolbar-btn-sort\"\n          class=\"axp-toolbar-btn axp-toolbar-btn-sort\"\n          [class.axp-toolbar-btn--active]=\"activeSortCount() > 0\"\n          [look]=\"'outline'\"\n          [iconOnly]=\"true\"\n          [color]=\"activeSortCount() > 0 ? 'primary' : 'default'\"\n          [attr.aria-expanded]=\"sortMenuOpen()\"\n          [attr.aria-haspopup]=\"'dialog'\"\n          [title]=\"\n            (activeSortCount() > 0\n              ? ('@general:terms.interface.sort.button-active' | translate: { params: { count: activeSortCount() } } | async)\n              : ('@general:actions.sort.title' | translate | async)) ?? ''\n          \"\n          #sortButton\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-sort-amount-up\" aria-hidden=\"true\"></i>\n          </ax-prefix>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-sort\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"8\"\n          [target]=\"sortButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          (onOpened)=\"sortMenuOpen.set(true)\"\n          (onClosed)=\"sortMenuOpen.set(false)\"\n          #sortPopover\n        >\n          <div class=\"axp-toolbar-popover lightest-surface shadow-md border md:w-96 w-full rounded-md overflow-hidden\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              [sortPresets]=\"vm.sortPresets()\"\n              [defaultSortQueries]=\"defaultSortQueries()\"\n              (sortQueriesChange)=\"onSortQueriesChange($event)\"\n              [initialSortQueries]=\"sortQueries()\"\n            ></axp-query-sorts>\n          </div>\n        </ax-popover>\n      </div>\n    }\n\n    <!-- ----- On small screens this button also holds sort and category ----- -->\n    <div class=\"axp-toolbar-btn-host\">\n      <ax-button\n        id=\"axp-toolbar-btn-view\"\n        class=\"axp-toolbar-btn axp-toolbar-btn-view\"\n        [class.axp-toolbar-btn--open]=\"viewMenuOpen()\"\n        [class.axp-toolbar-btn--active]=\"deviceService.isSmall() && activeSortCount() > 0\"\n        [look]=\"'outline'\"\n        [iconOnly]=\"true\"\n        [color]=\"deviceService.isSmall() && activeSortCount() > 0 ? 'primary' : 'default'\"\n        [attr.aria-expanded]=\"viewMenuOpen()\"\n        [attr.aria-haspopup]=\"'menu'\"\n        [title]=\"((deviceService.isSmall()\n          ? '@general:terms.interface.view.list-options'\n          : '@general:terms.interface.view.menu-button') | translate | async) ?? ''\"\n        #viewButton\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-sliders\" aria-hidden=\"true\"></i>\n        </ax-prefix>\n      </ax-button>\n      <ax-popover\n        id=\"axp-popover-view\"\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"8\"\n        [target]=\"viewButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        (onOpened)=\"onViewMenuOpened()\"\n        (onClosed)=\"onViewMenuClosed()\"\n        #viewPopover\n      >\n        <div\n          class=\"axp-toolbar-popover axp-toolbar-view-menu lightest-surface shadow-md border max-w-full overflow-hidden\"\n          [class.w-72]=\"!deviceService.isSmall()\"\n          [class.rounded-md]=\"!deviceService.isSmall()\"\n          [class.w-full]=\"deviceService.isSmall()\"\n          [class.axp-toolbar-view-menu--sheet]=\"deviceService.isSmall()\"\n        >\n          <!-- ----- Nested sort panel on small screens ----- -->\n          @if (viewMenuPanel() === 'sort') {\n            <div class=\"axp-toolbar-view-menu__header flex items-center justify-between gap-2 border-b border-light px-3 py-2\">\n              <ax-button\n                class=\"ax-sm\"\n                [look]=\"'blank'\"\n                [color]=\"'default'\"\n                [title]=\"('@general:actions.back.title' | translate | async) ?? ''\"\n                (onClick)=\"viewMenuPanel.set('root')\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-chevron-left rtl:rotate-180\" aria-hidden=\"true\"></i>\n                </ax-prefix>\n              </ax-button>\n              <span class=\"min-w-0 flex-1 truncate font-bold\">\n                {{ '@general:terms.interface.sort.title' | translate | async }}\n              </span>\n              <ax-button\n                class=\"ax-sm\"\n                [look]=\"'blank'\"\n                [color]=\"'primary'\"\n                [disabled]=\"!canResetSorts()\"\n                [text]=\"'@general:terms.interface.sort.clear' | translate | async\"\n                (onClick)=\"resetSortsFromMenu()\"\n              ></ax-button>\n            </div>\n            <div class=\"axp-toolbar-view-menu__body axp-toolbar-sort-panel\">\n              <axp-query-sorts\n                [sortDefinitions]=\"sortDefinitions()\"\n                [sortPresets]=\"vm.sortPresets()\"\n                [defaultSortQueries]=\"defaultSortQueries()\"\n                (sortQueriesChange)=\"onSortQueriesChange($event)\"\n                [initialSortQueries]=\"sortQueries()\"\n              ></axp-query-sorts>\n            </div>\n          }\n          <!-- ----- Nested column visibility panel ----- -->\n          @else if (viewMenuPanel() === 'columns') {\n            <div class=\"axp-toolbar-view-menu__header flex items-center justify-between gap-2 border-b border-light px-3 py-2\">\n              <ax-button\n                class=\"ax-sm\"\n                [look]=\"'blank'\"\n                [color]=\"'default'\"\n                [title]=\"('@general:actions.back.title' | translate | async) ?? ''\"\n                (onClick)=\"viewMenuPanel.set('root')\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-chevron-left rtl:rotate-180\" aria-hidden=\"true\"></i>\n                </ax-prefix>\n              </ax-button>\n              <span class=\"min-w-0 flex-1 truncate font-bold\">\n                {{ '@general:terms.common.columns' | translate | async }}\n              </span>\n              <ax-button\n                class=\"ax-sm\"\n                [look]=\"'blank'\"\n                [color]=\"'primary'\"\n                [text]=\"'@general:actions.reset.title' | translate | async\"\n                (onClick)=\"resetViewColumns()\"\n              ></ax-button>\n            </div>\n            <div class=\"axp-toolbar-view-menu__body px-4 py-3\">\n              <axp-query-columns\n                [columns]=\"vm.columns()\"\n                [constrainHeight]=\"false\"\n                (columnsChange)=\"onColumnsChange($event)\"\n              ></axp-query-columns>\n            </div>\n          }\n          <!-- ----- Root presentation menu ----- -->\n          @else {\n            <div class=\"axp-toolbar-view-menu__header border-b border-light px-4 py-3 font-bold\">\n              {{ (deviceService.isSmall()\n                ? '@general:terms.interface.view.list-options'\n                : '@general:terms.interface.view.menu-title') | translate | async }}\n            </div>\n            <div class=\"axp-toolbar-view-menu__body py-2\">\n              <!--------------------------------------------------------------->\n              <!-- ----- Sort opens the sort panel on small screens ----- -->\n              @if (deviceService.isSmall() && vm.canSort()) {\n                <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                  {{ '@general:actions.sort.title' | translate | async }}\n                </div>\n                <ax-button-item-list>\n                  <ax-button-item\n                    [text]=\"(activeSortCount() > 0\n                      ? ('@general:terms.interface.sort.button-active' | translate: { params: { count: activeSortCount() } } | async)\n                      : ('@general:terms.interface.sort.title' | translate | async))!\"\n                    (onClick)=\"openViewSortPanel()\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-sort-amount-up\" aria-hidden=\"true\"></i>\n                    </ax-prefix>\n                    <ax-suffix>\n                      <i class=\"fa-light fa-chevron-right rtl:rotate-180\" aria-hidden=\"true\"></i>\n                    </ax-suffix>\n                  </ax-button-item>\n                </ax-button-item-list>\n                <ax-divider />\n              }\n              <!-- ----- Display mode ----- -->\n              @if (showListDisplayModeControl()) {\n                <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                  {{ '@general:terms.interface.view.display-mode' | translate | async }}\n                </div>\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\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                      <!--->\n                      <!-- ----- Selected table layout ----- -->\n                      @if (listDisplayMode() === 'table') {\n                        <ax-suffix>\n                          <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                        </ax-suffix>\n                      }\n                    </ax-button-item>\n                  }\n                  @if (hasCardListDisplayOption()) {\n                    <!-- ----- Card grid presentation ----- -->\n                    <ax-button-item\n                      [text]=\"('@general:terms.interface.card-view' | translate | async)!\"\n                      [selected]=\"listDisplayMode() === 'card'\"\n                      (onClick)=\"setListDisplayMode('card')\"\n                    >\n                      <ax-prefix>\n                        <i class=\"fa-light fa-grid-2\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                      <!--->\n                      <!-- ----- Selected card layout ----- -->\n                      @if (listDisplayMode() === 'card') {\n                        <ax-suffix>\n                          <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                        </ax-suffix>\n                      }\n                    </ax-button-item>\n                  }\n                  @if (hasRowListDisplayOption()) {\n                    <!-- ----- Horizontal row-list presentation ----- -->\n                    <ax-button-item\n                      [text]=\"('@general:terms.interface.row-view' | translate | async)!\"\n                      [selected]=\"listDisplayMode() === 'row'\"\n                      (onClick)=\"setListDisplayMode('row')\"\n                    >\n                      <ax-prefix>\n                        <i class=\"fa-light fa-grip-lines\" aria-hidden=\"true\"></i>\n                      </ax-prefix>\n                      <!--->\n                      <!-- ----- Selected row layout ----- -->\n                      @if (listDisplayMode() === 'row') {\n                        <ax-suffix>\n                          <i class=\"fa-light fa-check\" aria-hidden=\"true\"></i>\n                        </ax-suffix>\n                      }\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              }\n\n              <!-- ----- Columns ----- -->\n              @if (showColumnsControl()) {\n                <!--->\n                <!-- ----- Divider when a display-mode section is already shown ----- -->\n                @if (showListDisplayModeControl()) {\n                  <ax-divider />\n                }\n                <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                  {{ '@general:terms.common.columns' | translate | async }}\n                </div>\n                <ax-button-item-list>\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.view.manage-columns' | translate | async)!\"\n                    (onClick)=\"openViewColumnsPanel()\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-table-columns\" aria-hidden=\"true\"></i>\n                    </ax-prefix>\n                    <ax-suffix>\n                      <i class=\"fa-light fa-chevron-right rtl:rotate-180\" aria-hidden=\"true\"></i>\n                    </ax-suffix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              }\n\n              <!-- ----- Appearance / row highlight ----- -->\n              <!--->\n              <!-- ----- Divider when earlier presentation sections are present ----- -->\n              @if (showListDisplayModeControl() || showColumnsControl()) {\n                <ax-divider />\n              }\n              <div class=\"axp-toolbar-view-menu__section-label px-4\">\n                {{ '@general:terms.interface.appearance' | translate | async }}\n              </div>\n              <ax-button-item-list>\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.styling.title' | translate | async)!\"\n                  (onClick)=\"openListStylingFromViewMenu()\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-palette\" aria-hidden=\"true\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n              <!--------------------------------------------------------------->\n              <!-- ----- Category opens the navigation drawer on small screens ----- -->\n              @if (deviceService.isSmall() && vm.entityDef.category) {\n                <ax-divider />\n                <ax-button-item-list>\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.category.title' | translate | async)!\"\n                    (onClick)=\"openCategoryFromViewMenu()\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-bars\" aria-hidden=\"true\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                </ax-button-item-list>\n              }\n            </div>\n          }\n        </div>\n      </ax-popover>\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;.axp-entity-master-toolbar__row{box-sizing:border-box;min-height:2.875rem;padding-block:.1875rem}.axp-toolbar-list-tools{width:max-content;flex:0 0 auto}.axp-toolbar-btn-host{display:inline-flex;width:max-content;flex:0 0 auto;position:relative}.axp-toolbar-btn.ax-button,.axp-toolbar-btn{flex:0 0 auto;width:max-content}.axp-toolbar-btn.ax-button-icon,.axp-toolbar-btn.ax-button-icon button{box-sizing:border-box;height:var(--ax-sys-size-base);min-height:var(--ax-sys-size-base);max-height:var(--ax-sys-size-base);min-width:var(--ax-sys-size-base);max-width:var(--ax-sys-size-base);width:var(--ax-sys-size-base)}.axp-toolbar-btn-sort.ax-button-icon button i{font-size:1em}.axp-toolbar-btn--active button{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-toolbar-btn--active button{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-toolbar-view-menu__section-label{padding-inline:var(--spacing, .25rem);padding-top:var(--spacing, .25rem);padding-bottom:var(--spacing, .25rem);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wider, .05em);letter-spacing:var(--tracking-wider, .05em);color:var(--color-neutral-400, oklch(70.8% 0 none));text-transform:uppercase}.axp-toolbar-popover{display:flex;max-height:min(28rem,70vh);flex-direction:column;overflow:hidden}.axp-toolbar-view-menu__header{flex-shrink:0}.axp-toolbar-view-menu__body{min-height:0px;flex:1;overflow-x:hidden;overflow-y:auto}.axp-toolbar-view-menu__body .ax-sorted-list{max-height:none;overflow:visible}.axp-toolbar-sort-panel .axp-query-sorts__header{display:none}.axp-toolbar-view-menu--sheet{width:100%;max-width:100%;border-radius:0;border-inline:0}@media(max-width:600px){.axp-entity-master-toolbar__row{padding-block:.375rem;padding-inline:.25rem}axp-query-filters>.flex{padding-block:0}.axp-toolbar-list-tools{justify-content:flex-end}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: 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$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters", "mode", "quickSearch", "sortPresets", "activeSortPresetName"], outputs: ["onFiltersChanged", "onSortPresetSelected"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i6.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "sortPresets", "initialSortQueries", "defaultSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryViewSaveButtonComponent, selector: "axp-query-view-save-button", inputs: ["visible"], outputs: ["save"] }, { kind: "component", type: AXPQueryViewTabsComponent, selector: "axp-query-view-tabs", inputs: ["views", "selectedView"], outputs: ["selectedViewChange", "edit", "remove"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns", "constrainHeight"], outputs: ["columnsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, decorators: [{
             type: Component,
@@ -2433,6 +2490,8 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
         this.listHostReady = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listHostReady" }] : /* istanbul ignore next */ []));
         this.previousAppTabActive = false;
+        /** List refresh that arrived while this route tab was cached in the background. */
+        this.pendingBackgroundListRefresh = null;
         this.lastEvaluatedViewName = null;
         this.componentDestroyed = new Subject();
         this.isRestoringExpandedRows = false;
@@ -2450,33 +2509,10 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             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);
+                if (this.deferListRefreshUntilTabVisible(resetPagination, refreshTargetId, highlightRowId)) {
+                    return;
                 }
-                traceEntityMasterList('list-view', 'refresh event handled', () => this.buildListHostTraceSnapshot());
+                await this.applyVisibleListRefresh(resetPagination, refreshTargetId, highlightRowId);
             }
         });
         effect(() => {
@@ -2490,6 +2526,12 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
                 this.syncListViewQueryParam(currentViewName);
             }
         });
+        effect(() => {
+            if (!this.vm.listTransitionLoading()) {
+                return;
+            }
+            this.showTableLoadingPlaceholders();
+        });
         effect(() => {
             const currentViewName = this.vm.view().name;
             if (!this.listHostReady()) {
@@ -2553,9 +2595,11 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
                 activeTabKey,
                 viewName: this.vm.view().name,
                 activeListLayout: this.vm.activeListLayout(),
+                pendingRefresh: this.pendingBackgroundListRefresh != null,
                 ...this.buildListHostTraceSnapshot(),
             }));
             this.pageContextRegistry.activate(this.pageContextRegistrationId);
+            this.flushBackgroundListRefresh();
         });
         this.registerPageContext();
     }
@@ -2784,7 +2828,87 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             axpReplaceEntityListRouteQueryParams(this.router, { view: viewName });
         });
     }
+    /** True when this cached list is not the visible route tab. */
+    isListTabInBackground() {
+        if (this.tabNavigation.effectiveMode() !== 'tabular') {
+            return false;
+        }
+        const pageTabKey = this.getPageTabKey();
+        if (!pageTabKey) {
+            return false;
+        }
+        return this.tabNavigation.activeKey() !== pageTabKey;
+    }
+    /**
+     * A detached list keeps its grid, but a refresh while it is off-screen does not
+     * repaint when the tab is shown again. Hold the latest refresh until then.
+     */
+    deferListRefreshUntilTabVisible(resetPagination, refreshTargetId, highlightRowId) {
+        if (!this.isListTabInBackground()) {
+            return false;
+        }
+        const previous = this.pendingBackgroundListRefresh;
+        this.pendingBackgroundListRefresh = {
+            resetPagination: resetPagination || (previous?.resetPagination ?? false),
+            refreshTargetId,
+            highlightRowId: highlightRowId ?? previous?.highlightRowId,
+        };
+        return true;
+    }
+    /** Applies a refresh that was queued while this list tab was in the background. */
+    flushBackgroundListRefresh() {
+        const pending = this.pendingBackgroundListRefresh;
+        if (!pending) {
+            return;
+        }
+        this.pendingBackgroundListRefresh = null;
+        queueMicrotask(() => {
+            if (this.listQueryParamSyncDisabled) {
+                return;
+            }
+            if (this.isListTabInBackground()) {
+                this.pendingBackgroundListRefresh = pending;
+                return;
+            }
+            void this.applyVisibleListRefresh(pending.resetPagination, pending.refreshTargetId, pending.highlightRowId);
+        });
+    }
+    async applyVisibleListRefresh(resetPagination, refreshTargetId, highlightRowId) {
+        const epoch = this.vm.viewSwitchEpoch();
+        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 (typeof refreshTargetId === 'string' || typeof refreshTargetId === 'number') {
+            const parentId = String(refreshTargetId);
+            await this.grid()?.refreshItemChildren(parentId);
+            this.updateParentHasChildAfterRefresh(parentId);
+        }
+        else {
+            await this.reloadListData(resetPagination);
+        }
+        if (!this.vm.isViewSwitchCurrent(epoch)) {
+            return;
+        }
+        if (typeof highlightRowId === 'string' || typeof highlightRowId === 'number') {
+            await this.highlightRowById(highlightRowId);
+        }
+        traceEntityMasterList('list-view', 'refresh event handled', () => this.buildListHostTraceSnapshot());
+    }
     async reloadListData(resetPagination = false) {
+        const epoch = this.vm.viewSwitchEpoch();
         traceEntityMasterList('list-view', 'reloadListData start', () => ({
             resetPagination,
             activeListLayout: this.vm.activeListLayout(),
@@ -2793,12 +2917,22 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             hasCardList: !!this.cardList(),
             dataSource: buildDataSourceTraceSnapshot(this.vm.dataSource),
         }));
+        if (!this.vm.isViewSwitchCurrent(epoch)) {
+            return;
+        }
         if (!resetPagination && !this.vm.isCardHostLayout()) {
             await this.vm.ensureListPagingResolved();
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                return;
+            }
             this.vm.applyPagingToDataSourceWithoutLoad();
         }
+        if (!this.vm.isViewSwitchCurrent(epoch)) {
+            return;
+        }
         if (this.vm.isCardHostLayout()) {
             await this.cardList()?.reload(true);
+            this.vm.finishListTransition(epoch);
             // Shared DS load updates table rows via onChanged but not isRefreshCalled; prepare for a later table switch.
             this.acknowledgeManualTableReady();
             traceEntityMasterList('list-view', 'reloadListData complete (card)', () => this.buildListHostTraceSnapshot());
@@ -2806,21 +2940,59 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
         }
         const grid = this.grid();
         if (grid) {
-            const dataReady = this.waitForDataSourceLoad(grid.dataSource);
+            if (resetPagination || this.vm.listTransitionLoading()) {
+                this.showTableLoadingPlaceholders();
+            }
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                return;
+            }
+            const watch = watchNextDataSourceLoad(grid.dataSource, () => this.vm.isViewSwitchCurrent(epoch));
             grid.refresh({ reset: resetPagination });
-            await dataReady;
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                watch.stop();
+                return;
+            }
+            if (grid.dataSource.isLoading) {
+                await watch.promise;
+            }
+            else {
+                watch.stop();
+            }
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                return;
+            }
+            this.vm.finishListTransition(epoch);
             if (!resetPagination) {
                 this.scheduleSyncGridPagerUi();
             }
             this.scheduleRestoreExpandedRows();
         }
         else {
-            const dataReady = this.waitForDataSourceLoad(this.vm.dataSource);
+            const watch = watchNextDataSourceLoad(this.vm.dataSource, () => this.vm.isViewSwitchCurrent(epoch));
             this.vm.dataSource.refresh({ reset: resetPagination });
-            await dataReady;
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                watch.stop();
+                return;
+            }
+            if (this.vm.dataSource.isLoading) {
+                await watch.promise;
+            }
+            else {
+                watch.stop();
+            }
+            if (!this.vm.isViewSwitchCurrent(epoch)) {
+                return;
+            }
+            this.vm.finishListTransition(epoch);
         }
         traceEntityMasterList('list-view', 'reloadListData complete (table)', () => this.buildListHostTraceSnapshot());
     }
+    /** Skeleton rows so an empty previous result does not stay on screen while the next page loads. */
+    showTableLoadingPlaceholders() {
+        const grid = this.grid();
+        const pageSize = this.vm.dataSource.pageSize || 10;
+        grid?.displayedRows?.set(new Array(pageSize));
+    }
     /**
      * Manual-mode table gates the body on `isRefreshCalled` (set only by `grid.refresh()`).
      * Card loads use shared `dataSource.refresh()`, so rows/totalCount update while the gate stays closed.
@@ -2848,35 +3020,6 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             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();
     }
@@ -4424,7 +4567,7 @@ class AXPEntityReuseStrategy {
     //#endregion
     //#region ---- Detach / Attach ----
     shouldDetach(route) {
-        if (!this.routeCache.isEnabled() || !this.isTabCacheRoute(route)) {
+        if (!this.routeCache.isEnabled() || !this.routeCache.canCache() || !this.isTabCacheRoute(route)) {
             return false;
         }
         const scopedKey = this.scopedTabKeyFor(route);
@@ -4452,7 +4595,10 @@ class AXPEntityReuseStrategy {
         }
     }
     shouldAttach(route) {
-        if (!this.routeCache.isEnabled() || !this.isTabCacheRoute(route)) {
+        if (!this.routeCache.isEnabled() ||
+            !this.routeCache.canCache() ||
+            this.routeCache.isAttachSuspended() ||
+            !this.isTabCacheRoute(route)) {
             return false;
         }
         const key = this.routeCacheKeyFor(route);
@@ -4478,12 +4624,19 @@ class AXPEntityReuseStrategy {
         if (reuseConfig === false) {
             return false;
         }
+        // Same component route under a different scoped tab (settings user ↔ tenant) must remount.
+        // Otherwise one page instance keeps the first scope's tab key and overwrites every scope title.
+        if (this.routeCache.isEnabled() &&
+            future.routeConfig &&
+            future.routeConfig === curr.routeConfig &&
+            axpResolveTabKeyFromSnapshot(future) !== axpResolveTabKeyFromSnapshot(curr)) {
+            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.
+            // Same route node inside one scoped tab (settings group changes keep `setting-page`).
+            // Config reference equality: an empty-path child of settings and of chat can share a path
+            // string, and a path-only match would keep the previous content.
             if (future.routeConfig && future.routeConfig === curr.routeConfig) {
                 return true;
             }
@@ -4498,6 +4651,11 @@ class AXPEntityReuseStrategy {
         if (future.routeConfig !== curr.routeConfig) {
             return false;
         }
+        // Simple mode keeps one list component and swaps navigation query params in place.
+        // Tabular mode caches each menu, so a different `mode` or `list` must not reuse that component.
+        if (this.routeCache.isEnabled() && this.entityListNavigationChanged(future, curr)) {
+            return false;
+        }
         if (typeof reuseConfig === 'string') {
             const paramsChanged = this.haveParamsChanged(future, curr);
             const queryParamsChanged = this.haveQueryParamsChanged(future, curr);
@@ -4551,11 +4709,11 @@ class AXPEntityReuseStrategy {
         const config = shell.routeConfig;
         return !!(config?.children?.length || config?.loadChildren);
     }
-    /** Nearest ancestor route that declares `data.tab = true`. */
+    /** Nearest ancestor whose own route config declares `data.tab = true` (not inherited data). */
     findScopedAncestor(route) {
         for (let index = route.pathFromRoot.length - 1; index >= 0; index--) {
             const snapshot = route.pathFromRoot[index];
-            if (axpHasTabScope(snapshot.data)) {
+            if (axpSnapshotDeclaresTabScope(snapshot)) {
                 return snapshot;
             }
         }
@@ -4594,12 +4752,13 @@ class AXPEntityReuseStrategy {
         const config = route.routeConfig;
         return !!(route.component || config?.component || config?.loadComponent);
     }
-    /** Cache key — scoped tab path for shells, full leaf path otherwise. */
+    /** Cache key — scoped tab path for shells, full leaf path otherwise, plus entity-list `list`. */
     routeCacheKeyFor(route) {
         if (!this.isTabCacheRoute(route)) {
             return null;
         }
-        const path = this.findScopedShellRoute(route) ? axpResolveTabKeyFromSnapshot(route) : axpPathFromSnapshot(route);
+        const basePath = this.findScopedShellRoute(route) ? axpResolveTabKeyFromSnapshot(route) : axpPathFromSnapshot(route);
+        const path = axpEntityListNavigationTabKey(basePath, route.queryParams);
         return axpIsTabEligibleUrl(path) ? path : null;
     }
     /** Scoped tab key — matches open tab descriptors (`data.tab = true`). */
@@ -4622,11 +4781,27 @@ class AXPEntityReuseStrategy {
         if (!navigation?.finalUrl) {
             return true;
         }
-        const targetPath = router.serializeUrl(navigation.finalUrl).split('?')[0].split('#')[0];
-        const futureScoped = axpResolveTabKeyFromRouteConfig(router.config, targetPath) ??
+        const targetUrl = router.serializeUrl(navigation.finalUrl);
+        const errorSource = axpInTabErrorSourceUrl(targetUrl);
+        if (errorSource) {
+            return currentScoped !== axpResolveTabKey(router, errorSource);
+        }
+        const targetPath = targetUrl.split('?')[0].split('#')[0];
+        const futureBase = axpResolveTabKeyFromRouteConfig(router.config, targetPath) ??
             (targetPath.startsWith('/') ? targetPath : `/${targetPath}`);
+        const futureScoped = axpEntityListNavigationTabKey(futureBase, targetUrl);
         return currentScoped !== futureScoped;
     }
+    /** True when two activations of the entity list route belong to different menus (`mode`, `list`, …). */
+    entityListNavigationChanged(future, curr) {
+        const futurePath = axpPathFromSnapshot(future);
+        const currPath = axpPathFromSnapshot(curr);
+        if (!axpIsEntityListPath(futurePath) && !axpIsEntityListPath(currPath)) {
+            return false;
+        }
+        return (axpEntityListNavigationTabKey(futurePath, future.queryParams) !==
+            axpEntityListNavigationTabKey(currPath, curr.queryParams));
+    }
     haveParamsChanged(future, curr) {
         const futureParams = future.params;
         const currParams = curr.params;
@@ -4682,18 +4857,20 @@ function routesFacory() {
         },
         {
             path: 'error',
+            data: { rootLayout: true },
+            loadComponent: () => Promise.resolve().then(function () { return rootLayout_component; }).then((c) => c.AXPRootLayoutComponent),
             children: [
                 {
                     path: 'offline',
-                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-offline.component-PvveUj5c.mjs').then((c) => c.AXPErrorOfflineComponent),
+                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-offline.component-Abf14p44.mjs').then((c) => c.AXPErrorOfflineComponent),
                 },
                 {
                     path: '404',
-                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-404.component-BeWyRCJr.mjs').then((c) => c.AXPError404Component),
+                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-404.component-BusKNAit.mjs').then((c) => c.AXPError404Component),
                 },
                 {
                     path: '401',
-                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-401.component-1lfBpY_d.mjs').then((c) => c.AXPError401Component),
+                    loadComponent: () => import('./acorex-platform-framework-client-themes-default-error-401.component-DszlyIaw.mjs').then((c) => c.AXPError401Component),
                 },
             ],
         },
@@ -4725,9 +4902,9 @@ class AXPDefaultThemeModule {
                                 single: () => import('./acorex-platform-framework-client-themes-default-entity-master-single-view.component-2Re1-MvA.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-DwCoz2Du.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
+                                create: () => import('./acorex-platform-framework-client-themes-default-entity-master-create-view.component-DPU6jTDk.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
                                 ///
-                                modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-BCyFK60f.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
+                                modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-CLdQJ8e8.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
                                 //
                                 list: () => Promise.resolve().then(function () { return entityMasterListView_component; }).then((c) => c.AXPEntityMasterListViewComponent),
                             },
@@ -4762,9 +4939,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                                             single: () => import('./acorex-platform-framework-client-themes-default-entity-master-single-view.component-2Re1-MvA.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-DwCoz2Du.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
+                                            create: () => import('./acorex-platform-framework-client-themes-default-entity-master-create-view.component-DPU6jTDk.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
                                             ///
-                                            modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-BCyFK60f.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
+                                            modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-CLdQJ8e8.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
                                             //
                                             list: () => Promise.resolve().then(function () { return entityMasterListView_component; }).then((c) => c.AXPEntityMasterListViewComponent),
                                         },