@masterteam/client-components 0.0.95 → 0.0.97

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

@@ -7,8 +7,8 @@ import { TranslocoService, TranslocoModule, TranslocoPipe } from '@jsverse/trans
 import { Button } from '@masterteam/components/button';
 import { RuntimeActionRunner, resolveActionLabel } from '@masterteam/components/runtime-action';
 import { HttpClient } from '@angular/common/http';
-import { switchMap, map, of, Observable, share, take } from 'rxjs';
-import { resolveLocalizedLabel, readEntityValueColor, serializeEntityRawValue, isSectionKey, EntitiesPreview } from '@masterteam/components/entities';
+import { switchMap, map, forkJoin, catchError, of, shareReplay, Observable, share, take } from 'rxjs';
+import { isSectionKey, resolveLocalizedLabel, readEntityValueColor, serializeEntityRawValue, EntitiesPreview } from '@masterteam/components/entities';
 import { Table, TableExportService, TableGroupingController, TableValueResolver, TableCaption } from '@masterteam/components/table';
 import * as i2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -45,6 +45,8 @@ class ClientListApiService {
     http = inject(HttpClient);
     runtimeFetchBaseUrl = 'fetch/query';
     informativeBaseUrl = 'LevelData';
+    /** Card layouts already read back, keyed by context. See {@link getCardLayout}. */
+    cardLayouts = new Map();
     /**
      * Fetches a table page. Resolves to the response **and** the `propertyKeys`
      * the request carried, because a write that wants its record projected the
@@ -97,21 +99,132 @@ class ClientListApiService {
                 : {}),
         });
     }
-    getCards(contextKey, filters = [], skip, take) {
+    /**
+     * Fetches a board of cards.
+     *
+     * Without a `hierarchy` scope this is a plain `Card` projection. With one it
+     * cannot be: the backend accepts descendant scope on the **`Table`
+     * projection only** and answers any other projection with a 400 that takes
+     * the whole list down. So a descendant board is fetched as a hierarchy table
+     * and re-dressed as cards — the rows carry the same records, their owning
+     * record and the pre-pagination totals, and {@link getCardLayout} supplies
+     * the card layout the board would otherwise lose.
+     */
+    getCards(contextKey, filters = [], skip, take, hierarchy) {
         // `page` and `pageSize` must be sent together or not at all (fetch/query
         // request constraints), so a missing or non-positive `take` means the
         // caller wants the whole set in one call.
         const pageSize = typeof take === 'number' && take > 0 ? take : null;
-        return this.queryRuntime({
+        const paging = pageSize === null
+            ? {}
+            : { page: this.toPage(skip ?? 0, pageSize), pageSize };
+        if (!hierarchy) {
+            return this.queryRuntime({
+                contextKey,
+                projection: 'Card',
+                includeState: [...DEFAULT_INCLUDE_STATE],
+                filters,
+                display: { areas: ['card'] },
+                ...paging,
+            });
+        }
+        return forkJoin({
+            layout: this.getCardLayout(contextKey),
+            // No `propertyKeys`: a descendant request rejects any key it cannot
+            // resolve in one of the child catalogs, and a card-only property (one
+            // the module's table does not show) is exactly such a key — asking for
+            // it would 400 the board instead of costing it one field. So the
+            // hierarchy request takes the module's table selection and the card
+            // layout picks from what came back.
+            rows: this.queryRuntime({
+                contextKey,
+                projection: 'Table',
+                surfaceKey: 'table',
+                includeState: [...DEFAULT_INCLUDE_STATE],
+                filters,
+                ...paging,
+                hierarchy: this.toHierarchyScope(hierarchy),
+            }),
+        }).pipe(map(({ layout, rows }) => this.withCardLayout(rows, layout)));
+    }
+    /**
+     * The card layout authored for a context, with every property key rewritten
+     * to its normalized form.
+     *
+     * A `Card` response names its properties by the owning context's own key
+     * (`leveldatafinancial_title`), while a hierarchy response normalizes every
+     * row, column and catalog entry across the child levels down to the shared
+     * key (`title`). Sent through unchanged the layout would resolve against
+     * nothing and every card would render empty.
+     *
+     * Cached per context for the life of the app: it is a second request on a
+     * path that already makes one, it is pure configuration, and it is re-read
+     * on the next full load anyway. A card layout edited in the control panel
+     * therefore needs a reload of the app to show up on a descendant board —
+     * the same page-load boundary the rest of the display configuration has.
+     */
+    getCardLayout(contextKey) {
+        const cached = this.cardLayouts.get(contextKey);
+        if (cached)
+            return cached;
+        const layout = this.queryRuntime({
             contextKey,
             projection: 'Card',
             includeState: [...DEFAULT_INCLUDE_STATE],
-            filters,
+            filters: [],
             display: { areas: ['card'] },
-            ...(pageSize === null
-                ? {}
-                : { page: this.toPage(skip ?? 0, pageSize), pageSize }),
-        });
+            // The layout lives in `projectionMeta`, so one record is enough to carry
+            // it back — the board's own records come from the hierarchy request.
+            page: 1,
+            pageSize: 1,
+        }).pipe(map((response) => this.toNormalizedDisplayOrder(response.data)), 
+        // A board that renders its rows with the table's columns still shows the
+        // right records; one that fails outright shows nothing. The layout is
+        // the optional half of the pair.
+        catchError(() => of([])), shareReplay({ bufferSize: 1, refCount: false }));
+        this.cardLayouts.set(contextKey, layout);
+        return layout;
+    }
+    toNormalizedDisplayOrder(data) {
+        const normalizedByKey = new Map((data?.catalog?.properties ?? []).map((property) => [
+            property.key,
+            property.normalizedKey || property.key,
+        ]));
+        return (data?.projectionMeta?.displayOrder ?? []).map((item) => ({
+            ...item,
+            propertyKey: normalizedByKey.get(item.propertyKey) ?? item.propertyKey,
+        }));
+    }
+    /**
+     * Dresses a hierarchy table response as the card payload the board reads:
+     * the same records, plus the authored card layout narrowed to the properties
+     * this response actually carries. A layout entry with no property behind it
+     * would render as a nameless blank slot, so it is dropped — section markers
+     * excepted, since they are layout rather than data and have no property to
+     * begin with.
+     *
+     * Leaves the response untouched when there is no usable layout: the card
+     * mapper then falls back to the response's own table columns, which is a
+     * plainer board but a complete one.
+     */
+    withCardLayout(response, displayOrder) {
+        const data = response.data;
+        if (!data || displayOrder.length === 0)
+            return response;
+        const available = new Set((data.catalog?.properties ?? []).flatMap((property) => [property.key, property.normalizedKey].filter((key) => !!key)));
+        const usable = displayOrder.filter((item) => isSectionKey(item.propertyKey) || available.has(item.propertyKey));
+        if (usable.every((item) => isSectionKey(item.propertyKey)))
+            return response;
+        return {
+            ...response,
+            data: {
+                ...data,
+                projectionMeta: {
+                    ...(data.projectionMeta ?? { kind: 'Card' }),
+                    displayOrder: usable,
+                },
+            },
+        };
     }
     getInformativeDashboard(levelId, moduleId) {
         return this.http.get(`${this.informativeBaseUrl}/levels/${levelId}/modules/${moduleId}/dashboard`);
@@ -292,6 +405,67 @@ function toDashboardExtraFilters(filters = []) {
     return extraFilters;
 }
 
+/**
+ * A card in the row shape `mt-table` and the table toolbar work with:
+ * `{ Id, [entityKey]: EntityData, ... }`. Grouping, filtering, search, export
+ * and row actions all run over this, never over the card itself, so a board
+ * and a table of the same list read the same fields.
+ *
+ * `displayProperties` are spread in first: they hold row-only cells a host
+ * derived for the list (see `ClientListStateService.setCardsResult`) — values
+ * a board can group or filter on without ever rendering them on the card.
+ */
+function toClientListCardRow(card) {
+    const row = {
+        Id: card.id,
+        ...(card.displayProperties ?? {}),
+        [CLIENT_LIST_RECORD_STATE_KEY]: card.state ?? null,
+        // Only present on a descendant board. Row actions read the owning record
+        // off the row, so a card's actions address its own owner rather than the
+        // aggregation context — the same contract a hierarchy table row carries.
+        [CLIENT_LIST_RECORD_SOURCE_KEY]: card.source ?? null,
+    };
+    for (const entity of card.entities ?? []) {
+        if (entity.viewType === 'Section')
+            continue;
+        const e = entity;
+        const key = (typeof e['key'] === 'string' && e['key']) ||
+            (typeof e['normalizedKey'] === 'string' && e['normalizedKey']) ||
+            entity.name;
+        const normalizedKey = typeof e['normalizedKey'] === 'string' ? e['normalizedKey'] : null;
+        const keys = new Set([key, normalizedKey].filter((entry) => typeof entry === 'string' && entry.length > 0));
+        for (const entityKey of keys) {
+            row[entityKey] = entity;
+        }
+    }
+    return row;
+}
+/**
+ * The columns a board's toolbar filters, groups and exports by, read off one
+ * card's entities — each carries its `key`, `name` (label) and `viewType`,
+ * which is everything `TableValueResolver.getColumnFilterType` needs.
+ */
+function toClientListCardColumns(card) {
+    // Section markers are card-layout only — never table columns.
+    return (card?.entities ?? [])
+        .filter((entity) => entity.viewType !== 'Section')
+        .map((entity) => {
+        const raw = entity;
+        const key = (typeof raw['key'] === 'string' && raw['key']) ||
+            (typeof raw['normalizedKey'] === 'string' && raw['normalizedKey']) ||
+            entity.name;
+        return {
+            key: String(key),
+            normalizedKey: typeof raw['normalizedKey'] === 'string'
+                ? raw['normalizedKey']
+                : String(key),
+            label: entity.name ?? String(key),
+            type: 'entity',
+            viewType: (entity.viewType ?? 'Text'),
+        };
+    });
+}
+
 const UNSORTABLE_ENTITY_VIEW_TYPES = new Set([
     'Attachment',
     'Checkbox',
@@ -451,6 +625,7 @@ class ClientListStateService {
         const cards = isAppend
             ? this.concatDistinctCards(target.cards, newCards)
             : newCards;
+        const shaped = this.shapeCards(cards, config, response);
         const schema = this.resolvePrimarySchema(response);
         const firstCardModule = newCards[0]?.module;
         const moduleKey = schema?.key ?? firstCardModule?.key ?? target.moduleKey;
@@ -481,9 +656,13 @@ class ClientListStateService {
                 ...target,
                 title,
                 moduleKey,
-                columns: [],
+                columns: shaped.columns,
                 rows: [],
-                cards,
+                cards: shaped.cards,
+                // Pre-pagination aggregates, kept verbatim off the response, exactly
+                // as a hierarchy table keeps them. Absent on an ordinary board.
+                totals: response.projectionMeta?.totals,
+                sourceGroups: response.projectionMeta?.sourceGroups,
                 // `skip` is the offset of the *next* page to fetch, always a multiple
                 // of the effective page size so `toPage()` stays exact.
                 skip: config.isPaginated
@@ -611,9 +790,11 @@ class ClientListStateService {
             records[recordIndex] = merged;
         else
             records.unshift(merged);
+        const shaped = this.shapeCards(cards, target.config, raw);
         this.patchItem(key, {
             ...target,
-            cards,
+            cards: shaped.cards,
+            columns: shaped.columns,
             totalCount: isInsert ? target.totalCount + 1 : target.totalCount,
             error: null,
             rawData: this.withRecords(raw, records, isInsert ? 1 : 0),
@@ -742,6 +923,46 @@ class ClientListStateService {
             rawData: existing.rawData,
         };
     }
+    /**
+     * Runs the host's `transformResult` over a board, so it offers the same
+     * columns the table of the same list does — the ones a host derives
+     * included (a descendant list's level and owning record, say). That is what
+     * lets a board group, filter and export by them, and what lets a
+     * `table.groupBy` default naming a derived column group a board at all.
+     *
+     * The card face is left alone: the card keeps rendering its own layout, and
+     * the derived cells ride on `displayProperties`, which only the card's row
+     * representation reads. Cells the transform rewrote rather than added are
+     * not carried over — the card already shows those fields its own way.
+     *
+     * Without a transform the board keeps its old behaviour: no `columns`, so
+     * the view derives them from the first card's entities.
+     */
+    shapeCards(cards, config, response) {
+        if (!config.transformResult || cards.length === 0) {
+            return { cards, columns: [] };
+        }
+        // Built from the card's own fields only, never from cells an earlier
+        // shaping added, so reshaping an accumulated (appended) board is
+        // idempotent.
+        const baseRows = cards.map((card) => toClientListCardRow({ ...card, displayProperties: undefined }));
+        const shaped = config.transformResult({ columns: toClientListCardColumns(cards[0]), rows: baseRows }, response);
+        const shapedById = new Map(shaped.rows.map((row) => [row['Id'], row]));
+        return {
+            columns: shaped.columns,
+            cards: cards.map((card, index) => {
+                const row = shapedById.get(card.id);
+                if (!row)
+                    return card;
+                const base = baseRows[index];
+                const derived = Object.fromEntries(Object.entries(row).filter(([rowKey]) => !(rowKey in base)));
+                return {
+                    ...card,
+                    displayProperties: Object.keys(derived).length ? derived : undefined,
+                };
+            }),
+        };
+    }
     toCards(data) {
         const records = this.orderRecords(data?.records ?? [], data?.projectionMeta?.groups ?? []);
         const catalogProperties = data?.catalog?.properties ?? [];
@@ -774,6 +995,10 @@ class ClientListStateService {
                 state: record.state ?? null,
                 properties: normalizedEntities,
                 entities: normalizedEntities,
+                // Only present on a descendant board, where cards come from several
+                // owners at once and the list's own context no longer identifies the
+                // record a card belongs to.
+                source: record.source ?? null,
             };
         });
     }
@@ -1275,11 +1500,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        [persistStateExclude]=\"table().config.table.persistStateExclude\"\r\n        [captionStartTemplate]=\"table().config.toolbarStart ?? null\"\r\n        [captionEndTemplate]=\"table().config.toolbarEnd ?? null\"\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        [sortField]=\"bucket().sortField()\"\r\n        (sortFieldChange)=\"bucket().sortField.set($event)\"\r\n        [sortDirection]=\"bucket().sortDirection()\"\r\n        (sortDirectionChange)=\"bucket().sortDirection.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", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }, { 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\">\n  @if (table().config.contentStart) {\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\n      <ng-container\n        [ngTemplateOutlet]=\"table().config.contentStart\"\n        [ngTemplateOutletContext]=\"templateContext(table())\"\n      />\n    </div>\n  }\n\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\n    @if (table().loading && table().rows.length === 0) {\n      <div class=\"flex flex-col gap-3 py-3\">\n        <p-skeleton height=\"3rem\" />\n        <p-skeleton height=\"3rem\" />\n        <p-skeleton height=\"3rem\" />\n      </div>\n    } @else if (table().error) {\n      <div\n        class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\n      >\n        {{ table().error }}\n      </div>\n    } @else {\n      <mt-table\n        [noCard]=\"true\"\n        [data]=\"table().rows\"\n        [columns]=\"table().columns\"\n        dataKey=\"Id\"\n        [storageKey]=\"tableStorageKey()\"\n        [persistStateExclude]=\"table().config.table.persistStateExclude\"\n        [captionStartTemplate]=\"table().config.toolbarStart ?? null\"\n        [captionEndTemplate]=\"table().config.toolbarEnd ?? null\"\n        [rowActions]=\"rowActions()\"\n        [actionShape]=\"actionShape()\"\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\n        [generalSearch]=\"table().config.table.searchable\"\n        [showFilters]=\"true\"\n        filterMode=\"column\"\n        [printable]=\"true\"\n        [groupable]=\"true\"\n        [cellClickFilter]=\"true\"\n        [freezeActions]=\"true\"\n        [exportable]=\"table().config.table.exportable\"\n        [loading]=\"table().loading\"\n        [clickableRows]=\"true\"\n        [lazy]=\"table().config.isPaginated\"\n        [lazyTotalRecords]=\"table().totalCount\"\n        [virtualScroll]=\"!table().config.isPaginated\"\n        [virtualScrollItemSize]=\"56\"\n        scrollHeight=\"520px\"\n        [pageSize]=\"pageSize()\"\n        [filters]=\"bucket().filters()\"\n        (filtersChange)=\"bucket().filters.set($event)\"\n        [filterTerm]=\"bucket().filterTerm()\"\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\n        [groupBy]=\"bucket().groupBy()\"\n        (groupByChange)=\"bucket().groupBy.set($event)\"\n        [sortField]=\"bucket().sortField()\"\n        (sortFieldChange)=\"bucket().sortField.set($event)\"\n        [sortDirection]=\"bucket().sortDirection()\"\n        (sortDirectionChange)=\"bucket().sortDirection.set($event)\"\n        [activeTab]=\"bucket().activeTab()\"\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\n        (lazyLoad)=\"lazyLoad.emit($event)\"\n        (rowClick)=\"rowClick.emit($event)\"\n      />\n    }\n  </div>\n\n  @if (table().config.contentEnd) {\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\n      <ng-container\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\n        [ngTemplateOutletContext]=\"templateContext(table())\"\n      />\n    </div>\n  }\n</div>\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", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }, { 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        [persistStateExclude]=\"table().config.table.persistStateExclude\"\r\n        [captionStartTemplate]=\"table().config.toolbarStart ?? null\"\r\n        [captionEndTemplate]=\"table().config.toolbarEnd ?? null\"\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        [sortField]=\"bucket().sortField()\"\r\n        (sortFieldChange)=\"bucket().sortField.set($event)\"\r\n        [sortDirection]=\"bucket().sortDirection()\"\r\n        (sortDirectionChange)=\"bucket().sortDirection.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\">\n  @if (table().config.contentStart) {\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\n      <ng-container\n        [ngTemplateOutlet]=\"table().config.contentStart\"\n        [ngTemplateOutletContext]=\"templateContext(table())\"\n      />\n    </div>\n  }\n\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\n    @if (table().loading && table().rows.length === 0) {\n      <div class=\"flex flex-col gap-3 py-3\">\n        <p-skeleton height=\"3rem\" />\n        <p-skeleton height=\"3rem\" />\n        <p-skeleton height=\"3rem\" />\n      </div>\n    } @else if (table().error) {\n      <div\n        class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\n      >\n        {{ table().error }}\n      </div>\n    } @else {\n      <mt-table\n        [noCard]=\"true\"\n        [data]=\"table().rows\"\n        [columns]=\"table().columns\"\n        dataKey=\"Id\"\n        [storageKey]=\"tableStorageKey()\"\n        [persistStateExclude]=\"table().config.table.persistStateExclude\"\n        [captionStartTemplate]=\"table().config.toolbarStart ?? null\"\n        [captionEndTemplate]=\"table().config.toolbarEnd ?? null\"\n        [rowActions]=\"rowActions()\"\n        [actionShape]=\"actionShape()\"\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\n        [generalSearch]=\"table().config.table.searchable\"\n        [showFilters]=\"true\"\n        filterMode=\"column\"\n        [printable]=\"true\"\n        [groupable]=\"true\"\n        [cellClickFilter]=\"true\"\n        [freezeActions]=\"true\"\n        [exportable]=\"table().config.table.exportable\"\n        [loading]=\"table().loading\"\n        [clickableRows]=\"true\"\n        [lazy]=\"table().config.isPaginated\"\n        [lazyTotalRecords]=\"table().totalCount\"\n        [virtualScroll]=\"!table().config.isPaginated\"\n        [virtualScrollItemSize]=\"56\"\n        scrollHeight=\"520px\"\n        [pageSize]=\"pageSize()\"\n        [filters]=\"bucket().filters()\"\n        (filtersChange)=\"bucket().filters.set($event)\"\n        [filterTerm]=\"bucket().filterTerm()\"\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\n        [groupBy]=\"bucket().groupBy()\"\n        (groupByChange)=\"bucket().groupBy.set($event)\"\n        [sortField]=\"bucket().sortField()\"\n        (sortFieldChange)=\"bucket().sortField.set($event)\"\n        [sortDirection]=\"bucket().sortDirection()\"\n        (sortDirectionChange)=\"bucket().sortDirection.set($event)\"\n        [activeTab]=\"bucket().activeTab()\"\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\n        (lazyLoad)=\"lazyLoad.emit($event)\"\n        (rowClick)=\"rowClick.emit($event)\"\n      />\n    }\n  </div>\n\n  @if (table().config.contentEnd) {\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\n      <ng-container\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\n        [ngTemplateOutletContext]=\"templateContext(table())\"\n      />\n    </div>\n  }\n</div>\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();
@@ -1335,8 +1560,15 @@ class ClientListCardsView {
      * observed so scrolling it into view triggers `loadMore`. */
     loadMoreSentinel = viewChild('loadMoreSentinel', ...(ngDevMode ? [{ debugName: "loadMoreSentinel" }] : /* istanbul ignore next */ []));
     loadMoreObserver = null;
-    /** Shared toolbar bucket — same instance the table view uses. */
-    bucket = computed(() => this.toolbar.forList(this.state().key), ...(ngDevMode ? [{ debugName: "bucket" }] : /* istanbul ignore next */ []));
+    /**
+     * Shared toolbar bucket — same instance the table view uses. Passes the same
+     * `table.groupBy` default, so a board opened first starts grouped exactly as
+     * the table would. The service seeds it once per list, whichever view asks
+     * first, so the user's own regrouping still sticks.
+     */
+    bucket = computed(() => this.toolbar.forList(this.state().key, {
+        groupBy: this.state().config.table.groupBy,
+    }), ...(ngDevMode ? [{ debugName: "bucket" }] : /* istanbul ignore next */ []));
     /** True while a column filter or search term is active — drives the
      * reset button's visibility in the caption toolbar. */
     hasActiveFilter = computed(() => Object.keys(this.bucket().filters()).length > 0 ||
@@ -1386,38 +1618,16 @@ class ClientListCardsView {
         this.bucket().filterTerm.set('');
     }
     /**
-     * Columns for filter/group/export. `state.columns` is empty for cards area
-     * (the state service doesn't populate it — see `setCardsResult`), so we
-     * reconstruct `ColumnDef[]` from the first card's entity metadata. Each
-     * entity carries its `key`, `name` (label), and `viewType`, which is
-     * everything `TableValueResolver.getColumnFilterType` needs to classify
-     * filter behaviour (select / boolean / date / user / text).
+     * Columns for filter/group/export. A board whose host reshapes the list
+     * (`transformResult`) carries the reshaped columns on `state.columns` — the
+     * same ones the table shows, host-derived ones included — and otherwise
+     * they are rebuilt from the first card's entity metadata.
      */
     columns = computed(() => {
         const fromState = this.state().columns;
         if (fromState && fromState.length > 0)
             return fromState;
-        const sampleCard = this.cardsState().cards[0];
-        if (!sampleCard?.entities?.length)
-            return [];
-        // Section markers are card-layout only — never table columns.
-        return sampleCard.entities
-            .filter((entity) => entity.viewType !== 'Section')
-            .map((entity) => {
-            const raw = entity;
-            const key = (typeof raw['key'] === 'string' && raw['key']) ||
-                (typeof raw['normalizedKey'] === 'string' && raw['normalizedKey']) ||
-                entity.name;
-            return {
-                key: String(key),
-                normalizedKey: typeof raw['normalizedKey'] === 'string'
-                    ? raw['normalizedKey']
-                    : String(key),
-                label: entity.name ?? String(key),
-                type: 'entity',
-                viewType: (entity.viewType ?? 'Text'),
-            };
-        });
+        return toClientListCardColumns(this.cardsState().cards[0]);
     }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     /**
      * Row view of each card. Cards carry their data as `entities: EntityData[]`,
@@ -1428,28 +1638,7 @@ class ClientListCardsView {
      */
     rowRepresentations = computed(() => this.cardsState().cards.map((card) => this.cardToRow(card)), ...(ngDevMode ? [{ debugName: "rowRepresentations" }] : /* istanbul ignore next */ []));
     cardToRow(card) {
-        const fromDisplay = card.displayProperties;
-        const record = fromDisplay && Object.keys(fromDisplay).length > 0
-            ? {
-                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 ?? []) {
-            if (entity.viewType === 'Section')
-                continue;
-            const e = entity;
-            const key = (typeof e['key'] === 'string' && e['key']) ||
-                (typeof e['normalizedKey'] === 'string' && e['normalizedKey']) ||
-                entity.name;
-            const normalizedKey = typeof e['normalizedKey'] === 'string' ? e['normalizedKey'] : null;
-            const keys = new Set([key, normalizedKey].filter((entry) => typeof entry === 'string' && entry.length > 0));
-            for (const entityKey of keys) {
-                record[entityKey] = entity;
-            }
-        }
-        return record;
+        return toClientListCardRow(card);
     }
     /**
      * Stable card → row lookup. Row actions (and their `hidden` / `action`
@@ -2001,7 +2190,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", loadMore: "loadMore", cardClick: "cardClick", rowActionsRequested: "rowActionsRequested" }, providers: [MTDateFormatPipe], viewQueries: [{ propertyName: "loadMoreSentinel", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-table-caption\n  [generalSearch]=\"true\"\n  [showFilters]=\"true\"\n  filterMode=\"popover\"\n  [printable]=\"true\"\n  [groupable]=\"true\"\n  [exportable]=\"true\"\n  [columns]=\"columns()\"\n  [data]=\"rowRepresentations()\"\n  [groupColumns]=\"grouping.groupableColumns()\"\n  [actions]=\"toolbarActions()\"\n  [captionStart]=\"cardsState().config.toolbarStart ?? null\"\n  [captionEnd]=\"cardsState().config.toolbarEnd ?? null\"\n  [filters]=\"bucket().filters()\"\n  (filtersChange)=\"bucket().filters.set($event)\"\n  [filterTerm]=\"bucket().filterTerm()\"\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\n  [groupBy]=\"bucket().groupBy()\"\n  (groupByChange)=\"bucket().groupBy.set($event)\"\n  [activeTab]=\"bucket().activeTab()\"\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\n  (exportRequested)=\"exportExcel()\"\n  (printRequested)=\"printPdf()\"\n/>\n\n@if (badgeLegend().length > 0) {\n  <!--\n    Decodes the coloured count pills on the cards below. Rendered once for the\n    whole board rather than per card, so it costs one line of vertical space\n    instead of repeating a key inside every tile (finding M-04).\n  -->\n  <div\n    class=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-1\"\n    role=\"list\"\n    [attr.aria-label]=\"\n      'components.clientComponents.list.badgeLegend' | transloco\n    \"\n  >\n    <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400\">\n      {{ \"components.clientComponents.list.badgeLegend\" | transloco }}\n    </span>\n    @for (entry of badgeLegend(); track entry.key) {\n      <span class=\"flex items-center gap-1.5\" role=\"listitem\">\n        <span\n          class=\"inline-flex h-4 min-w-4 items-center justify-center rounded text-[10px] font-bold\"\n          [style.background-color]=\"entry.color\"\n          [style.color]=\"entry.textColor\"\n          aria-hidden=\"true\"\n        >\n          #\n        </span>\n        <span class=\"text-xs text-gray-600 dark:text-gray-300\">{{\n          entry.label\n        }}</span>\n      </span>\n    }\n  </div>\n}\n\n@if (cardsState().loading && cardsState().cards.length === 0) {\n  <div class=\"mt-cards-grid\">\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n    }\n  </div>\n} @else if (cardsState().error) {\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\n    {{ cardsState().error }}\n  </div>\n} @else if (visibleCards().length === 0) {\n  <!--\n    The same empty state the tables use, so a board and a list stop looking like\n    two products (finding H-12). A board narrowed by a search or a filter says\n    so and offers to clear it, instead of the bare grey \"No cards found.\"\n  -->\n  <mt-empty-state\n    [variant]=\"hasActiveCardFilters() ? 'filtered' : 'empty'\"\n    [title]=\"\n      hasActiveCardFilters()\n        ? ''\n        : ('components.clientComponents.list.noCardsFound' | transloco)\n    \"\n    [actionLabel]=\"\n      hasActiveCardFilters()\n        ? ('components.emptyState.clearFilters' | transloco)\n        : ''\n    \"\n    actionIcon=\"general.x-close\"\n    (actionClick)=\"clearCardFilters()\"\n  />\n} @else if (grouping.groupingActive()) {\n  <div class=\"flex flex-col gap-6\">\n    @for (group of groupedCards(); track group.key) {\n      <section class=\"flex flex-col gap-3\">\n        <header\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\"\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\n        >\n          <span\n            class=\"inline-block w-1 h-5 rounded-full\"\n            [style.background]=\"'var(--mt-group-accent)'\"\n          ></span>\n          <span\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\n          >\n            {{ group.columnLabel }}\n          </span>\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\n            {{ group.label }}\n          </span>\n          <span\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\"\n          >\n            {{ group.count }}\n          </span>\n        </header>\n        <div class=\"mt-cards-grid\">\n          @for (card of group.cards; track card.id) {\n            <mt-card\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n              (click)=\"cardClick.emit(card)\"\n            >\n              <ng-template #headless>\n                <ng-container\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\n                />\n                <mt-entities-preview\n                  [entities]=\"card.entities\"\n                  attachmentShape=\"compact\"\n                  [stackOnNarrow]=\"false\"\n                  [clickableKeys]=\"clickableEntityKeys()\"\n                  [activeKeys]=\"activeKeysForCard(card)\"\n                  [clickableTooltip]=\"filterByThisLabel()\"\n                  [activeTooltip]=\"clearFilterLabel()\"\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\n                />\n              </ng-template>\n            </mt-card>\n          }\n        </div>\n      </section>\n    }\n  </div>\n} @else {\n  <div class=\"mt-cards-grid\">\n    @for (card of visibleCards(); track card.id) {\n      @defer (on viewport) {\n        <mt-card\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n          (click)=\"cardClick.emit(card)\"\n        >\n          <ng-template #headless>\n            <ng-container\n              [ngTemplateOutlet]=\"cardActionsMenu\"\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\n            />\n            <mt-entities-preview\n              [entities]=\"card.entities\"\n              attachmentShape=\"compact\"\n              [stackOnNarrow]=\"false\"\n              [clickableKeys]=\"clickableEntityKeys()\"\n              [activeKeys]=\"activeKeysForCard(card)\"\n              [clickableTooltip]=\"filterByThisLabel()\"\n              [activeTooltip]=\"clearFilterLabel()\"\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\n            />\n          </ng-template>\n        </mt-card>\n      } @placeholder {\n        <div class=\"min-h-[20rem]\">\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n        </div>\n      }\n    }\n  </div>\n}\n\n<!--\n  Infinite-scroll trigger. Deliberately outside the @if/@else chain above:\n  inside it the element would be torn down and rebuilt every time the view\n  swapped branch (error, empty filter result, group-by), and the observer\n  would be left watching a detached node. Kept in the DOM and hidden via CSS\n  when there is nothing left to load, so appending a page never recreates it.\n  It also has to sit outside so infinite scroll keeps working while a\n  group-by is active \u2014 grouping is a pure FE view over whatever has been\n  fetched, not a reason to stop fetching.\n-->\n<div\n  #loadMoreSentinel\n  class=\"mt-cards-grid py-4\"\n  [class.hidden]=\"!hasMoreCards()\"\n>\n  @for (i of [1, 2, 3]; track i) {\n    <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n  }\n</div>\n\n<!--\n  Per-card escalation marker and 3-dots actions menu. The compact corner cover\n  only indicates active escalation state; its preview action lives in the menu\n  so the marker never displaces or competes with the menu trigger.\n-->\n<ng-template #cardActionsMenu let-card>\n  @let escalationAction = escalationMarkerAction(card);\n  @if (escalationAction) {\n    <span\n      class=\"mt-escalation-marker absolute end-0 top-0 z-10 h-[18px] w-[20px]\"\n      role=\"img\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"escalationLabel()\"\n      [mtTooltip]=\"escalationLabel()\"\n      tooltipPosition=\"top\"\n    ></span>\n  }\n  @if (rowActions().length > 0) {\n    <div\n      class=\"absolute end-2 top-2 z-20 flex items-center gap-1\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @for (action of inlineActionsForCard(card); track $index) {\n        <mt-button\n          [icon]=\"action.icon\"\n          [severity]=\"action.color\"\n          [variant]=\"action.variant\"\n          [size]=\"actionSize(action) || 'small'\"\n          [tooltip]=\"action.tooltip\"\n          [label]=\"action.label\"\n          [loading]=\"resolveActionLoading(action, card)\"\n          (onClick)=\"runCardAction($event, action, card)\"\n        />\n      }\n      @if (showCardActionsMenu(card)) {\n        <button\n          type=\"button\"\n          class=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-base text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-300 dark:hover:bg-surface-700 dark:hover:text-gray-100\"\n          [attr.aria-label]=\"actionsLabel()\"\n          [mtTooltip]=\"actionsLabel()\"\n          tooltipPosition=\"top\"\n          (click)=\"onCardActionsToggle($event, cardPopover, card)\"\n        >\n          <mt-icon icon=\"general.dots-vertical\" class=\"text-base\" />\n        </button>\n        <p-popover #cardPopover appendTo=\"body\">\n          <div class=\"flex min-w-44 flex-col gap-1 p-1\">\n            @if (isCardActionsLoading(card)) {\n              <div class=\"flex flex-col gap-2 p-1\">\n                <p-skeleton height=\"1.75rem\" />\n                <p-skeleton height=\"1.75rem\" />\n                <p-skeleton height=\"1.75rem\" />\n              </div>\n            } @else {\n              @for (action of menuActionsForCard(card); track $index) {\n                @if (isFirstDestructiveCardAction(card, $index)) {\n                  <hr\n                    class=\"my-1 border-0 border-t border-surface-200 dark:border-surface-700\"\n                  />\n                }\n                <button\n                  type=\"button\"\n                  class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\n                  [class]=\"\n                    action.color === 'danger'\n                      ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\n                      : action.color === 'warn'\n                        ? 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950'\n                        : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\n                  \"\n                  (click)=\"\n                    runCardAction($event, action, card); cardPopover.hide()\n                  \"\n                >\n                  @if (action.icon) {\n                    <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\n                  }\n                  <span>{{ action.label || action.tooltip }}</span>\n                </button>\n              }\n            }\n          </div>\n        </p-popover>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [".mt-cards-grid{--mt-cards-gap: 1rem;--mt-cards-min: 335px;--mt-cards-track: max( var(--mt-cards-min), (100% - 3 * var(--mt-cards-gap)) / 4 );display:grid;gap:var(--mt-cards-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mt-cards-track)),1fr))}.mt-cards-grid.hidden,.mt-cards-grid[hidden]{display:none}.mt-escalation-marker{border-start-end-radius:.5rem;background:var(--p-button-text-warn-color, var(--p-orange-500, #f59e0b));clip-path:polygon(0 0,100% 0,100% 100%);transition:filter .15s ease}.mt-escalation-marker:dir(rtl){clip-path:polygon(0 0,100% 0,0 100%)}.mt-escalation-marker:hover{filter:brightness(.92)}.mt-escalation-marker:focus-visible{filter:brightness(.92) drop-shadow(0 0 2px var(--p-button-text-warn-color, #f59e0b));outline:none}\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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "entityListContext", "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: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, 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", loadMore: "loadMore", cardClick: "cardClick", rowActionsRequested: "rowActionsRequested" }, providers: [MTDateFormatPipe], viewQueries: [{ propertyName: "loadMoreSentinel", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], 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  [actions]=\"toolbarActions()\"\r\n  [captionStart]=\"cardsState().config.toolbarStart ?? null\"\r\n  [captionEnd]=\"cardsState().config.toolbarEnd ?? null\"\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 (badgeLegend().length > 0) {\r\n  <!--\r\n    Decodes the coloured count pills on the cards below. Rendered once for the\r\n    whole board rather than per card, so it costs one line of vertical space\r\n    instead of repeating a key inside every tile (finding M-04).\r\n  -->\r\n  <div\r\n    class=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-1\"\r\n    role=\"list\"\r\n    [attr.aria-label]=\"\r\n      'components.clientComponents.list.badgeLegend' | transloco\r\n    \"\r\n  >\r\n    <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400\">\r\n      {{ \"components.clientComponents.list.badgeLegend\" | transloco }}\r\n    </span>\r\n    @for (entry of badgeLegend(); track entry.key) {\r\n      <span class=\"flex items-center gap-1.5\" role=\"listitem\">\r\n        <span\r\n          class=\"inline-flex h-4 min-w-4 items-center justify-center rounded text-[10px] font-bold\"\r\n          [style.background-color]=\"entry.color\"\r\n          [style.color]=\"entry.textColor\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          #\r\n        </span>\r\n        <span class=\"text-xs text-gray-600 dark:text-gray-300\">{{\r\n          entry.label\r\n        }}</span>\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"mt-cards-grid\">\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  <!--\r\n    The same empty state the tables use, so a board and a list stop looking like\r\n    two products (finding H-12). A board narrowed by a search or a filter says\r\n    so and offers to clear it, instead of the bare grey \"No cards found.\"\r\n  -->\r\n  <mt-empty-state\r\n    [variant]=\"hasActiveCardFilters() ? 'filtered' : 'empty'\"\r\n    [title]=\"\r\n      hasActiveCardFilters()\r\n        ? ''\r\n        : ('components.clientComponents.list.noCardsFound' | transloco)\r\n    \"\r\n    [actionLabel]=\"\r\n      hasActiveCardFilters()\r\n        ? ('components.emptyState.clearFilters' | transloco)\r\n        : ''\r\n    \"\r\n    actionIcon=\"general.x-close\"\r\n    (actionClick)=\"clearCardFilters()\"\r\n  />\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=\"mt-cards-grid\">\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]=\"filterByThisLabel()\"\r\n                  [activeTooltip]=\"clearFilterLabel()\"\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=\"mt-cards-grid\">\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]=\"filterByThisLabel()\"\r\n              [activeTooltip]=\"clearFilterLabel()\"\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  Infinite-scroll trigger. Deliberately outside the @if/@else chain above:\r\n  inside it the element would be torn down and rebuilt every time the view\r\n  swapped branch (error, empty filter result, group-by), and the observer\r\n  would be left watching a detached node. Kept in the DOM and hidden via CSS\r\n  when there is nothing left to load, so appending a page never recreates it.\r\n  It also has to sit outside so infinite scroll keeps working while a\r\n  group-by is active \u2014 grouping is a pure FE view over whatever has been\r\n  fetched, not a reason to stop fetching.\r\n-->\r\n<div\r\n  #loadMoreSentinel\r\n  class=\"mt-cards-grid py-4\"\r\n  [class.hidden]=\"!hasMoreCards()\"\r\n>\r\n  @for (i of [1, 2, 3]; track i) {\r\n    <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n  }\r\n</div>\r\n\r\n<!--\r\n  Per-card escalation marker and 3-dots actions menu. The compact corner cover\r\n  only indicates active escalation state; its preview action lives in the menu\r\n  so the marker never displaces or competes with the menu trigger.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @let escalationAction = escalationMarkerAction(card);\r\n  @if (escalationAction) {\r\n    <span\r\n      class=\"mt-escalation-marker absolute end-0 top-0 z-10 h-[18px] w-[20px]\"\r\n      role=\"img\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"escalationLabel()\"\r\n      [mtTooltip]=\"escalationLabel()\"\r\n      tooltipPosition=\"top\"\r\n    ></span>\r\n  }\r\n  @if (rowActions().length > 0) {\r\n    <div\r\n      class=\"absolute end-2 top-2 z-20 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        <button\r\n          type=\"button\"\r\n          class=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-base text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-300 dark:hover:bg-surface-700 dark:hover:text-gray-100\"\r\n          [attr.aria-label]=\"actionsLabel()\"\r\n          [mtTooltip]=\"actionsLabel()\"\r\n          tooltipPosition=\"top\"\r\n          (click)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n        >\r\n          <mt-icon icon=\"general.dots-vertical\" class=\"text-base\" />\r\n        </button>\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                @if (isFirstDestructiveCardAction(card, $index)) {\r\n                  <hr\r\n                    class=\"my-1 border-0 border-t border-surface-200 dark:border-surface-700\"\r\n                  />\r\n                }\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                      : action.color === 'warn'\r\n                        ? 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-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", styles: [".mt-cards-grid{--mt-cards-gap: 1rem;--mt-cards-min: 335px;--mt-cards-track: max( var(--mt-cards-min), (100% - 3 * var(--mt-cards-gap)) / 4 );display:grid;gap:var(--mt-cards-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mt-cards-track)),1fr))}.mt-cards-grid.hidden,.mt-cards-grid[hidden]{display:none}.mt-escalation-marker{border-start-end-radius:.5rem;background:var(--p-button-text-warn-color, var(--p-orange-500, #f59e0b));clip-path:polygon(0 0,100% 0,100% 100%);transition:filter .15s ease}.mt-escalation-marker:dir(rtl){clip-path:polygon(0 0,100% 0,0 100%)}.mt-escalation-marker:hover{filter:brightness(.92)}.mt-escalation-marker:focus-visible{filter:brightness(.92) drop-shadow(0 0 2px var(--p-button-text-warn-color, #f59e0b));outline:none}\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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { 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: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.NgTemplateOutlet, Card,
                 EntitiesPreview]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListCardsView, decorators: [{
@@ -2018,7 +2207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         PopoverModule,
                         TableCaption,
                         EmptyState,
-                    ], providers: [MTDateFormatPipe], template: "<mt-table-caption\n  [generalSearch]=\"true\"\n  [showFilters]=\"true\"\n  filterMode=\"popover\"\n  [printable]=\"true\"\n  [groupable]=\"true\"\n  [exportable]=\"true\"\n  [columns]=\"columns()\"\n  [data]=\"rowRepresentations()\"\n  [groupColumns]=\"grouping.groupableColumns()\"\n  [actions]=\"toolbarActions()\"\n  [captionStart]=\"cardsState().config.toolbarStart ?? null\"\n  [captionEnd]=\"cardsState().config.toolbarEnd ?? null\"\n  [filters]=\"bucket().filters()\"\n  (filtersChange)=\"bucket().filters.set($event)\"\n  [filterTerm]=\"bucket().filterTerm()\"\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\n  [groupBy]=\"bucket().groupBy()\"\n  (groupByChange)=\"bucket().groupBy.set($event)\"\n  [activeTab]=\"bucket().activeTab()\"\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\n  (exportRequested)=\"exportExcel()\"\n  (printRequested)=\"printPdf()\"\n/>\n\n@if (badgeLegend().length > 0) {\n  <!--\n    Decodes the coloured count pills on the cards below. Rendered once for the\n    whole board rather than per card, so it costs one line of vertical space\n    instead of repeating a key inside every tile (finding M-04).\n  -->\n  <div\n    class=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-1\"\n    role=\"list\"\n    [attr.aria-label]=\"\n      'components.clientComponents.list.badgeLegend' | transloco\n    \"\n  >\n    <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400\">\n      {{ \"components.clientComponents.list.badgeLegend\" | transloco }}\n    </span>\n    @for (entry of badgeLegend(); track entry.key) {\n      <span class=\"flex items-center gap-1.5\" role=\"listitem\">\n        <span\n          class=\"inline-flex h-4 min-w-4 items-center justify-center rounded text-[10px] font-bold\"\n          [style.background-color]=\"entry.color\"\n          [style.color]=\"entry.textColor\"\n          aria-hidden=\"true\"\n        >\n          #\n        </span>\n        <span class=\"text-xs text-gray-600 dark:text-gray-300\">{{\n          entry.label\n        }}</span>\n      </span>\n    }\n  </div>\n}\n\n@if (cardsState().loading && cardsState().cards.length === 0) {\n  <div class=\"mt-cards-grid\">\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n    }\n  </div>\n} @else if (cardsState().error) {\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\n    {{ cardsState().error }}\n  </div>\n} @else if (visibleCards().length === 0) {\n  <!--\n    The same empty state the tables use, so a board and a list stop looking like\n    two products (finding H-12). A board narrowed by a search or a filter says\n    so and offers to clear it, instead of the bare grey \"No cards found.\"\n  -->\n  <mt-empty-state\n    [variant]=\"hasActiveCardFilters() ? 'filtered' : 'empty'\"\n    [title]=\"\n      hasActiveCardFilters()\n        ? ''\n        : ('components.clientComponents.list.noCardsFound' | transloco)\n    \"\n    [actionLabel]=\"\n      hasActiveCardFilters()\n        ? ('components.emptyState.clearFilters' | transloco)\n        : ''\n    \"\n    actionIcon=\"general.x-close\"\n    (actionClick)=\"clearCardFilters()\"\n  />\n} @else if (grouping.groupingActive()) {\n  <div class=\"flex flex-col gap-6\">\n    @for (group of groupedCards(); track group.key) {\n      <section class=\"flex flex-col gap-3\">\n        <header\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\"\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\n        >\n          <span\n            class=\"inline-block w-1 h-5 rounded-full\"\n            [style.background]=\"'var(--mt-group-accent)'\"\n          ></span>\n          <span\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\n          >\n            {{ group.columnLabel }}\n          </span>\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\n            {{ group.label }}\n          </span>\n          <span\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\"\n          >\n            {{ group.count }}\n          </span>\n        </header>\n        <div class=\"mt-cards-grid\">\n          @for (card of group.cards; track card.id) {\n            <mt-card\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n              (click)=\"cardClick.emit(card)\"\n            >\n              <ng-template #headless>\n                <ng-container\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\n                />\n                <mt-entities-preview\n                  [entities]=\"card.entities\"\n                  attachmentShape=\"compact\"\n                  [stackOnNarrow]=\"false\"\n                  [clickableKeys]=\"clickableEntityKeys()\"\n                  [activeKeys]=\"activeKeysForCard(card)\"\n                  [clickableTooltip]=\"filterByThisLabel()\"\n                  [activeTooltip]=\"clearFilterLabel()\"\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\n                />\n              </ng-template>\n            </mt-card>\n          }\n        </div>\n      </section>\n    }\n  </div>\n} @else {\n  <div class=\"mt-cards-grid\">\n    @for (card of visibleCards(); track card.id) {\n      @defer (on viewport) {\n        <mt-card\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\n          (click)=\"cardClick.emit(card)\"\n        >\n          <ng-template #headless>\n            <ng-container\n              [ngTemplateOutlet]=\"cardActionsMenu\"\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\n            />\n            <mt-entities-preview\n              [entities]=\"card.entities\"\n              attachmentShape=\"compact\"\n              [stackOnNarrow]=\"false\"\n              [clickableKeys]=\"clickableEntityKeys()\"\n              [activeKeys]=\"activeKeysForCard(card)\"\n              [clickableTooltip]=\"filterByThisLabel()\"\n              [activeTooltip]=\"clearFilterLabel()\"\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\n            />\n          </ng-template>\n        </mt-card>\n      } @placeholder {\n        <div class=\"min-h-[20rem]\">\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n        </div>\n      }\n    }\n  </div>\n}\n\n<!--\n  Infinite-scroll trigger. Deliberately outside the @if/@else chain above:\n  inside it the element would be torn down and rebuilt every time the view\n  swapped branch (error, empty filter result, group-by), and the observer\n  would be left watching a detached node. Kept in the DOM and hidden via CSS\n  when there is nothing left to load, so appending a page never recreates it.\n  It also has to sit outside so infinite scroll keeps working while a\n  group-by is active \u2014 grouping is a pure FE view over whatever has been\n  fetched, not a reason to stop fetching.\n-->\n<div\n  #loadMoreSentinel\n  class=\"mt-cards-grid py-4\"\n  [class.hidden]=\"!hasMoreCards()\"\n>\n  @for (i of [1, 2, 3]; track i) {\n    <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\n  }\n</div>\n\n<!--\n  Per-card escalation marker and 3-dots actions menu. The compact corner cover\n  only indicates active escalation state; its preview action lives in the menu\n  so the marker never displaces or competes with the menu trigger.\n-->\n<ng-template #cardActionsMenu let-card>\n  @let escalationAction = escalationMarkerAction(card);\n  @if (escalationAction) {\n    <span\n      class=\"mt-escalation-marker absolute end-0 top-0 z-10 h-[18px] w-[20px]\"\n      role=\"img\"\n      tabindex=\"0\"\n      [attr.aria-label]=\"escalationLabel()\"\n      [mtTooltip]=\"escalationLabel()\"\n      tooltipPosition=\"top\"\n    ></span>\n  }\n  @if (rowActions().length > 0) {\n    <div\n      class=\"absolute end-2 top-2 z-20 flex items-center gap-1\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      @for (action of inlineActionsForCard(card); track $index) {\n        <mt-button\n          [icon]=\"action.icon\"\n          [severity]=\"action.color\"\n          [variant]=\"action.variant\"\n          [size]=\"actionSize(action) || 'small'\"\n          [tooltip]=\"action.tooltip\"\n          [label]=\"action.label\"\n          [loading]=\"resolveActionLoading(action, card)\"\n          (onClick)=\"runCardAction($event, action, card)\"\n        />\n      }\n      @if (showCardActionsMenu(card)) {\n        <button\n          type=\"button\"\n          class=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-base text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-300 dark:hover:bg-surface-700 dark:hover:text-gray-100\"\n          [attr.aria-label]=\"actionsLabel()\"\n          [mtTooltip]=\"actionsLabel()\"\n          tooltipPosition=\"top\"\n          (click)=\"onCardActionsToggle($event, cardPopover, card)\"\n        >\n          <mt-icon icon=\"general.dots-vertical\" class=\"text-base\" />\n        </button>\n        <p-popover #cardPopover appendTo=\"body\">\n          <div class=\"flex min-w-44 flex-col gap-1 p-1\">\n            @if (isCardActionsLoading(card)) {\n              <div class=\"flex flex-col gap-2 p-1\">\n                <p-skeleton height=\"1.75rem\" />\n                <p-skeleton height=\"1.75rem\" />\n                <p-skeleton height=\"1.75rem\" />\n              </div>\n            } @else {\n              @for (action of menuActionsForCard(card); track $index) {\n                @if (isFirstDestructiveCardAction(card, $index)) {\n                  <hr\n                    class=\"my-1 border-0 border-t border-surface-200 dark:border-surface-700\"\n                  />\n                }\n                <button\n                  type=\"button\"\n                  class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\n                  [class]=\"\n                    action.color === 'danger'\n                      ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\n                      : action.color === 'warn'\n                        ? 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-950'\n                        : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\n                  \"\n                  (click)=\"\n                    runCardAction($event, action, card); cardPopover.hide()\n                  \"\n                >\n                  @if (action.icon) {\n                    <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\n                  }\n                  <span>{{ action.label || action.tooltip }}</span>\n                </button>\n              }\n            }\n          </div>\n        </p-popover>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [".mt-cards-grid{--mt-cards-gap: 1rem;--mt-cards-min: 335px;--mt-cards-track: max( var(--mt-cards-min), (100% - 3 * var(--mt-cards-gap)) / 4 );display:grid;gap:var(--mt-cards-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mt-cards-track)),1fr))}.mt-cards-grid.hidden,.mt-cards-grid[hidden]{display:none}.mt-escalation-marker{border-start-end-radius:.5rem;background:var(--p-button-text-warn-color, var(--p-orange-500, #f59e0b));clip-path:polygon(0 0,100% 0,100% 100%);transition:filter .15s ease}.mt-escalation-marker:dir(rtl){clip-path:polygon(0 0,100% 0,0 100%)}.mt-escalation-marker:hover{filter:brightness(.92)}.mt-escalation-marker:focus-visible{filter:brightness(.92) drop-shadow(0 0 2px var(--p-button-text-warn-color, #f59e0b));outline:none}\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  [actions]=\"toolbarActions()\"\r\n  [captionStart]=\"cardsState().config.toolbarStart ?? null\"\r\n  [captionEnd]=\"cardsState().config.toolbarEnd ?? null\"\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 (badgeLegend().length > 0) {\r\n  <!--\r\n    Decodes the coloured count pills on the cards below. Rendered once for the\r\n    whole board rather than per card, so it costs one line of vertical space\r\n    instead of repeating a key inside every tile (finding M-04).\r\n  -->\r\n  <div\r\n    class=\"mb-3 flex flex-wrap items-center gap-x-4 gap-y-2 px-1\"\r\n    role=\"list\"\r\n    [attr.aria-label]=\"\r\n      'components.clientComponents.list.badgeLegend' | transloco\r\n    \"\r\n  >\r\n    <span class=\"text-xs font-medium text-gray-500 dark:text-gray-400\">\r\n      {{ \"components.clientComponents.list.badgeLegend\" | transloco }}\r\n    </span>\r\n    @for (entry of badgeLegend(); track entry.key) {\r\n      <span class=\"flex items-center gap-1.5\" role=\"listitem\">\r\n        <span\r\n          class=\"inline-flex h-4 min-w-4 items-center justify-center rounded text-[10px] font-bold\"\r\n          [style.background-color]=\"entry.color\"\r\n          [style.color]=\"entry.textColor\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          #\r\n        </span>\r\n        <span class=\"text-xs text-gray-600 dark:text-gray-300\">{{\r\n          entry.label\r\n        }}</span>\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"mt-cards-grid\">\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  <!--\r\n    The same empty state the tables use, so a board and a list stop looking like\r\n    two products (finding H-12). A board narrowed by a search or a filter says\r\n    so and offers to clear it, instead of the bare grey \"No cards found.\"\r\n  -->\r\n  <mt-empty-state\r\n    [variant]=\"hasActiveCardFilters() ? 'filtered' : 'empty'\"\r\n    [title]=\"\r\n      hasActiveCardFilters()\r\n        ? ''\r\n        : ('components.clientComponents.list.noCardsFound' | transloco)\r\n    \"\r\n    [actionLabel]=\"\r\n      hasActiveCardFilters()\r\n        ? ('components.emptyState.clearFilters' | transloco)\r\n        : ''\r\n    \"\r\n    actionIcon=\"general.x-close\"\r\n    (actionClick)=\"clearCardFilters()\"\r\n  />\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=\"mt-cards-grid\">\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]=\"filterByThisLabel()\"\r\n                  [activeTooltip]=\"clearFilterLabel()\"\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=\"mt-cards-grid\">\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]=\"filterByThisLabel()\"\r\n              [activeTooltip]=\"clearFilterLabel()\"\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  Infinite-scroll trigger. Deliberately outside the @if/@else chain above:\r\n  inside it the element would be torn down and rebuilt every time the view\r\n  swapped branch (error, empty filter result, group-by), and the observer\r\n  would be left watching a detached node. Kept in the DOM and hidden via CSS\r\n  when there is nothing left to load, so appending a page never recreates it.\r\n  It also has to sit outside so infinite scroll keeps working while a\r\n  group-by is active \u2014 grouping is a pure FE view over whatever has been\r\n  fetched, not a reason to stop fetching.\r\n-->\r\n<div\r\n  #loadMoreSentinel\r\n  class=\"mt-cards-grid py-4\"\r\n  [class.hidden]=\"!hasMoreCards()\"\r\n>\r\n  @for (i of [1, 2, 3]; track i) {\r\n    <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n  }\r\n</div>\r\n\r\n<!--\r\n  Per-card escalation marker and 3-dots actions menu. The compact corner cover\r\n  only indicates active escalation state; its preview action lives in the menu\r\n  so the marker never displaces or competes with the menu trigger.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @let escalationAction = escalationMarkerAction(card);\r\n  @if (escalationAction) {\r\n    <span\r\n      class=\"mt-escalation-marker absolute end-0 top-0 z-10 h-[18px] w-[20px]\"\r\n      role=\"img\"\r\n      tabindex=\"0\"\r\n      [attr.aria-label]=\"escalationLabel()\"\r\n      [mtTooltip]=\"escalationLabel()\"\r\n      tooltipPosition=\"top\"\r\n    ></span>\r\n  }\r\n  @if (rowActions().length > 0) {\r\n    <div\r\n      class=\"absolute end-2 top-2 z-20 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        <button\r\n          type=\"button\"\r\n          class=\"flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-base text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:text-gray-300 dark:hover:bg-surface-700 dark:hover:text-gray-100\"\r\n          [attr.aria-label]=\"actionsLabel()\"\r\n          [mtTooltip]=\"actionsLabel()\"\r\n          tooltipPosition=\"top\"\r\n          (click)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n        >\r\n          <mt-icon icon=\"general.dots-vertical\" class=\"text-base\" />\r\n        </button>\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                @if (isFirstDestructiveCardAction(card, $index)) {\r\n                  <hr\r\n                    class=\"my-1 border-0 border-t border-surface-200 dark:border-surface-700\"\r\n                  />\r\n                }\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                      : action.color === 'warn'\r\n                        ? 'text-orange-600 hover:bg-orange-50 dark:text-orange-400 dark:hover:bg-orange-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", styles: [".mt-cards-grid{--mt-cards-gap: 1rem;--mt-cards-min: 335px;--mt-cards-track: max( var(--mt-cards-min), (100% - 3 * var(--mt-cards-gap)) / 4 );display:grid;gap:var(--mt-cards-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mt-cards-track)),1fr))}.mt-cards-grid.hidden,.mt-cards-grid[hidden]{display:none}.mt-escalation-marker{border-start-end-radius:.5rem;background:var(--p-button-text-warn-color, var(--p-orange-500, #f59e0b));clip-path:polygon(0 0,100% 0,100% 100%);transition:filter .15s ease}.mt-escalation-marker:dir(rtl){clip-path:polygon(0 0,100% 0,0 100%)}.mt-escalation-marker:hover{filter:brightness(.92)}.mt-escalation-marker:focus-visible{filter:brightness(.92) drop-shadow(0 0 2px var(--p-button-text-warn-color, #f59e0b));outline:none}\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"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], rowActionsRequested: [{ type: i0.Output, args: ["rowActionsRequested"] }], loadMoreSentinel: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }] } });
 
 const DEFAULT_GRID_COLUMNS$1 = 12;
@@ -2043,11 +2232,11 @@ class ClientListInformativeView {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListInformativeView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListInformativeView, isStandalone: true, selector: "mt-client-list-informative-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (informativeState().config.contentStart) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.startSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    [style.gridColumn]=\"\r\n      slotGridSpan(informativeState().config.layout.tableSpan)\r\n    \"\r\n  >\r\n    <mt-card>\r\n      @if (\r\n        informativeState().loading &&\r\n        !informativeState().dashboardData?.charts?.length\r\n      ) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"6rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n        </div>\r\n      } @else if (informativeState().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          {{ informativeState().error }}\r\n        </div>\r\n      } @else if (!informativeState().dashboardData?.charts?.length) {\r\n        <div class=\"p-6 text-center text-gray-400\">\r\n          {{\r\n            \"components.clientComponents.list.noInformativeDashboard\"\r\n              | transloco\r\n          }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"min-h-[420px]\">\r\n          <mt-dashboard-viewer\r\n            [isPage]=\"false\"\r\n            [showFilters]=\"false\"\r\n            [dashboardData]=\"informativeState().dashboardData\"\r\n            [extraFilters]=\"dashboardExtraFilters()\"\r\n          />\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (informativeState().config.contentEnd) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.endSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DashboardViewer, selector: "mt-dashboard-viewer", inputs: ["isPage", "pageTitle", "backButton", "pageId", "dashboardData", "chartsData", "dialogsData", "filtersData", "extraFilters", "lookups", "statuses", "levelsSchema", "levelLogsResolver", "showFilters", "showFilterTrigger", "ignoreQueryFilter"], outputs: ["pageLoaded", "onBack", "chartClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListInformativeView, isStandalone: true, selector: "mt-client-list-informative-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n  @if (informativeState().config.contentStart) {\n    <div\n      [style.gridColumn]=\"\n        slotGridSpan(informativeState().config.layout.startSpan)\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\n      />\n    </div>\n  }\n\n  <div\n    [style.gridColumn]=\"\n      slotGridSpan(informativeState().config.layout.tableSpan)\n    \"\n  >\n    <mt-card>\n      @if (\n        informativeState().loading &&\n        !informativeState().dashboardData?.charts?.length\n      ) {\n        <div class=\"flex flex-col gap-3 py-3\">\n          <p-skeleton height=\"6rem\" />\n          <p-skeleton height=\"12rem\" />\n          <p-skeleton height=\"12rem\" />\n        </div>\n      } @else if (informativeState().error) {\n        <div\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\n        >\n          {{ informativeState().error }}\n        </div>\n      } @else if (!informativeState().dashboardData?.charts?.length) {\n        <div class=\"p-6 text-center text-gray-400\">\n          {{\n            \"components.clientComponents.list.noInformativeDashboard\"\n              | transloco\n          }}\n        </div>\n      } @else {\n        <div class=\"min-h-[420px]\">\n          <mt-dashboard-viewer\n            [isPage]=\"false\"\n            [showFilters]=\"false\"\n            [dashboardData]=\"informativeState().dashboardData\"\n            [extraFilters]=\"dashboardExtraFilters()\"\n          />\n        </div>\n      }\n    </mt-card>\n  </div>\n\n  @if (informativeState().config.contentEnd) {\n    <div\n      [style.gridColumn]=\"\n        slotGridSpan(informativeState().config.layout.endSpan)\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\n      />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DashboardViewer, selector: "mt-dashboard-viewer", inputs: ["isPage", "pageTitle", "backButton", "pageId", "dashboardData", "chartsData", "dialogsData", "filtersData", "extraFilters", "lookups", "statuses", "levelsSchema", "levelLogsResolver", "showFilters", "showFilterTrigger", "ignoreQueryFilter"], outputs: ["pageLoaded", "onBack", "chartClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListInformativeView, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-client-list-informative-view', standalone: true, imports: [CommonModule, Card, DashboardViewer, SkeletonModule, TranslocoPipe], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (informativeState().config.contentStart) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.startSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    [style.gridColumn]=\"\r\n      slotGridSpan(informativeState().config.layout.tableSpan)\r\n    \"\r\n  >\r\n    <mt-card>\r\n      @if (\r\n        informativeState().loading &&\r\n        !informativeState().dashboardData?.charts?.length\r\n      ) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"6rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n        </div>\r\n      } @else if (informativeState().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          {{ informativeState().error }}\r\n        </div>\r\n      } @else if (!informativeState().dashboardData?.charts?.length) {\r\n        <div class=\"p-6 text-center text-gray-400\">\r\n          {{\r\n            \"components.clientComponents.list.noInformativeDashboard\"\r\n              | transloco\r\n          }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"min-h-[420px]\">\r\n          <mt-dashboard-viewer\r\n            [isPage]=\"false\"\r\n            [showFilters]=\"false\"\r\n            [dashboardData]=\"informativeState().dashboardData\"\r\n            [extraFilters]=\"dashboardExtraFilters()\"\r\n          />\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (informativeState().config.contentEnd) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.endSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+            args: [{ selector: 'mt-client-list-informative-view', standalone: true, imports: [CommonModule, Card, DashboardViewer, SkeletonModule, TranslocoPipe], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n  @if (informativeState().config.contentStart) {\n    <div\n      [style.gridColumn]=\"\n        slotGridSpan(informativeState().config.layout.startSpan)\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\n      />\n    </div>\n  }\n\n  <div\n    [style.gridColumn]=\"\n      slotGridSpan(informativeState().config.layout.tableSpan)\n    \"\n  >\n    <mt-card>\n      @if (\n        informativeState().loading &&\n        !informativeState().dashboardData?.charts?.length\n      ) {\n        <div class=\"flex flex-col gap-3 py-3\">\n          <p-skeleton height=\"6rem\" />\n          <p-skeleton height=\"12rem\" />\n          <p-skeleton height=\"12rem\" />\n        </div>\n      } @else if (informativeState().error) {\n        <div\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\n        >\n          {{ informativeState().error }}\n        </div>\n      } @else if (!informativeState().dashboardData?.charts?.length) {\n        <div class=\"p-6 text-center text-gray-400\">\n          {{\n            \"components.clientComponents.list.noInformativeDashboard\"\n              | transloco\n          }}\n        </div>\n      } @else {\n        <div class=\"min-h-[420px]\">\n          <mt-dashboard-viewer\n            [isPage]=\"false\"\n            [showFilters]=\"false\"\n            [dashboardData]=\"informativeState().dashboardData\"\n            [extraFilters]=\"dashboardExtraFilters()\"\n          />\n        </div>\n      }\n    </mt-card>\n  </div>\n\n  @if (informativeState().config.contentEnd) {\n    <div\n      [style.gridColumn]=\"\n        slotGridSpan(informativeState().config.layout.endSpan)\n      \"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\n      />\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
 
 function mergeRuntimeFilters(configured = [], runtime = {}, columns = []) {
@@ -2998,7 +3187,7 @@ class ClientList {
         this.state.setLoading(key, true);
         this.state.setError(key, null);
         const sub = this.api
-            .getCards(config.contextKey, filters, config.isPaginated ? skip : undefined, config.isPaginated ? take : undefined)
+            .getCards(config.contextKey, filters, config.isPaginated ? skip : undefined, config.isPaginated ? take : undefined, config.hierarchy)
             .subscribe({
             next: (response) => {
                 let hasLoadedData = false;
@@ -3095,15 +3284,18 @@ class ClientList {
         return (columnKeys ?? []).length > 0 ? 'override' : DEFAULT_MODE;
     }
     /**
-     * Descendant scope only survives where the backend accepts it: a table, with
-     * a usable root id. Anywhere else it is dropped rather than sent, because
-     * the backend answers an unsupported combination with a 400 that takes the
-     * whole list down — a cards area that happens to share a config object would
-     * otherwise render nothing at all.
+     * Descendant scope only survives where it can actually be fetched: a table
+     * or a cards board, with a usable root id. An informative dashboard drops it
+     * rather than sending it, because the backend answers an unsupported
+     * combination with a 400 that takes the whole list down.
+     *
+     * A cards board does not send it as `Card` either — the backend takes
+     * descendant scope on `Table` only. `ClientListApiService.getCards` fetches
+     * the hierarchy table and re-dresses it as cards.
      */
     resolveHierarchyScope(config, areaType) {
         const scope = config?.hierarchy;
-        if (!scope || areaType !== 'table')
+        if (!scope || (areaType !== 'table' && areaType !== 'cards'))
             return null;
         const rootId = this.resolvePositiveInteger(scope.rootId);
         return rootId == null ? null : { ...scope, rootId };
@@ -3323,6 +3515,9 @@ class ClientList {
             config.contextKey ?? 'x',
             this.serializeFilters(filters),
             'Card',
+            // Two boards on the same context and filters are still different
+            // fetches when they are rooted at different records.
+            this.serializeHierarchy(config.hierarchy),
             config.isPaginated ? skip : 0,
             config.isPaginated ? take : 0,
         ].join('|');
@@ -3382,7 +3577,7 @@ class ClientList {
             ClientListStateService,
             ClientListRuntimeActionsService,
             ClientListToolbarService,
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\r\n  @for (item of items(); track item.key) {\r\n    <section class=\"flex flex-col gap-4\">\r\n      @if (item.config.showHeader) {\r\n        <div class=\"flex w-full items-center gap-2\">\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            @if (item.config.collapse.enabled) {\r\n              <mt-button\r\n                variant=\"text\"\r\n                severity=\"secondary\"\r\n                [icon]=\"\r\n                  item.expanded\r\n                    ? item.config.collapse.collapseIcon\r\n                    : item.config.collapse.expandIcon\r\n                \"\r\n                (onClick)=\"toggleExpanded(item.key)\"\r\n              />\r\n            }\r\n            <h3 class=\"m-0 text-lg font-semibold\">\r\n              {{ item.title || item.moduleKey || defaultTitle(item) }}\r\n            </h3>\r\n            @if (item.config.headerStart) {\r\n              <div class=\"flex items-center gap-2\">\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\r\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\r\n                />\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (item.config.headerEnd) {\r\n            <div class=\"ml-auto flex shrink-0 items-center gap-2\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"item.config.headerEnd\"\r\n                [ngTemplateOutletContext]=\"templateContext(item)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (item.expanded || !item.config.collapse.enabled) {\r\n        @if (item.config.templateContent) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"item.config.templateContent\"\r\n            [ngTemplateOutletContext]=\"templateContext(item)\"\r\n          />\r\n        } @else if (item.type === \"informative\") {\r\n          <mt-client-list-informative-view [state]=\"item\" />\r\n        } @else if (item.areaType === \"table\") {\r\n          <mt-client-list-table-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"rowActionsFor(item)\"\r\n            [actionShape]=\"item.config.actionShape\"\r\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\r\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (rowClick)=\"onTableRowClick(item, $event)\"\r\n          />\r\n        } @else {\r\n          <mt-client-list-cards-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"rowActionsFor(item)\"\r\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\r\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (loadMore)=\"loadMoreCards(item.key)\"\r\n            (cardClick)=\"onCardClick(item, $event)\"\r\n          />\r\n        }\r\n      }\r\n    </section>\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: 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientListTableView, selector: "mt-client-list-table-view", inputs: ["state", "rowActions", "actionShape", "rowActionsLoadingFn"], outputs: ["lazyLoad", "rowClick", "rowActionsRequested"] }, { kind: "component", type: ClientListCardsView, selector: "mt-client-list-cards-view", inputs: ["state", "rowActions", "rowActionsLoadingFn"], outputs: ["lazyLoad", "loadMore", "cardClick", "rowActionsRequested"] }, { kind: "component", type: ClientListInformativeView, selector: "mt-client-list-informative-view", inputs: ["state"] }] });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  @for (item of items(); track item.key) {\n    <section class=\"flex flex-col gap-4\">\n      @if (item.config.showHeader) {\n        <div class=\"flex w-full items-center gap-2\">\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n            @if (item.config.collapse.enabled) {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                [icon]=\"\n                  item.expanded\n                    ? item.config.collapse.collapseIcon\n                    : item.config.collapse.expandIcon\n                \"\n                (onClick)=\"toggleExpanded(item.key)\"\n              />\n            }\n            <h3 class=\"m-0 text-lg font-semibold\">\n              {{ item.title || item.moduleKey || defaultTitle(item) }}\n            </h3>\n            @if (item.config.headerStart) {\n              <div class=\"flex items-center gap-2\">\n                <ng-container\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\n                />\n              </div>\n            }\n          </div>\n          @if (item.config.headerEnd) {\n            <div class=\"ml-auto flex shrink-0 items-center gap-2\">\n              <ng-container\n                [ngTemplateOutlet]=\"item.config.headerEnd\"\n                [ngTemplateOutletContext]=\"templateContext(item)\"\n              />\n            </div>\n          }\n        </div>\n      }\n\n      @if (item.expanded || !item.config.collapse.enabled) {\n        @if (item.config.templateContent) {\n          <ng-container\n            [ngTemplateOutlet]=\"item.config.templateContent\"\n            [ngTemplateOutletContext]=\"templateContext(item)\"\n          />\n        } @else if (item.type === \"informative\") {\n          <mt-client-list-informative-view [state]=\"item\" />\n        } @else if (item.areaType === \"table\") {\n          <mt-client-list-table-view\n            [state]=\"item\"\n            [rowActions]=\"rowActionsFor(item)\"\n            [actionShape]=\"item.config.actionShape\"\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n            (rowClick)=\"onTableRowClick(item, $event)\"\n          />\n        } @else {\n          <mt-client-list-cards-view\n            [state]=\"item\"\n            [rowActions]=\"rowActionsFor(item)\"\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n            (loadMore)=\"loadMoreCards(item.key)\"\n            (cardClick)=\"onCardClick(item, $event)\"\n          />\n        }\n      }\n    </section>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientListTableView, selector: "mt-client-list-table-view", inputs: ["state", "rowActions", "actionShape", "rowActionsLoadingFn"], outputs: ["lazyLoad", "rowClick", "rowActionsRequested"] }, { kind: "component", type: ClientListCardsView, selector: "mt-client-list-cards-view", inputs: ["state", "rowActions", "rowActionsLoadingFn"], outputs: ["lazyLoad", "loadMore", "cardClick", "rowActionsRequested"] }, { kind: "component", type: ClientListInformativeView, selector: "mt-client-list-informative-view", inputs: ["state"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientList, decorators: [{
             type: Component,
@@ -3396,7 +3591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ClientListStateService,
                         ClientListRuntimeActionsService,
                         ClientListToolbarService,
-                    ], template: "<div class=\"flex flex-col gap-4\">\r\n  @for (item of items(); track item.key) {\r\n    <section class=\"flex flex-col gap-4\">\r\n      @if (item.config.showHeader) {\r\n        <div class=\"flex w-full items-center gap-2\">\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            @if (item.config.collapse.enabled) {\r\n              <mt-button\r\n                variant=\"text\"\r\n                severity=\"secondary\"\r\n                [icon]=\"\r\n                  item.expanded\r\n                    ? item.config.collapse.collapseIcon\r\n                    : item.config.collapse.expandIcon\r\n                \"\r\n                (onClick)=\"toggleExpanded(item.key)\"\r\n              />\r\n            }\r\n            <h3 class=\"m-0 text-lg font-semibold\">\r\n              {{ item.title || item.moduleKey || defaultTitle(item) }}\r\n            </h3>\r\n            @if (item.config.headerStart) {\r\n              <div class=\"flex items-center gap-2\">\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\r\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\r\n                />\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (item.config.headerEnd) {\r\n            <div class=\"ml-auto flex shrink-0 items-center gap-2\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"item.config.headerEnd\"\r\n                [ngTemplateOutletContext]=\"templateContext(item)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (item.expanded || !item.config.collapse.enabled) {\r\n        @if (item.config.templateContent) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"item.config.templateContent\"\r\n            [ngTemplateOutletContext]=\"templateContext(item)\"\r\n          />\r\n        } @else if (item.type === \"informative\") {\r\n          <mt-client-list-informative-view [state]=\"item\" />\r\n        } @else if (item.areaType === \"table\") {\r\n          <mt-client-list-table-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"rowActionsFor(item)\"\r\n            [actionShape]=\"item.config.actionShape\"\r\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\r\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (rowClick)=\"onTableRowClick(item, $event)\"\r\n          />\r\n        } @else {\r\n          <mt-client-list-cards-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"rowActionsFor(item)\"\r\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\r\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (loadMore)=\"loadMoreCards(item.key)\"\r\n            (cardClick)=\"onCardClick(item, $event)\"\r\n          />\r\n        }\r\n      }\r\n    </section>\r\n  }\r\n</div>\r\n" }]
+                    ], template: "<div class=\"flex flex-col gap-4\">\n  @for (item of items(); track item.key) {\n    <section class=\"flex flex-col gap-4\">\n      @if (item.config.showHeader) {\n        <div class=\"flex w-full items-center gap-2\">\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n            @if (item.config.collapse.enabled) {\n              <mt-button\n                variant=\"text\"\n                severity=\"secondary\"\n                [icon]=\"\n                  item.expanded\n                    ? item.config.collapse.collapseIcon\n                    : item.config.collapse.expandIcon\n                \"\n                (onClick)=\"toggleExpanded(item.key)\"\n              />\n            }\n            <h3 class=\"m-0 text-lg font-semibold\">\n              {{ item.title || item.moduleKey || defaultTitle(item) }}\n            </h3>\n            @if (item.config.headerStart) {\n              <div class=\"flex items-center gap-2\">\n                <ng-container\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\n                />\n              </div>\n            }\n          </div>\n          @if (item.config.headerEnd) {\n            <div class=\"ml-auto flex shrink-0 items-center gap-2\">\n              <ng-container\n                [ngTemplateOutlet]=\"item.config.headerEnd\"\n                [ngTemplateOutletContext]=\"templateContext(item)\"\n              />\n            </div>\n          }\n        </div>\n      }\n\n      @if (item.expanded || !item.config.collapse.enabled) {\n        @if (item.config.templateContent) {\n          <ng-container\n            [ngTemplateOutlet]=\"item.config.templateContent\"\n            [ngTemplateOutletContext]=\"templateContext(item)\"\n          />\n        } @else if (item.type === \"informative\") {\n          <mt-client-list-informative-view [state]=\"item\" />\n        } @else if (item.areaType === \"table\") {\n          <mt-client-list-table-view\n            [state]=\"item\"\n            [rowActions]=\"rowActionsFor(item)\"\n            [actionShape]=\"item.config.actionShape\"\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n            (rowClick)=\"onTableRowClick(item, $event)\"\n          />\n        } @else {\n          <mt-client-list-cards-view\n            [state]=\"item\"\n            [rowActions]=\"rowActionsFor(item)\"\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n            (loadMore)=\"loadMoreCards(item.key)\"\n            (cardClick)=\"onCardClick(item, $event)\"\n          />\n        }\n      }\n    </section>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { configurations: [{ type: i0.Input, args: [{ isSignal: true, alias: "configurations", required: true }] }], defaultTake: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTake", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
 
 /**