@acorex/platform 20.9.19 → 20.9.21

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

@@ -1241,12 +1241,15 @@ class AXPEntityMasterToolbarViewComponent {
         this.deviceService = inject(AXPDeviceService);
         this.parent = inject(AXPEntityMasterListViewComponent);
         this.router = inject(Router);
+        this.activeRoute = inject(ActivatedRoute);
         this.settingsService = inject(AXPSettingsService);
         this.injector = inject(Injector);
         this.isInitializing = false;
         this.pendingInitialSorts = true;
         this.filterTriggerMode = 'manual';
         this.previousFilterQueries = signal([], ...(ngDevMode ? [{ debugName: "previousFilterQueries" }] : /* istanbul ignore next */ []));
+        /** Gates query-filters until `initialFilters` are seeded (prevents empty emit wiping persisted filters). */
+        this.filtersReady = signal(false, ...(ngDevMode ? [{ debugName: "filtersReady" }] : /* istanbul ignore next */ []));
         this.initialFilters = signal([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : /* istanbul ignore next */ []));
         this.filtersDefinitions = signal([], ...(ngDevMode ? [{ debugName: "filtersDefinitions" }] : /* istanbul ignore next */ []));
         this.viewQueries = computed(() => this.vm.views().map((v) => ({
@@ -1291,7 +1294,10 @@ class AXPEntityMasterToolbarViewComponent {
         // Debounced apply to coalesce multiple UI changes (filters/sorts/columns)
         this.applyTimer = null;
         this.#effect = effect(() => {
-            // Keep definitions up to date; initial filters are set explicitly from settings or view
+            // Keep definitions up to date after the initial filter seed (initial filters are set explicitly)
+            if (!this.filtersReady()) {
+                return;
+            }
             this.filtersDefinitions.set(this.vm.filterDefinitions());
         }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
         this.sortQueries = computed(() => this.vm
@@ -1321,11 +1327,10 @@ class AXPEntityMasterToolbarViewComponent {
         }, ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : /* istanbul ignore next */ []));
     }
     async ngOnInit() {
-        // Prefer saved settings (view/columns/sorts/filters) if available, then apply once
+        // Prefer URL `view` over saved settings; fall back to settings when URL has no view.
         await this.loadSettings();
-        await this.vm.setView();
+        await this.vm.setView(this.activeRoute.snapshot.queryParamMap.get('view'));
         await this.vm.ensureListPagingResolved();
-        this.filtersDefinitions.set(this.vm.filterDefinitions());
         await this.runInitialListLoad();
     }
     /**
@@ -1336,9 +1341,12 @@ class AXPEntityMasterToolbarViewComponent {
         this.isInitializing = true;
         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;
     }
@@ -1367,6 +1375,7 @@ class AXPEntityMasterToolbarViewComponent {
     async onViewChanged(view) {
         await this.vm.setView(view.name);
         if (axpIsEntityListRoute(this.router)) {
+            this.vm.markRouteQueryContextSynced(this.activeRoute.snapshot.queryParamMap, { view: view.name });
             axpReplaceEntityListRouteQueryParams(this.router, { view: view.name });
         }
         await this.runInitialListLoad();
@@ -1393,15 +1402,33 @@ class AXPEntityMasterToolbarViewComponent {
             this.previousFilterQueries.set(filters);
             return;
         }
+        if (!this.filtersReady()) {
+            return;
+        }
         this.vm.filterQueries.set(filters);
         if (this.filterTriggerMode === 'auto') {
-            this.applyFilters();
+            void this.applyFilters();
         }
     }
-    applyFilters() {
+    async applyFilters() {
+        const persistableFilters = this.vm.getPersistableFilterQueries();
         this.previousFilterQueries.set(this.vm.filterQueries());
-        this.vm.saveSettings('filters', this.vm.filterQueries());
-        void this.vm.applyFilterAndSort();
+        await this.vm.saveSettings('filters', persistableFilters);
+        this.stripFiltersFromRouteQueryParam();
+        await this.vm.applyFilterAndSort();
+    }
+    /** Removes `filters` from the entity list URL; filter state is persisted in user settings only. */
+    stripFiltersFromRouteQueryParam() {
+        if (!axpIsEntityListRoute(this.router)) {
+            return;
+        }
+        const url = this.router.url;
+        if (!url.includes('filters=')) {
+            return;
+        }
+        // Mark the post-strip key first so queryParamMap emission does not trigger an extra list reload.
+        this.vm.markRouteQueryContextSynced(this.activeRoute.snapshot.queryParamMap, { filters: null });
+        axpReplaceEntityListRouteQueryParams(this.router, { filters: null });
     }
     onSortQueriesChange(e) {
         if (this.isInitializing || this.pendingInitialSorts) {
@@ -1450,7 +1477,7 @@ class AXPEntityMasterToolbarViewComponent {
         // this.scheduleApply();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, viewQueries: [{ propertyName: "listDisplayModePopover", first: true, predicate: ["listDisplayModePopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- <axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar> -->\n<axp-query-views\n  id=\"axp-toolbar-view-selector\"\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  <axp-query-filters\n    id=\"axp-toolbar-filters\"\n    [filtersDefinitions]=\"filtersDefinitions()\"\n    [initialFilters]=\"initialFilters()\"\n    (onFiltersChanged)=\"onFiltersChanged($event)\"\n  ></axp-query-filters>\n\n  <div class=\"ax-flex ax-items-center ax-gap-2 md:ax-gap-2\">\n    @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n      <ax-button\n        id=\"axp-toolbar-btn-filter\"\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (vm.activeListLayout() === 'table') {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-columns\" [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n          <i class=\"fa-light fa-table-columns\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-columns\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"columnButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #columnsPopover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.columns' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n\n    @if (vm.canSort()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-sort\" [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n          <i class=\"fa-light fa-sort-amount-up\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-sort\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"sortButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #popover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.sorts' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <!-- <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting> -->\n              <axp-query-sorts\n                [sortDefinitions]=\"sortDefinitions()\"\n                (sortQueriesChange)=\"onSortQueriesChange($event)\"\n                [initialSortQueries]=\"sortQueries()\"\n              ></axp-query-sorts>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n    @if (deviceService.isSmall()) {\n      <ax-button\n        id=\"axp-toolbar-btn-category\"\n        (onClick)=\"parent.toggleCategoryDrawer()\"\n        [iconOnly]=\"true\"\n        [color]=\"'default'\"\n      >\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n    }\n\n    @if (showListDisplayModeControl()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-list-display\" [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n          <i [class]=\"listDisplayModeButtonIcon()\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-list-display\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"listDisplayButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #listDisplayModePopover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.interface.list-display' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-2\">\n              <ax-button-item-list>\n                @if (hasTableListDisplayOption()) {\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                    [selected]=\"listDisplayMode() === 'table'\"\n                    (onClick)=\"setListDisplayMode('table')\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-table\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n                @if (hasTableListDisplayOption()) {\n                  <ax-divider />\n                }\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-compact-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-compact'\"\n                  (onClick)=\"setListDisplayMode('card-compact')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grip-lines\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-expanded-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-expanded'\"\n                  (onClick)=\"setListDisplayMode('card-expanded')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grid-2\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryViewsComponent, selector: "axp-query-views", inputs: ["views", "selectedView"], outputs: ["viewsChange", "selectedViewChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterToolbarViewComponent, isStandalone: true, selector: "axp-entity-master-toolbar-view", inputs: { vm: ["viewModel", "vm"] }, host: { classAttribute: "ax-w-full" }, viewQueries: [{ propertyName: "listDisplayModePopover", first: true, predicate: ["listDisplayModePopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- <axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar> -->\n<axp-query-views\n  id=\"axp-toolbar-view-selector\"\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  @if (filtersReady()) {\n    <axp-query-filters\n      id=\"axp-toolbar-filters\"\n      [filtersDefinitions]=\"filtersDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n\n  <div class=\"ax-flex ax-items-center ax-gap-2 md:ax-gap-2\">\n    @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n      <ax-button\n        id=\"axp-toolbar-btn-filter\"\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (vm.activeListLayout() === 'table') {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-columns\" [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n          <i class=\"fa-light fa-table-columns\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-columns\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"columnButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #columnsPopover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.columns' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n\n    @if (vm.canSort()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-sort\" [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n          <i class=\"fa-light fa-sort-amount-up\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-sort\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"sortButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #popover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.sorts' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <!-- <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting> -->\n              <axp-query-sorts\n                [sortDefinitions]=\"sortDefinitions()\"\n                (sortQueriesChange)=\"onSortQueriesChange($event)\"\n                [initialSortQueries]=\"sortQueries()\"\n              ></axp-query-sorts>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n    @if (deviceService.isSmall()) {\n      <ax-button\n        id=\"axp-toolbar-btn-category\"\n        (onClick)=\"parent.toggleCategoryDrawer()\"\n        [iconOnly]=\"true\"\n        [color]=\"'default'\"\n      >\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n    }\n\n    @if (showListDisplayModeControl()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-list-display\" [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n          <i [class]=\"listDisplayModeButtonIcon()\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-list-display\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"listDisplayButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #listDisplayModePopover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.interface.list-display' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-2\">\n              <ax-button-item-list>\n                @if (hasTableListDisplayOption()) {\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                    [selected]=\"listDisplayMode() === 'table'\"\n                    (onClick)=\"setListDisplayMode('table')\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-table\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n                @if (hasTableListDisplayOption()) {\n                  <ax-divider />\n                }\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-compact-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-compact'\"\n                  (onClick)=\"setListDisplayMode('card-compact')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grip-lines\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-expanded-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-expanded'\"\n                  (onClick)=\"setListDisplayMode('card-expanded')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grid-2\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryViewsComponent, selector: "axp-query-views", inputs: ["views", "selectedView"], outputs: ["viewsChange", "selectedViewChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterToolbarViewComponent, decorators: [{
             type: Component,
@@ -1467,7 +1494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPQueryColumnsComponent,
                     ], host: {
                         class: 'ax-w-full',
-                    }, template: "<!-- <axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar> -->\n<axp-query-views\n  id=\"axp-toolbar-view-selector\"\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  <axp-query-filters\n    id=\"axp-toolbar-filters\"\n    [filtersDefinitions]=\"filtersDefinitions()\"\n    [initialFilters]=\"initialFilters()\"\n    (onFiltersChanged)=\"onFiltersChanged($event)\"\n  ></axp-query-filters>\n\n  <div class=\"ax-flex ax-items-center ax-gap-2 md:ax-gap-2\">\n    @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n      <ax-button\n        id=\"axp-toolbar-btn-filter\"\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (vm.activeListLayout() === 'table') {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-columns\" [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n          <i class=\"fa-light fa-table-columns\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-columns\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"columnButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #columnsPopover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.columns' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n\n    @if (vm.canSort()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-sort\" [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n          <i class=\"fa-light fa-sort-amount-up\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-sort\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"sortButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #popover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.sorts' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <!-- <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting> -->\n              <axp-query-sorts\n                [sortDefinitions]=\"sortDefinitions()\"\n                (sortQueriesChange)=\"onSortQueriesChange($event)\"\n                [initialSortQueries]=\"sortQueries()\"\n              ></axp-query-sorts>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n    @if (deviceService.isSmall()) {\n      <ax-button\n        id=\"axp-toolbar-btn-category\"\n        (onClick)=\"parent.toggleCategoryDrawer()\"\n        [iconOnly]=\"true\"\n        [color]=\"'default'\"\n      >\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n    }\n\n    @if (showListDisplayModeControl()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-list-display\" [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n          <i [class]=\"listDisplayModeButtonIcon()\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-list-display\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"listDisplayButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #listDisplayModePopover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.interface.list-display' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-2\">\n              <ax-button-item-list>\n                @if (hasTableListDisplayOption()) {\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                    [selected]=\"listDisplayMode() === 'table'\"\n                    (onClick)=\"setListDisplayMode('table')\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-table\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n                @if (hasTableListDisplayOption()) {\n                  <ax-divider />\n                }\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-compact-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-compact'\"\n                  (onClick)=\"setListDisplayMode('card-compact')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grip-lines\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-expanded-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-expanded'\"\n                  (onClick)=\"setListDisplayMode('card-expanded')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grid-2\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n  </div>\n</div>\n" }]
+                    }, template: "<!-- <axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar> -->\n<axp-query-views\n  id=\"axp-toolbar-view-selector\"\n  [views]=\"viewQueries()\"\n  [selectedView]=\"selectedViewQuery()\"\n  (selectedViewChange)=\"onViewChanged($event)\"\n></axp-query-views>\n<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  @if (filtersReady()) {\n    <axp-query-filters\n      id=\"axp-toolbar-filters\"\n      [filtersDefinitions]=\"filtersDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n\n  <div class=\"ax-flex ax-items-center ax-gap-2 md:ax-gap-2\">\n    @if (filterTriggerMode === 'manual' && isFiltersDirty()) {\n      <ax-button\n        id=\"axp-toolbar-btn-filter\"\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (vm.activeListLayout() === 'table') {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-columns\" [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n          <i class=\"fa-light fa-table-columns\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-columns\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"columnButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #columnsPopover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.columns' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <axp-query-columns [columns]=\"vm.columns()\" (columnsChange)=\"onColumnsChange($event)\"></axp-query-columns>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n\n    @if (vm.canSort()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-sort\" [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n          <i class=\"fa-light fa-sort-amount-up\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-sort\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"sortButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #popover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.common.sorts' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-4\">\n              <!-- <axp-list-view-option-sorting [viewModel]=\"vm\"></axp-list-view-option-sorting> -->\n              <axp-query-sorts\n                [sortDefinitions]=\"sortDefinitions()\"\n                (sortQueriesChange)=\"onSortQueriesChange($event)\"\n                [initialSortQueries]=\"sortQueries()\"\n              ></axp-query-sorts>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n    @if (deviceService.isSmall()) {\n      <ax-button\n        id=\"axp-toolbar-btn-category\"\n        (onClick)=\"parent.toggleCategoryDrawer()\"\n        [iconOnly]=\"true\"\n        [color]=\"'default'\"\n      >\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n    }\n\n    @if (showListDisplayModeControl()) {\n      <div>\n        <ax-button id=\"axp-toolbar-btn-list-display\" [iconOnly]=\"true\" #listDisplayButton [color]=\"'default'\">\n          <i [class]=\"listDisplayModeButtonIcon()\"></i>\n        </ax-button>\n        <ax-popover\n          id=\"axp-popover-list-display\"\n          [adaptivityEnabled]=\"true\"\n          [offsetY]=\"10\"\n          [target]=\"listDisplayButton\"\n          [openOn]=\"'toggle'\"\n          [closeOn]=\"'clickOut'\"\n          #listDisplayModePopover\n        >\n          <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n            <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n              {{ '@general:terms.interface.list-display' | translate | async }}\n            </ax-header>\n            <div class=\"ax-py-2 ax-px-2\">\n              <ax-button-item-list>\n                @if (hasTableListDisplayOption()) {\n                  <ax-button-item\n                    [text]=\"('@general:terms.interface.table-view' | translate | async)!\"\n                    [selected]=\"listDisplayMode() === 'table'\"\n                    (onClick)=\"setListDisplayMode('table')\"\n                  >\n                    <ax-prefix>\n                      <i class=\"fa-light fa-table\"></i>\n                    </ax-prefix>\n                  </ax-button-item>\n                }\n                @if (hasTableListDisplayOption()) {\n                  <ax-divider />\n                }\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-compact-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-compact'\"\n                  (onClick)=\"setListDisplayMode('card-compact')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grip-lines\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n                <ax-button-item\n                  [text]=\"('@general:terms.interface.card-expanded-view' | translate | async)!\"\n                  [selected]=\"listDisplayMode() === 'card-expanded'\"\n                  (onClick)=\"setListDisplayMode('card-expanded')\"\n                >\n                  <ax-prefix>\n                    <i class=\"fa-light fa-grid-2\"></i>\n                  </ax-prefix>\n                </ax-button-item>\n              </ax-button-item-list>\n            </div>\n          </div>\n        </ax-popover>\n      </div>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { vm: [{
                 type: Input,
                 args: ['viewModel']
@@ -2040,12 +2067,22 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
         this.restoreExpandedRowsScheduled = false;
         /** Blocks deferred `replaceUrl` view sync after destroy or once details navigation has started. */
         this.listQueryParamSyncDisabled = false;
+        /** Tracks layout so card → table can reveal rows without a second fetch. */
+        this.lastListLayout = this.vm.activeListLayout();
         effect(() => {
             const grid = this.grid();
             if (grid) {
                 grid.selectedRows = this.vm.selectedItems();
             }
         });
+        effect(() => {
+            const layout = this.vm.activeListLayout();
+            const previousLayout = untracked(() => this.lastListLayout);
+            this.lastListLayout = layout;
+            if (layout === 'table' && previousLayout === 'card') {
+                untracked(() => this.acknowledgeManualTableReady());
+            }
+        });
         this.vm.events$.subscribe(async (e) => {
             const refreshTargetId = e.meta?.refreshTargetId;
             const highlightRowId = e.meta?.highlightRowId;
@@ -2075,7 +2112,8 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             }
             const currentViewName = this.vm.view().name;
             const urlView = this.activeRoute.snapshot.queryParamMap.get('view');
-            if (currentViewName && currentViewName !== urlView) {
+            // Only fill a missing `view` query param. When URL and VM diverge, URL wins via queryParam sync.
+            if (currentViewName && !urlView) {
                 this.syncListViewQueryParam(currentViewName);
             }
         });
@@ -2120,9 +2158,13 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
         const resolvedView = this.vm.view().name;
         const currentUrlView = this.activeRoute.snapshot.queryParamMap.get('view');
         if (currentUrlView !== resolvedView) {
+            // Mark the post-replaceUrl key before navigating so the emission does not reload without filters.
+            this.vm.markRouteQueryContextSynced(this.activeRoute.snapshot.queryParamMap, { view: resolvedView });
             this.syncListViewQueryParam(resolvedView);
         }
-        this.vm.markRouteQueryContextSynced(this.activeRoute.snapshot.queryParamMap);
+        else {
+            this.vm.markRouteQueryContextSynced(this.activeRoute.snapshot.queryParamMap);
+        }
         this.initializedFromRoute = true;
         this.bindExpandedRowPersistence();
         this.scheduleRestoreExpandedRows();
@@ -2260,6 +2302,7 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             if (this.listQueryParamSyncDisabled) {
                 return;
             }
+            this.vm.markRouteQueryContextSynced(this.activeRoute.snapshot.queryParamMap, { view: viewName });
             axpReplaceEntityListRouteQueryParams(this.router, { view: viewName });
         });
     }
@@ -2270,6 +2313,8 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
         }
         if (this.vm.activeListLayout() === 'card') {
             await this.cardList()?.reload(resetPagination);
+            // Shared DS load updates table rows via onChanged but not isRefreshCalled; prepare for a later table switch.
+            this.acknowledgeManualTableReady();
             return;
         }
         const grid = this.grid();
@@ -2288,6 +2333,19 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
             await dataReady;
         }
     }
+    /**
+     * 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.
+     * Opening the gate here avoids an extra network refresh when switching to table.
+     */
+    acknowledgeManualTableReady() {
+        // `isRefreshCalled` is private on AXDataTableComponent; runtime access is intentional (zero-fetch reveal).
+        const grid = this.grid();
+        if (!grid?.isRefreshCalled || grid.isRefreshCalled()) {
+            return;
+        }
+        grid.isRefreshCalled.set(true);
+    }
     /**
      * Waits until a `refresh()` load cycle completes (loading started, then finished with data).
      */