@masterteam/client-components 0.0.54 → 0.0.56

package/fesm2022/masterteam-client-components-client-list.mjs

@@ -20,6 +20,7 @@ import * as i3 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import { DashboardViewer } from '@masterteam/dashboard-builder';
 
+const DEFAULT_INCLUDE_STATE = ['escalation'];
 class ClientListApiService {
     http = inject(HttpClient);
     runtimeFetchBaseUrl = 'fetch/query';
@@ -29,6 +30,7 @@ class ClientListApiService {
             contextKey,
             projection: 'Table',
             surfaceKey: 'table',
+            includeState: [...DEFAULT_INCLUDE_STATE],
             propertyKeys: propertyKeys?.length ? propertyKeys : undefined,
             filters: this.mergeFilters(this.buildInstanceFilters(instanceId), filters),
             page: this.toPage(query.skip, query.take),
@@ -39,6 +41,7 @@ class ClientListApiService {
         return this.queryRuntime({
             contextKey,
             projection: 'Card',
+            includeState: [...DEFAULT_INCLUDE_STATE],
             filters: this.mergeFilters(instanceId != null ? this.buildInstanceFilters(instanceId) : undefined, filters),
             display: { areas: ['card'] },
         });
@@ -108,6 +111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+const CLIENT_LIST_RECORD_STATE_KEY = '__clientListRecordState';
+
 const UNSORTABLE_ENTITY_VIEW_TYPES = new Set([
     'Attachment',
     'Checkbox',
@@ -149,6 +154,22 @@ class ClientListStateService {
             },
         });
     }
+    setTablePaging(key, skip, take) {
+        const target = this.itemsByKey()[key];
+        if (!target ||
+            target.type === 'informative' ||
+            target.areaType !== 'table') {
+            return;
+        }
+        this.itemsByKey.set({
+            ...this.itemsByKey(),
+            [key]: {
+                ...target,
+                skip,
+                take,
+            },
+        });
+    }
     setRowsResult(key, response, config, skip, take) {
         const target = this.itemsByKey()[key];
         if (!target ||
@@ -172,7 +193,10 @@ class ClientListStateService {
         }));
         const propertyMaps = this.createPropertyMaps(response.catalog?.properties ?? []);
         const rows = (response.records ?? []).map((record) => {
-            const row = { Id: record.id };
+            const row = {
+                Id: record.id,
+                [CLIENT_LIST_RECORD_STATE_KEY]: record.state ?? null,
+            };
             columns.forEach((column) => {
                 const property = this.resolvePropertyMeta(column.key, propertyMaps);
                 row[column.key] = this.toEntityData(column.key, record.values?.[property?.key ?? column.key], property, column.viewType, column.label, column.configuration, property?.configuration, record.id, column.order ?? property?.order);
@@ -284,6 +308,8 @@ class ClientListStateService {
             existing.areaType !== item.areaType) {
             return item;
         }
+        const keepPaging = existing.config.isPaginated === item.config.isPaginated &&
+            existing.take === item.take;
         return {
             ...item,
             loading: existing.loading,
@@ -294,8 +320,8 @@ class ClientListStateService {
             columns: existing.columns,
             rows: existing.rows,
             cards: existing.cards,
-            skip: existing.skip,
-            take: existing.take,
+            skip: keepPaging ? existing.skip : item.skip,
+            take: item.take,
             expanded: existing.expanded,
             dashboardData: existing.dashboardData,
             rawData: existing.rawData,
@@ -329,6 +355,7 @@ class ClientListStateService {
                     }
                     : undefined,
                 instanceId: record.id,
+                state: record.state ?? null,
                 properties: normalizedEntities,
                 entities: normalizedEntities,
             };
@@ -718,6 +745,10 @@ class ClientListTableView {
      * so switching area types preserves the toolbar state.
      */
     bucket = computed(() => this.toolbar.forList(this.state().key), ...(ngDevMode ? [{ debugName: "bucket" }] : /* istanbul ignore next */ []));
+    pageSize = computed(() => {
+        const table = this.table();
+        return table.config.isPaginated ? table.take : table.config.table.pageSize;
+    }, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     /**
      * Stable, per-instance storage key. Excludes `areaType` so table and cards
      * views for the same logical list share persistence (matches the toolbar
@@ -755,11 +786,11 @@ class ClientListTableView {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListTableView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListTableView, isStandalone: true, selector: "mt-client-list-table-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, actionShape: { classPropertyName: "actionShape", publicName: "actionShape", isSignal: true, isRequired: false, transformFunction: null }, rowActionsLoadingFn: { classPropertyName: "rowActionsLoadingFn", publicName: "rowActionsLoadingFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", rowClick: "rowClick", rowActionsRequested: "rowActionsRequested" }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (table().config.contentStart) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\r\n    @if (table().loading && table().rows.length === 0) {\r\n      <div class=\"flex flex-col gap-3 py-3\">\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n      </div>\r\n    } @else if (table().error) {\r\n      <div\r\n        class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n      >\r\n        {{ table().error }}\r\n      </div>\r\n    } @else {\r\n      <mt-table\r\n        [noCard]=\"true\"\r\n        [data]=\"table().rows\"\r\n        [columns]=\"table().columns\"\r\n        dataKey=\"Id\"\r\n        [storageKey]=\"tableStorageKey()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [actionShape]=\"actionShape()\"\r\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\r\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\r\n        [generalSearch]=\"table().config.table.searchable\"\r\n        [showFilters]=\"true\"\r\n        filterMode=\"column\"\r\n        [printable]=\"true\"\r\n        [groupable]=\"true\"\r\n        [cellClickFilter]=\"true\"\r\n        [freezeActions]=\"true\"\r\n        [exportable]=\"table().config.table.exportable\"\r\n        [loading]=\"table().loading\"\r\n        [clickableRows]=\"true\"\r\n        [lazy]=\"table().config.isPaginated\"\r\n        [lazyTotalRecords]=\"table().totalCount\"\r\n        [virtualScroll]=\"true\"\r\n        [virtualScrollItemSize]=\"56\"\r\n        scrollHeight=\"520px\"\r\n        [pageSize]=\"table().config.table.pageSize\"\r\n        [filters]=\"bucket().filters()\"\r\n        (filtersChange)=\"bucket().filters.set($event)\"\r\n        [filterTerm]=\"bucket().filterTerm()\"\r\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n        [groupBy]=\"bucket().groupBy()\"\r\n        (groupByChange)=\"bucket().groupBy.set($event)\"\r\n        [activeTab]=\"bucket().activeTab()\"\r\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n        (lazyLoad)=\"lazyLoad.emit($event)\"\r\n        (rowClick)=\"rowClick.emit($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListTableView, isStandalone: true, selector: "mt-client-list-table-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, actionShape: { classPropertyName: "actionShape", publicName: "actionShape", isSignal: true, isRequired: false, transformFunction: null }, rowActionsLoadingFn: { classPropertyName: "rowActionsLoadingFn", publicName: "rowActionsLoadingFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", rowClick: "rowClick", rowActionsRequested: "rowActionsRequested" }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (table().config.contentStart) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\r\n    @if (table().loading && table().rows.length === 0) {\r\n      <div class=\"flex flex-col gap-3 py-3\">\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n      </div>\r\n    } @else if (table().error) {\r\n      <div\r\n        class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n      >\r\n        {{ table().error }}\r\n      </div>\r\n    } @else {\r\n      <mt-table\r\n        [noCard]=\"true\"\r\n        [data]=\"table().rows\"\r\n        [columns]=\"table().columns\"\r\n        dataKey=\"Id\"\r\n        [storageKey]=\"tableStorageKey()\"\r\n        [persistStateExclude]=\"table().config.table.persistStateExclude\"\r\n        [rowActions]=\"rowActions()\"\r\n        [actionShape]=\"actionShape()\"\r\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\r\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\r\n        [generalSearch]=\"table().config.table.searchable\"\r\n        [showFilters]=\"true\"\r\n        filterMode=\"column\"\r\n        [printable]=\"true\"\r\n        [groupable]=\"true\"\r\n        [cellClickFilter]=\"true\"\r\n        [freezeActions]=\"true\"\r\n        [exportable]=\"table().config.table.exportable\"\r\n        [loading]=\"table().loading\"\r\n        [clickableRows]=\"true\"\r\n        [lazy]=\"table().config.isPaginated\"\r\n        [lazyTotalRecords]=\"table().totalCount\"\r\n        [virtualScroll]=\"!table().config.isPaginated\"\r\n        [virtualScrollItemSize]=\"56\"\r\n        scrollHeight=\"520px\"\r\n        [pageSize]=\"pageSize()\"\r\n        [filters]=\"bucket().filters()\"\r\n        (filtersChange)=\"bucket().filters.set($event)\"\r\n        [filterTerm]=\"bucket().filterTerm()\"\r\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n        [groupBy]=\"bucket().groupBy()\"\r\n        (groupByChange)=\"bucket().groupBy.set($event)\"\r\n        [activeTab]=\"bucket().activeTab()\"\r\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n        (lazyLoad)=\"lazyLoad.emit($event)\"\r\n        (rowClick)=\"rowClick.emit($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListTableView, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-client-list-table-view', standalone: true, imports: [CommonModule, Table, SkeletonModule], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (table().config.contentStart) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\r\n    @if (table().loading && table().rows.length === 0) {\r\n      <div class=\"flex flex-col gap-3 py-3\">\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n      </div>\r\n    } @else if (table().error) {\r\n      <div\r\n        class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n      >\r\n        {{ table().error }}\r\n      </div>\r\n    } @else {\r\n      <mt-table\r\n        [noCard]=\"true\"\r\n        [data]=\"table().rows\"\r\n        [columns]=\"table().columns\"\r\n        dataKey=\"Id\"\r\n        [storageKey]=\"tableStorageKey()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [actionShape]=\"actionShape()\"\r\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\r\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\r\n        [generalSearch]=\"table().config.table.searchable\"\r\n        [showFilters]=\"true\"\r\n        filterMode=\"column\"\r\n        [printable]=\"true\"\r\n        [groupable]=\"true\"\r\n        [cellClickFilter]=\"true\"\r\n        [freezeActions]=\"true\"\r\n        [exportable]=\"table().config.table.exportable\"\r\n        [loading]=\"table().loading\"\r\n        [clickableRows]=\"true\"\r\n        [lazy]=\"table().config.isPaginated\"\r\n        [lazyTotalRecords]=\"table().totalCount\"\r\n        [virtualScroll]=\"true\"\r\n        [virtualScrollItemSize]=\"56\"\r\n        scrollHeight=\"520px\"\r\n        [pageSize]=\"table().config.table.pageSize\"\r\n        [filters]=\"bucket().filters()\"\r\n        (filtersChange)=\"bucket().filters.set($event)\"\r\n        [filterTerm]=\"bucket().filterTerm()\"\r\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n        [groupBy]=\"bucket().groupBy()\"\r\n        (groupByChange)=\"bucket().groupBy.set($event)\"\r\n        [activeTab]=\"bucket().activeTab()\"\r\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n        (lazyLoad)=\"lazyLoad.emit($event)\"\r\n        (rowClick)=\"rowClick.emit($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-client-list-table-view', standalone: true, imports: [CommonModule, Table, SkeletonModule], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (table().config.contentStart) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\r\n    @if (table().loading && table().rows.length === 0) {\r\n      <div class=\"flex flex-col gap-3 py-3\">\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n      </div>\r\n    } @else if (table().error) {\r\n      <div\r\n        class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n      >\r\n        {{ table().error }}\r\n      </div>\r\n    } @else {\r\n      <mt-table\r\n        [noCard]=\"true\"\r\n        [data]=\"table().rows\"\r\n        [columns]=\"table().columns\"\r\n        dataKey=\"Id\"\r\n        [storageKey]=\"tableStorageKey()\"\r\n        [persistStateExclude]=\"table().config.table.persistStateExclude\"\r\n        [rowActions]=\"rowActions()\"\r\n        [actionShape]=\"actionShape()\"\r\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\r\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\r\n        [generalSearch]=\"table().config.table.searchable\"\r\n        [showFilters]=\"true\"\r\n        filterMode=\"column\"\r\n        [printable]=\"true\"\r\n        [groupable]=\"true\"\r\n        [cellClickFilter]=\"true\"\r\n        [freezeActions]=\"true\"\r\n        [exportable]=\"table().config.table.exportable\"\r\n        [loading]=\"table().loading\"\r\n        [clickableRows]=\"true\"\r\n        [lazy]=\"table().config.isPaginated\"\r\n        [lazyTotalRecords]=\"table().totalCount\"\r\n        [virtualScroll]=\"!table().config.isPaginated\"\r\n        [virtualScrollItemSize]=\"56\"\r\n        scrollHeight=\"520px\"\r\n        [pageSize]=\"pageSize()\"\r\n        [filters]=\"bucket().filters()\"\r\n        (filtersChange)=\"bucket().filters.set($event)\"\r\n        [filterTerm]=\"bucket().filterTerm()\"\r\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n        [groupBy]=\"bucket().groupBy()\"\r\n        (groupByChange)=\"bucket().groupBy.set($event)\"\r\n        [activeTab]=\"bucket().activeTab()\"\r\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n        (lazyLoad)=\"lazyLoad.emit($event)\"\r\n        (rowClick)=\"rowClick.emit($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], actionShape: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionShape", required: false }] }], rowActionsLoadingFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionsLoadingFn", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowActionsRequested: [{ type: i0.Output, args: ["rowActionsRequested"] }] } });
 
 const EMPTY_KEY_SET = new Set();
@@ -821,8 +852,12 @@ class ClientListCardsView {
     cardToRow(card) {
         const fromDisplay = card.displayProperties;
         const record = fromDisplay && Object.keys(fromDisplay).length > 0
-            ? { Id: card.id, ...fromDisplay }
-            : { Id: card.id };
+            ? {
+                Id: card.id,
+                ...fromDisplay,
+                [CLIENT_LIST_RECORD_STATE_KEY]: card.state ?? null,
+            }
+            : { Id: card.id, [CLIENT_LIST_RECORD_STATE_KEY]: card.state ?? null };
         for (const entity of card.entities ?? []) {
             const e = entity;
             const key = (typeof e['key'] === 'string' && e['key']) ||
@@ -858,6 +893,29 @@ class ClientListCardsView {
         const row = this.rowForCard(card);
         return this.rowActions().filter((action) => !action.hidden?.(row));
     }
+    inlineActionsForCard(card) {
+        return this.visibleActionsForCard(card).filter((action) => this.actionPlacement(action) === 'inline');
+    }
+    menuActionsForCard(card) {
+        return this.visibleActionsForCard(card).filter((action) => this.actionPlacement(action) !== 'inline');
+    }
+    showCardActionsMenu(card) {
+        return (this.isCardActionsLoading(card) ||
+            this.menuActionsForCard(card).length > 0);
+    }
+    resolveActionLoading(action, card) {
+        const loading = action.loading;
+        if (typeof loading === 'function') {
+            return loading(this.rowForCard(card));
+        }
+        return typeof loading === 'boolean' ? loading : undefined;
+    }
+    actionSize(action) {
+        return action.size;
+    }
+    actionPlacement(action) {
+        return action.placement;
+    }
     isCardActionsLoading(card) {
         return this.rowActionsLoadingFn()?.(this.rowForCard(card)) ?? false;
     }
@@ -1169,7 +1227,7 @@ class ClientListCardsView {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListCardsView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListCardsView, isStandalone: true, selector: "mt-client-list-cards-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, rowActionsLoadingFn: { classPropertyName: "rowActionsLoadingFn", publicName: "rowActionsLoadingFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", cardClick: "cardClick", rowActionsRequested: "rowActionsRequested" }, providers: [MTDateFormatPipe], ngImport: i0, template: "<mt-table-caption\r\n  [generalSearch]=\"true\"\r\n  [showFilters]=\"true\"\r\n  filterMode=\"popover\"\r\n  [printable]=\"true\"\r\n  [groupable]=\"true\"\r\n  [exportable]=\"true\"\r\n  [columns]=\"columns()\"\r\n  [data]=\"rowRepresentations()\"\r\n  [groupColumns]=\"grouping.groupableColumns()\"\r\n  [filters]=\"bucket().filters()\"\r\n  (filtersChange)=\"bucket().filters.set($event)\"\r\n  [filterTerm]=\"bucket().filterTerm()\"\r\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n  [groupBy]=\"bucket().groupBy()\"\r\n  (groupByChange)=\"bucket().groupBy.set($event)\"\r\n  [activeTab]=\"bucket().activeTab()\"\r\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n  (exportRequested)=\"exportExcel()\"\r\n  (printRequested)=\"printPdf()\"\r\n/>\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (visibleCards().length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n          @for (card of group.cards; track card.id) {\r\n            <mt-card\r\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n              (click)=\"cardClick.emit(card)\"\r\n            >\r\n              <ng-template #headless>\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n                />\r\n                <mt-entities-preview\r\n                  [entities]=\"card.entities\"\r\n                  attachmentShape=\"compact\"\r\n                  [stackOnNarrow]=\"false\"\r\n                  [clickableKeys]=\"clickableEntityKeys()\"\r\n                  [activeKeys]=\"activeKeysForCard(card)\"\r\n                  [clickableTooltip]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of visibleCards(); track card.id) {\r\n      @defer (on viewport) {\r\n        <mt-card\r\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n          (click)=\"cardClick.emit(card)\"\r\n        >\r\n          <ng-template #headless>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"cardActionsMenu\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n            />\r\n            <mt-entities-preview\r\n              [entities]=\"card.entities\"\r\n              attachmentShape=\"compact\"\r\n              [stackOnNarrow]=\"false\"\r\n              [clickableKeys]=\"clickableEntityKeys()\"\r\n              [activeKeys]=\"activeKeysForCard(card)\"\r\n              [clickableTooltip]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  Per-card 3-dots actions menu \u2014 same contract as the table view's popover\r\n  row-actions. Rendered into each card's top-end corner; clicks stop at the\r\n  wrapper so the card's own click (cardClick) doesn't fire.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @if (rowActions().length > 0) {\r\n    <div class=\"absolute end-2 top-2 z-10\" (click)=\"$event.stopPropagation()\">\r\n      <mt-button\r\n        icon=\"general.dots-vertical\"\r\n        severity=\"secondary\"\r\n        variant=\"text\"\r\n        [tooltip]=\"'components.table.actions' | transloco\"\r\n        (onClick)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n      />\r\n      <p-popover #cardPopover appendTo=\"body\">\r\n        <div class=\"flex min-w-44 flex-col gap-1 p-1\">\r\n          @if (isCardActionsLoading(card)) {\r\n            <div class=\"flex flex-col gap-2 p-1\">\r\n              <p-skeleton height=\"1.75rem\" />\r\n              <p-skeleton height=\"1.75rem\" />\r\n              <p-skeleton height=\"1.75rem\" />\r\n            </div>\r\n          } @else {\r\n            @for (action of visibleActionsForCard(card); track $index) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\r\n                [class]=\"\r\n                  action.color === 'danger'\r\n                    ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\r\n                    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\r\n                \"\r\n                (click)=\"\r\n                  runCardAction($event, action, card); cardPopover.hide()\r\n                \"\r\n              >\r\n                @if (action.icon) {\r\n                  <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\r\n                }\r\n                <span>{{ action.label || action.tooltip }}</span>\r\n              </button>\r\n            }\r\n          }\r\n        </div>\r\n      </p-popover>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "stackOnNarrow", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TableCaption, selector: "mt-table-caption", inputs: ["generalSearch", "showFilters", "filterMode", "exportable", "printable", "groupable", "columns", "data", "groupColumns", "tabs", "tabsOptionLabel", "tabsOptionValue", "actions", "captionStart", "captionEnd", "activeTab", "filters", "filterTerm", "groupBy"], outputs: ["activeTabChange", "filtersChange", "filterTermChange", "groupByChange", "exportRequested", "printRequested", "onTabChange", "searchChange", "filterApplied", "filterReset"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet, Card,
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListCardsView, isStandalone: true, selector: "mt-client-list-cards-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, rowActionsLoadingFn: { classPropertyName: "rowActionsLoadingFn", publicName: "rowActionsLoadingFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", cardClick: "cardClick", rowActionsRequested: "rowActionsRequested" }, providers: [MTDateFormatPipe], ngImport: i0, template: "<mt-table-caption\r\n  [generalSearch]=\"true\"\r\n  [showFilters]=\"true\"\r\n  filterMode=\"popover\"\r\n  [printable]=\"true\"\r\n  [groupable]=\"true\"\r\n  [exportable]=\"true\"\r\n  [columns]=\"columns()\"\r\n  [data]=\"rowRepresentations()\"\r\n  [groupColumns]=\"grouping.groupableColumns()\"\r\n  [filters]=\"bucket().filters()\"\r\n  (filtersChange)=\"bucket().filters.set($event)\"\r\n  [filterTerm]=\"bucket().filterTerm()\"\r\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n  [groupBy]=\"bucket().groupBy()\"\r\n  (groupByChange)=\"bucket().groupBy.set($event)\"\r\n  [activeTab]=\"bucket().activeTab()\"\r\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n  (exportRequested)=\"exportExcel()\"\r\n  (printRequested)=\"printPdf()\"\r\n/>\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (visibleCards().length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n          @for (card of group.cards; track card.id) {\r\n            <mt-card\r\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n              (click)=\"cardClick.emit(card)\"\r\n            >\r\n              <ng-template #headless>\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n                />\r\n                <mt-entities-preview\r\n                  [entities]=\"card.entities\"\r\n                  attachmentShape=\"compact\"\r\n                  [stackOnNarrow]=\"false\"\r\n                  [clickableKeys]=\"clickableEntityKeys()\"\r\n                  [activeKeys]=\"activeKeysForCard(card)\"\r\n                  [clickableTooltip]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of visibleCards(); track card.id) {\r\n      @defer (on viewport) {\r\n        <mt-card\r\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n          (click)=\"cardClick.emit(card)\"\r\n        >\r\n          <ng-template #headless>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"cardActionsMenu\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n            />\r\n            <mt-entities-preview\r\n              [entities]=\"card.entities\"\r\n              attachmentShape=\"compact\"\r\n              [stackOnNarrow]=\"false\"\r\n              [clickableKeys]=\"clickableEntityKeys()\"\r\n              [activeKeys]=\"activeKeysForCard(card)\"\r\n              [clickableTooltip]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  Per-card 3-dots actions menu \u2014 same contract as the table view's popover\r\n  row-actions. Rendered into each card's top-end corner; clicks stop at the\r\n  wrapper so the card's own click (cardClick) doesn't fire.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @if (rowActions().length > 0) {\r\n    <div\r\n      class=\"absolute end-2 top-2 z-10 flex items-center gap-1\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @for (action of inlineActionsForCard(card); track $index) {\r\n        <mt-button\r\n          [icon]=\"action.icon\"\r\n          [severity]=\"action.color\"\r\n          [variant]=\"action.variant\"\r\n          [size]=\"actionSize(action) || 'small'\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [label]=\"action.label\"\r\n          [loading]=\"resolveActionLoading(action, card)\"\r\n          (onClick)=\"runCardAction($event, action, card)\"\r\n        />\r\n      }\r\n      @if (showCardActionsMenu(card)) {\r\n        <mt-button\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"text\"\r\n          [tooltip]=\"'components.table.actions' | transloco\"\r\n          (onClick)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n        />\r\n        <p-popover #cardPopover appendTo=\"body\">\r\n          <div class=\"flex min-w-44 flex-col gap-1 p-1\">\r\n            @if (isCardActionsLoading(card)) {\r\n              <div class=\"flex flex-col gap-2 p-1\">\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n              </div>\r\n            } @else {\r\n              @for (action of menuActionsForCard(card); track $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\r\n                  [class]=\"\r\n                    action.color === 'danger'\r\n                      ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\r\n                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\r\n                  \"\r\n                  (click)=\"\r\n                    runCardAction($event, action, card); cardPopover.hide()\r\n                  \"\r\n                >\r\n                  @if (action.icon) {\r\n                    <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\r\n                  }\r\n                  <span>{{ action.label || action.tooltip }}</span>\r\n                </button>\r\n              }\r\n            }\r\n          </div>\r\n        </p-popover>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "stackOnNarrow", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TableCaption, selector: "mt-table-caption", inputs: ["generalSearch", "showFilters", "filterMode", "exportable", "printable", "groupable", "columns", "data", "groupColumns", "tabs", "tabsOptionLabel", "tabsOptionValue", "actions", "captionStart", "captionEnd", "activeTab", "filters", "filterTerm", "groupBy"], outputs: ["activeTabChange", "filtersChange", "filterTermChange", "groupByChange", "exportRequested", "printRequested", "onTabChange", "searchChange", "filterApplied", "filterReset"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet, Card,
                 EntitiesPreview, i4.TranslocoPipe]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListCardsView, decorators: [{
@@ -1184,7 +1242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SkeletonModule,
                         PopoverModule,
                         TableCaption,
-                    ], providers: [MTDateFormatPipe], template: "<mt-table-caption\r\n  [generalSearch]=\"true\"\r\n  [showFilters]=\"true\"\r\n  filterMode=\"popover\"\r\n  [printable]=\"true\"\r\n  [groupable]=\"true\"\r\n  [exportable]=\"true\"\r\n  [columns]=\"columns()\"\r\n  [data]=\"rowRepresentations()\"\r\n  [groupColumns]=\"grouping.groupableColumns()\"\r\n  [filters]=\"bucket().filters()\"\r\n  (filtersChange)=\"bucket().filters.set($event)\"\r\n  [filterTerm]=\"bucket().filterTerm()\"\r\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n  [groupBy]=\"bucket().groupBy()\"\r\n  (groupByChange)=\"bucket().groupBy.set($event)\"\r\n  [activeTab]=\"bucket().activeTab()\"\r\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n  (exportRequested)=\"exportExcel()\"\r\n  (printRequested)=\"printPdf()\"\r\n/>\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (visibleCards().length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n          @for (card of group.cards; track card.id) {\r\n            <mt-card\r\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n              (click)=\"cardClick.emit(card)\"\r\n            >\r\n              <ng-template #headless>\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n                />\r\n                <mt-entities-preview\r\n                  [entities]=\"card.entities\"\r\n                  attachmentShape=\"compact\"\r\n                  [stackOnNarrow]=\"false\"\r\n                  [clickableKeys]=\"clickableEntityKeys()\"\r\n                  [activeKeys]=\"activeKeysForCard(card)\"\r\n                  [clickableTooltip]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of visibleCards(); track card.id) {\r\n      @defer (on viewport) {\r\n        <mt-card\r\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n          (click)=\"cardClick.emit(card)\"\r\n        >\r\n          <ng-template #headless>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"cardActionsMenu\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n            />\r\n            <mt-entities-preview\r\n              [entities]=\"card.entities\"\r\n              attachmentShape=\"compact\"\r\n              [stackOnNarrow]=\"false\"\r\n              [clickableKeys]=\"clickableEntityKeys()\"\r\n              [activeKeys]=\"activeKeysForCard(card)\"\r\n              [clickableTooltip]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  Per-card 3-dots actions menu \u2014 same contract as the table view's popover\r\n  row-actions. Rendered into each card's top-end corner; clicks stop at the\r\n  wrapper so the card's own click (cardClick) doesn't fire.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @if (rowActions().length > 0) {\r\n    <div class=\"absolute end-2 top-2 z-10\" (click)=\"$event.stopPropagation()\">\r\n      <mt-button\r\n        icon=\"general.dots-vertical\"\r\n        severity=\"secondary\"\r\n        variant=\"text\"\r\n        [tooltip]=\"'components.table.actions' | transloco\"\r\n        (onClick)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n      />\r\n      <p-popover #cardPopover appendTo=\"body\">\r\n        <div class=\"flex min-w-44 flex-col gap-1 p-1\">\r\n          @if (isCardActionsLoading(card)) {\r\n            <div class=\"flex flex-col gap-2 p-1\">\r\n              <p-skeleton height=\"1.75rem\" />\r\n              <p-skeleton height=\"1.75rem\" />\r\n              <p-skeleton height=\"1.75rem\" />\r\n            </div>\r\n          } @else {\r\n            @for (action of visibleActionsForCard(card); track $index) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\r\n                [class]=\"\r\n                  action.color === 'danger'\r\n                    ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\r\n                    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\r\n                \"\r\n                (click)=\"\r\n                  runCardAction($event, action, card); cardPopover.hide()\r\n                \"\r\n              >\r\n                @if (action.icon) {\r\n                  <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\r\n                }\r\n                <span>{{ action.label || action.tooltip }}</span>\r\n              </button>\r\n            }\r\n          }\r\n        </div>\r\n      </p-popover>\r\n    </div>\r\n  }\r\n</ng-template>\r\n" }]
+                    ], providers: [MTDateFormatPipe], template: "<mt-table-caption\r\n  [generalSearch]=\"true\"\r\n  [showFilters]=\"true\"\r\n  filterMode=\"popover\"\r\n  [printable]=\"true\"\r\n  [groupable]=\"true\"\r\n  [exportable]=\"true\"\r\n  [columns]=\"columns()\"\r\n  [data]=\"rowRepresentations()\"\r\n  [groupColumns]=\"grouping.groupableColumns()\"\r\n  [filters]=\"bucket().filters()\"\r\n  (filtersChange)=\"bucket().filters.set($event)\"\r\n  [filterTerm]=\"bucket().filterTerm()\"\r\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n  [groupBy]=\"bucket().groupBy()\"\r\n  (groupByChange)=\"bucket().groupBy.set($event)\"\r\n  [activeTab]=\"bucket().activeTab()\"\r\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n  (exportRequested)=\"exportExcel()\"\r\n  (printRequested)=\"printPdf()\"\r\n/>\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (visibleCards().length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n          @for (card of group.cards; track card.id) {\r\n            <mt-card\r\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n              (click)=\"cardClick.emit(card)\"\r\n            >\r\n              <ng-template #headless>\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n                />\r\n                <mt-entities-preview\r\n                  [entities]=\"card.entities\"\r\n                  attachmentShape=\"compact\"\r\n                  [stackOnNarrow]=\"false\"\r\n                  [clickableKeys]=\"clickableEntityKeys()\"\r\n                  [activeKeys]=\"activeKeysForCard(card)\"\r\n                  [clickableTooltip]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of visibleCards(); track card.id) {\r\n      @defer (on viewport) {\r\n        <mt-card\r\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n          (click)=\"cardClick.emit(card)\"\r\n        >\r\n          <ng-template #headless>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"cardActionsMenu\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n            />\r\n            <mt-entities-preview\r\n              [entities]=\"card.entities\"\r\n              attachmentShape=\"compact\"\r\n              [stackOnNarrow]=\"false\"\r\n              [clickableKeys]=\"clickableEntityKeys()\"\r\n              [activeKeys]=\"activeKeysForCard(card)\"\r\n              [clickableTooltip]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  Per-card 3-dots actions menu \u2014 same contract as the table view's popover\r\n  row-actions. Rendered into each card's top-end corner; clicks stop at the\r\n  wrapper so the card's own click (cardClick) doesn't fire.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @if (rowActions().length > 0) {\r\n    <div\r\n      class=\"absolute end-2 top-2 z-10 flex items-center gap-1\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @for (action of inlineActionsForCard(card); track $index) {\r\n        <mt-button\r\n          [icon]=\"action.icon\"\r\n          [severity]=\"action.color\"\r\n          [variant]=\"action.variant\"\r\n          [size]=\"actionSize(action) || 'small'\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [label]=\"action.label\"\r\n          [loading]=\"resolveActionLoading(action, card)\"\r\n          (onClick)=\"runCardAction($event, action, card)\"\r\n        />\r\n      }\r\n      @if (showCardActionsMenu(card)) {\r\n        <mt-button\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"text\"\r\n          [tooltip]=\"'components.table.actions' | transloco\"\r\n          (onClick)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n        />\r\n        <p-popover #cardPopover appendTo=\"body\">\r\n          <div class=\"flex min-w-44 flex-col gap-1 p-1\">\r\n            @if (isCardActionsLoading(card)) {\r\n              <div class=\"flex flex-col gap-2 p-1\">\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n              </div>\r\n            } @else {\r\n              @for (action of menuActionsForCard(card); track $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\r\n                  [class]=\"\r\n                    action.color === 'danger'\r\n                      ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\r\n                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\r\n                  \"\r\n                  (click)=\"\r\n                    runCardAction($event, action, card); cardPopover.hide()\r\n                  \"\r\n                >\r\n                  @if (action.icon) {\r\n                    <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\r\n                  }\r\n                  <span>{{ action.label || action.tooltip }}</span>\r\n                </button>\r\n              }\r\n            }\r\n          </div>\r\n        </p-popover>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], rowActionsLoadingFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionsLoadingFn", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], rowActionsRequested: [{ type: i0.Output, args: ["rowActionsRequested"] }] } });
 
 const DEFAULT_GRID_COLUMNS$1 = 12;
@@ -1232,11 +1290,16 @@ const DEFAULT_MODE = 'auto';
 const DEFAULT_TYPE = 'form';
 const DEFAULT_SERVER_PAGE_SIZE = 100;
 const DEFAULT_TABLE_PAGE_SIZE = 100;
-const LOCAL_PAGE_SIZE_SOURCE = 3000;
+const DEFAULT_TABLE_PERSIST_STATE_EXCLUDE = [
+    'pagePosition',
+];
 const DEFAULT_COLLAPSE_ICON = 'arrow.chevron-up';
 const DEFAULT_EXPAND_ICON = 'arrow.chevron-down';
 const DEFAULT_SIDE_CONTENT_SPAN = 3;
 const DEFAULT_GRID_COLUMNS = 12;
+const ESCALATION_STATE_KEY = 'escalation';
+const VIEW_ESCALATION_ACTION_KEY = 'viewEscalation';
+const VIEW_ESCALATION_OPERATION_KEY = 'ViewEscalation';
 class ClientList {
     api = inject(ClientListApiService);
     state = inject(ClientListStateService);
@@ -1271,8 +1334,9 @@ class ClientList {
             !item.config.isPaginated) {
             return;
         }
-        const take = Number(event.pageSize ?? item.take);
-        const skip = Number(event.first ?? 0);
+        const take = this.resolvePositiveInteger(event.pageSize) ?? item.take;
+        const skip = this.resolveNonNegativeInteger(event.first) ?? 0;
+        this.state.setTablePaging(item.key, skip, take);
         this.loadTable(item.key, item.config, skip, take);
     }
     reload(itemKey) {
@@ -1376,8 +1440,14 @@ class ClientList {
     computeMergedRowActions(item, cache) {
         const baseActions = item.config.rowActions ?? [];
         const config = item.config.runtimeRecordActions;
+        const escalationAction = config?.enabled && this.hasActiveEscalation(item)
+            ? this.createEscalationPreviewRowAction(item, config)
+            : null;
+        const baseWithEscalation = escalationAction
+            ? [escalationAction, ...baseActions]
+            : baseActions;
         if (!config?.enabled)
-            return baseActions;
+            return baseWithEscalation;
         const prefix = `${item.key}:`;
         const prototypes = new Map();
         for (const [key, actions] of cache) {
@@ -1390,11 +1460,14 @@ class ClientList {
             }
         }
         if (prototypes.size === 0) {
-            return baseActions;
+            return baseWithEscalation;
         }
         const icon = config.actionIcon ?? 'media.play-circle';
         const runtimeActionEntries = [];
         for (const [actionKey, prototype] of prototypes) {
+            if (this.isViewEscalationAction(prototype)) {
+                continue;
+            }
             const label = resolveActionLabel(prototype);
             const presentation = config.resolveActionPresentation?.(prototype) ?? {};
             runtimeActionEntries.push({
@@ -1423,7 +1496,97 @@ class ClientList {
                 },
             });
         }
-        return [...baseActions, ...runtimeActionEntries];
+        return [...baseWithEscalation, ...runtimeActionEntries];
+    }
+    createEscalationPreviewRowAction(item, config) {
+        const label = this.transloco.translate('components.clientComponents.list.viewEscalation');
+        const action = {
+            icon: 'editor.hand',
+            color: 'warn',
+            variant: 'text',
+            placement: 'inline',
+            tooltip: label,
+            hidden: (row) => this.resolveEscalationInstanceId(row) == null,
+            action: (row) => {
+                void this.triggerEscalationPreviewAction(item, row, config);
+            },
+        };
+        return action;
+    }
+    async triggerEscalationPreviewAction(item, row, config) {
+        const instanceId = this.resolveEscalationInstanceId(row);
+        if (instanceId == null)
+            return;
+        const ctx = this.toRuntimeActionsContext(item, row, config);
+        if (!ctx)
+            return;
+        const action = this.toEscalationPreviewRuntimeAction(instanceId);
+        const handled = await Promise.resolve(config.onActionTriggered?.(action, ctx));
+        if (handled === true)
+            return;
+        const result = await this.runtimeRunner.execute(action, {
+            defaultAfterSuccess: 'refresh',
+        });
+        if (result.status !== 'success')
+            return;
+        this.runtimeActions.invalidateList(item.key);
+        this.reloadByKey(item.key);
+        config.onActionExecuted?.(action, ctx);
+    }
+    toEscalationPreviewRuntimeAction(instanceId) {
+        return {
+            actionKey: VIEW_ESCALATION_ACTION_KEY,
+            actionName: this.transloco.translate('components.clientComponents.list.viewEscalation'),
+            httpMethod: 'GET',
+            url: `escalations/${instanceId}/preview`,
+            isAvailable: true,
+            operationKey: VIEW_ESCALATION_OPERATION_KEY,
+            targetType: 'Escalation',
+            targetId: instanceId,
+            payloadTemplate: {
+                escalationInstanceId: instanceId,
+                instanceId,
+            },
+        };
+    }
+    resolveEscalationInstanceId(row) {
+        const state = row[CLIENT_LIST_RECORD_STATE_KEY];
+        return this.resolveEscalationInstanceIdFromState(state);
+    }
+    resolveEscalationInstanceIdFromState(state) {
+        const escalation = state?.[ESCALATION_STATE_KEY];
+        if (escalation?.hasActive !== true) {
+            return null;
+        }
+        return this.toFiniteNumber(escalation.instanceId);
+    }
+    hasActiveEscalation(item) {
+        if (item.type !== 'form') {
+            return false;
+        }
+        if (item.areaType === 'cards') {
+            return item.cards.some((card) => this.resolveEscalationInstanceIdFromState(card.state) != null);
+        }
+        return item.rows.some((row) => this.resolveEscalationInstanceId(row) != null);
+    }
+    isViewEscalationAction(action) {
+        return (this.normalizeActionKey(action.operationKey) ===
+            this.normalizeActionKey(VIEW_ESCALATION_OPERATION_KEY) ||
+            this.normalizeActionKey(action.actionKey) ===
+                this.normalizeActionKey(VIEW_ESCALATION_ACTION_KEY));
+    }
+    normalizeActionKey(value) {
+        return (value ?? '').trim().toLowerCase();
+    }
+    toFiniteNumber(value) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : null;
+        }
+        if (typeof value === 'string' && value.trim() !== '') {
+            const parsed = Number(value);
+            return Number.isFinite(parsed) ? parsed : null;
+        }
+        return null;
     }
     async executeRuntimeAction(item, ctx, config, action) {
         const handled = await Promise.resolve(config.onActionTriggered?.(action, ctx));
@@ -1497,13 +1660,14 @@ class ClientList {
                 areaType === 'table' &&
                 (formConfig?.isPaginated ?? true);
             const configuredTablePageSize = this.resolvePositiveInteger(formConfig?.table?.pageSize);
+            const configuredTake = this.resolvePositiveInteger(formConfig?.take);
             const showHeader = config.showHeader ?? true;
             const take = !isInformative && areaType === 'table'
                 ? isPaginated
-                    ? (this.resolvePositiveInteger(formConfig?.take) ??
+                    ? (configuredTake ??
                         configuredTablePageSize ??
-                        this.defaultTake())
-                    : LOCAL_PAGE_SIZE_SOURCE
+                        this.resolveDefaultTake())
+                    : (configuredTake ?? this.resolveDefaultTake())
                 : 0;
             const collapseEnabled = showHeader &&
                 (config.collapse?.enabled ?? true) &&
@@ -1567,7 +1731,11 @@ class ClientList {
                 columns: [],
                 rows: [],
                 cards: [],
-                skip: existing?.areaType === 'table' ? existing.skip : 0,
+                skip: existing?.areaType === 'table' &&
+                    existing.config.isPaginated === isPaginated &&
+                    existing.take === take
+                    ? existing.skip
+                    : 0,
                 take,
                 expanded: existing?.expanded ?? config.collapse?.expandedByDefault ?? true,
                 dashboardData: null,
@@ -1842,6 +2010,10 @@ class ClientList {
                 : (configuredPageSize ?? DEFAULT_TABLE_PAGE_SIZE),
             searchable: config?.table?.searchable ?? false,
             exportable: config?.table?.exportable ?? false,
+            persistStateExclude: [
+                ...(config?.table?.persistStateExclude ??
+                    DEFAULT_TABLE_PERSIST_STATE_EXCLUDE),
+            ],
         };
     }
     clampSpan(value, min = 0, max = DEFAULT_GRID_COLUMNS) {
@@ -1857,6 +2029,17 @@ class ClientList {
         }
         return Math.trunc(normalized);
     }
+    resolveDefaultTake() {
+        return (this.resolvePositiveInteger(this.defaultTake()) ??
+            DEFAULT_SERVER_PAGE_SIZE);
+    }
+    resolveNonNegativeInteger(value) {
+        const normalized = Number(value);
+        if (!Number.isFinite(normalized) || normalized < 0) {
+            return null;
+        }
+        return Math.trunc(normalized);
+    }
     cleanupStaleResources(activeKeys) {
         for (const [key, sub] of this.subscriptions.entries()) {
             if (!activeKeys.has(key)) {
@@ -1895,11 +2078,12 @@ class ClientList {
         }
     }
     toTableQuery(config, skip, take) {
+        const queryTake = this.resolvePositiveInteger(take) ?? this.resolveDefaultTake();
         return {
             mode: config.mode,
             columnKeys: config.mode === 'override' ? config.columnKeys : undefined,
             skip: config.isPaginated ? skip : 0,
-            take: config.isPaginated ? take : LOCAL_PAGE_SIZE_SOURCE,
+            take: queryTake,
         };
     }
     createTableRequestSignature(config, query) {
@@ -1998,5 +2182,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ClientList, ClientListApiService, ClientListRuntimeActionsService, ClientListStateService, ClientListToolbarService, defaultResolveRecordId };
+export { CLIENT_LIST_RECORD_STATE_KEY, ClientList, ClientListApiService, ClientListRuntimeActionsService, ClientListStateService, ClientListToolbarService, defaultResolveRecordId };
 //# sourceMappingURL=masterteam-client-components-client-list.mjs.map