@acorex-platform/framework-client 0.0.46 → 0.0.49

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

@@ -1229,12 +1229,8 @@ class AXPEntityCategoryComponent {
             });
         }
         const categoryFilters = this.buildCategoryFilters(nodeData, applyConditions);
-        const viewFilters = this.buildViewFilters();
-        this.vm().dataSource.filter({
-            filters: [...viewFilters, ...categoryFilters],
-            logic: 'and',
-        });
-        this.vm().events$.next({ action: 'refresh', meta: { resetPagination: true } });
+        this.vm().setCategoryListFilters(categoryFilters);
+        void this.vm().applyFilterAndSort({ resetPagination: true });
     }
     /**
      * Handles node toggle events (expansion/collapse)
@@ -1659,18 +1655,11 @@ class AXPEntityCategoryComponent {
                 field: condition.name,
                 value,
                 operator: condition.operator,
+                hidden: true,
             };
         })
             .filter((item) => item !== null);
     }
-    /**
-     * Builds view filters from view conditions
-     */
-    buildViewFilters() {
-        return this.vm()
-            .view()
-            .conditions.map((condition) => ({ ...condition, field: condition.name }));
-    }
     /**
      * Refreshes the parent node of the given entity data
      */
@@ -1751,9 +1740,12 @@ class AXPEntityMasterToolbarViewComponent {
         this.isInitializing = false;
         this.pendingInitialSorts = true;
         this.filterTriggerMode = 'manual';
-        /** Mobile list tools start collapsed so the filter field keeps the row. */
-        this.listToolsOpen = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "listToolsOpen" }] : /* istanbul ignore next */ []));
+        this.sortMenuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortMenuOpen" }] : /* istanbul ignore next */ []));
+        this.viewMenuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewMenuOpen" }] : /* istanbul ignore next */ []));
+        this.viewMenuPanel = signal('root', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewMenuPanel" }] : /* istanbul ignore next */ []));
         this.previousFilterQueries = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "previousFilterQueries" }] : /* istanbul ignore next */ []));
         /** Gates query-filters until `initialFilters` are seeded (prevents empty emit wiping persisted filters). */
@@ -1795,6 +1787,10 @@ class AXPEntityMasterToolbarViewComponent {
         ...(ngDevMode ? [{ debugName: "isFiltersDirty" }] : /* istanbul ignore next */ []));
         this.showListDisplayModeControl = computed(() => this.vm.enabledListLayouts().length > 1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showListDisplayModeControl" }] : /* istanbul ignore next */ []));
+        this.showColumnsControl = computed(() => this.vm.activeListLayout() === 'table', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showColumnsControl" }] : /* istanbul ignore next */ []));
+        this.activeSortCount = computed(() => this.sortQueries().filter((sort) => sort.dir === 'asc' || sort.dir === 'desc').length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeSortCount" }] : /* istanbul ignore next */ []));
         this.listDisplayMode = computed(() => this.vm.listDisplayMode(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listDisplayMode" }] : /* istanbul ignore next */ []));
         this.hasTableListDisplayOption = computed(() => this.vm.enabledListLayouts().includes('table'), /* @ts-ignore */
@@ -1803,19 +1799,9 @@ class AXPEntityMasterToolbarViewComponent {
         ...(ngDevMode ? [{ debugName: "hasCardListDisplayOption" }] : /* istanbul ignore next */ []));
         this.hasRowListDisplayOption = computed(() => this.vm.enabledListLayouts().includes('row'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasRowListDisplayOption" }] : /* istanbul ignore next */ []));
-        this.listDisplayModeButtonIcon = computed(() => {
-            switch (this.listDisplayMode()) {
-                case 'table':
-                    return 'fa-light fa-table';
-                case 'row':
-                    return 'fa-light fa-grip-lines';
-                case 'card':
-                    return 'fa-light fa-grid-2';
-            }
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "listDisplayModeButtonIcon" }] : /* istanbul ignore next */ []));
-        this.listDisplayModePopover = viewChild('listDisplayModePopover', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "listDisplayModePopover" }] : /* istanbul ignore next */ []));
+        this.viewPopover = viewChild('viewPopover', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewPopover" }] : /* istanbul ignore next */ []));
+        //#endregion
         // Debounced apply to coalesce multiple UI changes (filters/sorts/columns)
         this.applyTimer = null;
         this.#effect = effect(() => {
@@ -1859,6 +1845,8 @@ class AXPEntityMasterToolbarViewComponent {
         ...(ngDevMode ? [{ debugName: "activeSortPresetName" }] : /* istanbul ignore next */ []));
         this.defaultSortQueries = computed(() => this.vm.view()?.sorts ?? [], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "defaultSortQueries" }] : /* istanbul ignore next */ []));
+        this.canResetSorts = computed(() => this.sortQuerySignature(this.sortQueries()) !== this.sortQuerySignature(this.defaultSortQueries()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canResetSorts" }] : /* istanbul ignore next */ []));
         this.sortDefinitions = computed(() => {
             const sortable = this.vm.sortableFields();
             const active = this.vm.sortedFields();
@@ -1928,8 +1916,20 @@ class AXPEntityMasterToolbarViewComponent {
         const filterTriggerMode = await this.settingsService.get(AXPCommonSettings.EntityFilterApplyMode);
         this.filterTriggerMode = (filterTriggerMode?.value ?? 'auto');
     }
-    toggleListTools() {
-        this.listToolsOpen.update((open) => !open);
+    //#region ----- View Menu -----
+    onViewMenuOpened() {
+        this.viewMenuOpen.set(true);
+        this.viewMenuPanel.set('root');
+    }
+    onViewMenuClosed() {
+        this.viewMenuOpen.set(false);
+        this.viewMenuPanel.set('root');
+    }
+    openViewColumnsPanel() {
+        this.viewMenuPanel.set('columns');
+    }
+    openViewSortPanel() {
+        this.viewMenuPanel.set('sort');
     }
     setListDisplayMode(mode) {
         traceEntityMasterList('toolbar', 'setListDisplayMode clicked', () => ({
@@ -1939,7 +1939,19 @@ class AXPEntityMasterToolbarViewComponent {
             previousDisplayMode: this.vm.listDisplayMode(),
         }));
         this.vm.setListDisplayMode(mode);
-        this.listDisplayModePopover()?.close();
+        this.viewPopover()?.close();
+    }
+    async resetViewColumns() {
+        await this.vm.resetColumns();
+        this.vm.onColumnsChanged(this.vm.columns());
+    }
+    async openListStylingFromViewMenu() {
+        this.viewPopover()?.close();
+        await this.openListStyling();
+    }
+    openCategoryFromViewMenu() {
+        this.viewPopover()?.close();
+        this.parent.toggleCategoryDrawer();
     }
     scheduleApply() {
         clearTimeout(this.applyTimer);
@@ -2110,6 +2122,12 @@ class AXPEntityMasterToolbarViewComponent {
         const sorts = (preset.sorts ?? []).filter((sort) => !!sort?.name && (sort.dir === 'asc' || sort.dir === 'desc'));
         this.onSortQueriesChange(sorts);
     }
+    resetSortsFromMenu() {
+        if (!this.canResetSorts()) {
+            return;
+        }
+        this.onSortQueriesChange(this.defaultSortQueries());
+    }
     onSortQueriesChange(e) {
         if (this.isInitializing || this.pendingInitialSorts) {
             this.pendingInitialSorts = false;
@@ -2161,7 +2179,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: "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-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 items-center border-b border-light w-full\"\n  [class.min-w-0]=\"deviceService.isSmall()\"\n  [class.gap-2]=\"!deviceService.isSmall()\"\n  [class.gap-1]=\"deviceService.isSmall()\"\n>\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  @if (filtersReady()) {\n    <axp-query-filters\n      id=\"axp-toolbar-filters\"\n      [class.min-w-0]=\"deviceService.isSmall()\"\n      [class.flex-1]=\"deviceService.isSmall() && !listToolsOpen()\"\n      [class.axp-toolbar-filters--hidden]=\"deviceService.isSmall() && listToolsOpen()\"\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=\"flex items-center\"\n    [class.shrink-0]=\"!deviceService.isSmall() || !listToolsOpen()\"\n    [class.min-w-0]=\"deviceService.isSmall() && listToolsOpen()\"\n    [class.flex-1]=\"deviceService.isSmall() && listToolsOpen()\"\n    [class.gap-2]=\"!deviceService.isSmall()\"\n    [class.gap-1]=\"deviceService.isSmall()\"\n  >\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    <!-- ----- 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    <div\n      class=\"axp-toolbar-list-tools\"\n      [class.hidden]=\"deviceService.isSmall()\"\n      [class.axp-toolbar-list-tools--open]=\"!deviceService.isSmall() || listToolsOpen()\"\n      [class.flex-1]=\"deviceService.isSmall() && listToolsOpen()\"\n    >\n      <div\n        class=\"axp-toolbar-list-tools__inner flex items-center\"\n        [class.gap-2]=\"!deviceService.isSmall() || listToolsOpen()\"\n        [class.gap-1]=\"deviceService.isSmall() && !listToolsOpen()\"\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=\"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.common.columns' | translate | async }}\n                </ax-header>\n                <div class=\"py-2 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=\"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        <ax-button\n          id=\"axp-toolbar-btn-styling\"\n          [iconOnly]=\"true\"\n          [title]=\"('@general:terms.interface.styling.title' | translate | async) ?? ''\"\n          [color]=\"'default'\"\n          (onClick)=\"openListStyling()\"\n        >\n          <i class=\"fa-light fa-palette\"></i>\n        </ax-button>\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=\"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      </div>\n    </div>\n    <!-- Sort presets now live as chips in the mobile filter row; keep the overflow toggle for later.\n    @if (deviceService.isSmall()) {\n      <ax-button\n        id=\"axp-toolbar-btn-list-tools-toggle\"\n        [iconOnly]=\"true\"\n        [look]=\"'blank'\"\n        [color]=\"'default'\"\n        [attr.aria-expanded]=\"listToolsOpen()\"\n        [title]=\"('@general:terms.interface.actions' | translate | async) ?? ''\"\n        (onClick)=\"toggleListTools()\"\n      >\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-button>\n    }\n    -->\n  </div>\n</div>\n", styles: ["@media(max-width:600px){.axp-entity-master-toolbar__row{box-sizing:border-box;min-height:3.25rem;padding-block:.5rem;padding-inline:.25rem}axp-query-filters.axp-toolbar-filters--hidden{display:none!important}axp-query-filters>.flex{padding-block:0}.axp-toolbar-list-tools{display:grid;grid-template-columns:0fr;transition:grid-template-columns .22s ease}.axp-toolbar-list-tools--open{grid-template-columns:1fr;min-width:0}.axp-toolbar-list-tools__inner{min-width:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .16s ease}.axp-toolbar-list-tools--open .axp-toolbar-list-tools__inner{opacity:1;pointer-events:auto}.axp-toolbar-list-tools__inner ax-button,.axp-toolbar-list-tools__inner ax-button button,#axp-toolbar-btn-list-tools-toggle,#axp-toolbar-btn-list-tools-toggle button{min-width:2.25rem;width:2.25rem;height:2.25rem;padding:0}.axp-toolbar-list-tools__inner ax-button button i,#axp-toolbar-btn-list-tools-toggle i{font-size:1rem}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3$1.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$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3$1.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: 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"], outputs: ["columnsChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "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$1.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$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3$1.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: 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: i3.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,
@@ -2178,11 +2196,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXPQueryColumnsComponent,
                     ], host: {
                         class: 'w-full',
-                    }, template: "<!-- <axp-entity-view-toolbar [viewModel]=\"vm\"></axp-entity-view-toolbar> -->\n<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 items-center border-b border-light w-full\"\n  [class.min-w-0]=\"deviceService.isSmall()\"\n  [class.gap-2]=\"!deviceService.isSmall()\"\n  [class.gap-1]=\"deviceService.isSmall()\"\n>\n  <!-- <axp-entity-filter-toolbar [viewModel]=\"vm\"></axp-entity-filter-toolbar> -->\n  @if (filtersReady()) {\n    <axp-query-filters\n      id=\"axp-toolbar-filters\"\n      [class.min-w-0]=\"deviceService.isSmall()\"\n      [class.flex-1]=\"deviceService.isSmall() && !listToolsOpen()\"\n      [class.axp-toolbar-filters--hidden]=\"deviceService.isSmall() && listToolsOpen()\"\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=\"flex items-center\"\n    [class.shrink-0]=\"!deviceService.isSmall() || !listToolsOpen()\"\n    [class.min-w-0]=\"deviceService.isSmall() && listToolsOpen()\"\n    [class.flex-1]=\"deviceService.isSmall() && listToolsOpen()\"\n    [class.gap-2]=\"!deviceService.isSmall()\"\n    [class.gap-1]=\"deviceService.isSmall()\"\n  >\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    <!-- ----- 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    <div\n      class=\"axp-toolbar-list-tools\"\n      [class.hidden]=\"deviceService.isSmall()\"\n      [class.axp-toolbar-list-tools--open]=\"!deviceService.isSmall() || listToolsOpen()\"\n      [class.flex-1]=\"deviceService.isSmall() && listToolsOpen()\"\n    >\n      <div\n        class=\"axp-toolbar-list-tools__inner flex items-center\"\n        [class.gap-2]=\"!deviceService.isSmall() || listToolsOpen()\"\n        [class.gap-1]=\"deviceService.isSmall() && !listToolsOpen()\"\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=\"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.common.columns' | translate | async }}\n                </ax-header>\n                <div class=\"py-2 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=\"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        <ax-button\n          id=\"axp-toolbar-btn-styling\"\n          [iconOnly]=\"true\"\n          [title]=\"('@general:terms.interface.styling.title' | translate | async) ?? ''\"\n          [color]=\"'default'\"\n          (onClick)=\"openListStyling()\"\n        >\n          <i class=\"fa-light fa-palette\"></i>\n        </ax-button>\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=\"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      </div>\n    </div>\n    <!-- Sort presets now live as chips in the mobile filter row; keep the overflow toggle for later.\n    @if (deviceService.isSmall()) {\n      <ax-button\n        id=\"axp-toolbar-btn-list-tools-toggle\"\n        [iconOnly]=\"true\"\n        [look]=\"'blank'\"\n        [color]=\"'default'\"\n        [attr.aria-expanded]=\"listToolsOpen()\"\n        [title]=\"('@general:terms.interface.actions' | translate | async) ?? ''\"\n        (onClick)=\"toggleListTools()\"\n      >\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-button>\n    }\n    -->\n  </div>\n</div>\n", styles: ["@media(max-width:600px){.axp-entity-master-toolbar__row{box-sizing:border-box;min-height:3.25rem;padding-block:.5rem;padding-inline:.25rem}axp-query-filters.axp-toolbar-filters--hidden{display:none!important}axp-query-filters>.flex{padding-block:0}.axp-toolbar-list-tools{display:grid;grid-template-columns:0fr;transition:grid-template-columns .22s ease}.axp-toolbar-list-tools--open{grid-template-columns:1fr;min-width:0}.axp-toolbar-list-tools__inner{min-width:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .16s ease}.axp-toolbar-list-tools--open .axp-toolbar-list-tools__inner{opacity:1;pointer-events:auto}.axp-toolbar-list-tools__inner ax-button,.axp-toolbar-list-tools__inner ax-button button,#axp-toolbar-btn-list-tools-toggle,#axp-toolbar-btn-list-tools-toggle button{min-width:2.25rem;width:2.25rem;height:2.25rem;padding:0}.axp-toolbar-list-tools__inner ax-button button i,#axp-toolbar-btn-list-tools-toggle i{font-size:1rem}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, 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"] }]
         }], propDecorators: { vm: [{
                 type: Input,
                 args: ['viewModel']
-            }], listDisplayModePopover: [{ type: i0.ViewChild, args: ['listDisplayModePopover', { isSignal: true }] }] } });
+            }], viewPopover: [{ type: i0.ViewChild, args: ['viewPopover', { isSignal: true }] }] } });
 
 class AXPEntityMasterListDataTableComponent {
     constructor() {
@@ -4683,12 +4701,12 @@ class AXPDefaultThemeModule {
                         viewers: {
                             root: () => Promise.resolve().then(function () { return rootLayout_component; }).then((c) => c.AXPRootLayoutComponent),
                             master: {
-                                single: () => import('./acorex-platform-framework-client-themes-default-entity-master-single-view.component-CHLsBvBE.mjs').then((c) => c.AXPEntityMasterSingleViewComponent),
+                                single: () => import('./acorex-platform-framework-client-themes-default-entity-master-single-view.component-CDzBgDt7.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-CT7WWWG0.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
+                                create: () => import('./acorex-platform-framework-client-themes-default-entity-master-create-view.component-Dh_hRxZX.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
                                 ///
-                                modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-DienTcPE.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
+                                modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-bC_uPN9l.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
                                 //
                                 list: () => Promise.resolve().then(function () { return entityMasterListView_component; }).then((c) => c.AXPEntityMasterListViewComponent),
                             },
@@ -4720,12 +4738,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                                     viewers: {
                                         root: () => Promise.resolve().then(function () { return rootLayout_component; }).then((c) => c.AXPRootLayoutComponent),
                                         master: {
-                                            single: () => import('./acorex-platform-framework-client-themes-default-entity-master-single-view.component-CHLsBvBE.mjs').then((c) => c.AXPEntityMasterSingleViewComponent),
+                                            single: () => import('./acorex-platform-framework-client-themes-default-entity-master-single-view.component-CDzBgDt7.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-CT7WWWG0.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
+                                            create: () => import('./acorex-platform-framework-client-themes-default-entity-master-create-view.component-Dh_hRxZX.mjs').then((c) => c.AXPEntityMasterCreateViewComponent),
                                             ///
-                                            modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-DienTcPE.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
+                                            modify: () => import('./acorex-platform-framework-client-themes-default-entity-master-modify-view.component-bC_uPN9l.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
                                             //
                                             list: () => Promise.resolve().then(function () { return entityMasterListView_component; }).then((c) => c.AXPEntityMasterListViewComponent),
                                         },