@masterteam/client-components 0.0.78 → 0.0.80

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, input, output, Component, viewChild, effect, untracked } from '@angular/core';
+import { inject, Injectable, signal, computed, input, output, Component, viewChild, effect, untracked, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@jsverse/transloco';
@@ -14,10 +14,11 @@ import * as i2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Card } from '@masterteam/components/card';
+import { EmptyState } from '@masterteam/components/empty-state';
 import { Tooltip } from '@masterteam/components/tooltip';
 import { Icon } from '@masterteam/icons';
 import { ConfirmationService } from '@masterteam/components/confirmation';
-import { MTDateFormatPipe } from '@masterteam/components';
+import { MTDateFormatPipe, readableTextOn } from '@masterteam/components';
 import * as i3 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import { DashboardViewer } from '@masterteam/dashboard-builder';
@@ -893,7 +894,7 @@ 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        [rowActions]=\"rowActions()\"\r\n        [actionShape]=\"actionShape()\"\r\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\r\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\r\n        [generalSearch]=\"table().config.table.searchable\"\r\n        [showFilters]=\"true\"\r\n        filterMode=\"column\"\r\n        [printable]=\"true\"\r\n        [groupable]=\"true\"\r\n        [cellClickFilter]=\"true\"\r\n        [freezeActions]=\"true\"\r\n        [exportable]=\"table().config.table.exportable\"\r\n        [loading]=\"table().loading\"\r\n        [clickableRows]=\"true\"\r\n        [lazy]=\"table().config.isPaginated\"\r\n        [lazyTotalRecords]=\"table().totalCount\"\r\n        [virtualScroll]=\"!table().config.isPaginated\"\r\n        [virtualScrollItemSize]=\"56\"\r\n        scrollHeight=\"520px\"\r\n        [pageSize]=\"pageSize()\"\r\n        [filters]=\"bucket().filters()\"\r\n        (filtersChange)=\"bucket().filters.set($event)\"\r\n        [filterTerm]=\"bucket().filterTerm()\"\r\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n        [groupBy]=\"bucket().groupBy()\"\r\n        (groupByChange)=\"bucket().groupBy.set($event)\"\r\n        [activeTab]=\"bucket().activeTab()\"\r\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n        (lazyLoad)=\"lazyLoad.emit($event)\"\r\n        (rowClick)=\"rowClick.emit($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "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\">\r\n  @if (table().config.contentStart) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\r\n    @if (table().loading && table().rows.length === 0) {\r\n      <div class=\"flex flex-col gap-3 py-3\">\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n      </div>\r\n    } @else if (table().error) {\r\n      <div\r\n        class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n      >\r\n        {{ table().error }}\r\n      </div>\r\n    } @else {\r\n      <mt-table\r\n        [noCard]=\"true\"\r\n        [data]=\"table().rows\"\r\n        [columns]=\"table().columns\"\r\n        dataKey=\"Id\"\r\n        [storageKey]=\"tableStorageKey()\"\r\n        [persistStateExclude]=\"table().config.table.persistStateExclude\"\r\n        [rowActions]=\"rowActions()\"\r\n        [actionShape]=\"actionShape()\"\r\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\r\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\r\n        [generalSearch]=\"table().config.table.searchable\"\r\n        [showFilters]=\"true\"\r\n        filterMode=\"column\"\r\n        [printable]=\"true\"\r\n        [groupable]=\"true\"\r\n        [cellClickFilter]=\"true\"\r\n        [freezeActions]=\"true\"\r\n        [exportable]=\"table().config.table.exportable\"\r\n        [loading]=\"table().loading\"\r\n        [clickableRows]=\"true\"\r\n        [lazy]=\"table().config.isPaginated\"\r\n        [lazyTotalRecords]=\"table().totalCount\"\r\n        [virtualScroll]=\"!table().config.isPaginated\"\r\n        [virtualScrollItemSize]=\"56\"\r\n        scrollHeight=\"520px\"\r\n        [pageSize]=\"pageSize()\"\r\n        [filters]=\"bucket().filters()\"\r\n        (filtersChange)=\"bucket().filters.set($event)\"\r\n        [filterTerm]=\"bucket().filterTerm()\"\r\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n        [groupBy]=\"bucket().groupBy()\"\r\n        (groupByChange)=\"bucket().groupBy.set($event)\"\r\n        [activeTab]=\"bucket().activeTab()\"\r\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n        (lazyLoad)=\"lazyLoad.emit($event)\"\r\n        (rowClick)=\"rowClick.emit($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "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,
@@ -901,12 +902,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }], 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();
+/** Shared fallback so cards without an entry keep a stable identity. */
+const EMPTY_CARD_ACTION_SET = {
+    inline: [],
+    menu: [],
+    escalationMarker: null,
+};
 /**
  * How far ahead of the viewport the infinite-scroll sentinel counts as
  * visible — roughly one card row, so the next page is already in flight by
  * the time the user reaches the bottom of the grid.
  */
 const LOAD_MORE_ROOT_MARGIN = '400px';
+/** Deleting, or anything the caller flagged `danger`. Mirrors `mt-table`. */
+function isDestructiveAction(action) {
+    if (!action) {
+        return false;
+    }
+    return (action.color === 'danger' ||
+        action.confirmation?.confirmationType === 'delete');
+}
+/** Matches the neutral fallback `mt-entity-leaf-details` paints an uncoloured status. */
+const DEFAULT_BADGE_COLOR = '#9CA3AF';
 class ClientListCardsView {
     toolbar = inject(ClientListToolbarService);
     exportService = inject(TableExportService);
@@ -944,14 +961,29 @@ class ClientListCardsView {
     hasActiveFilter = computed(() => Object.keys(this.bucket().filters()).length > 0 ||
         this.bucket().filterTerm().trim().length > 0, ...(ngDevMode ? [{ debugName: "hasActiveFilter" }] : /* istanbul ignore next */ []));
     /**
+     * A language-reactive label.
+     *
      * `translate()` is a plain call, not a signal, so a computed that used it
      * directly would keep the label in whatever language was active when it
      * first ran. `selectTranslate` re-emits on language switch *and* once the
      * new language's file has loaded.
+     *
+     * Every label the card loop needs is hoisted through here rather than left
+     * as `| transloco` in the template: that pipe is impure, so each occurrence
+     * inside the loop was one more pipe instance re-running on every check of
+     * every card in the grid.
      */
-    resetLabel = toSignal(this.transloco.selectTranslate('components.table.reset'), {
-        initialValue: this.transloco.translate('components.table.reset'),
-    });
+    label(key) {
+        return toSignal(this.transloco.selectTranslate(key), {
+            initialValue: this.transloco.translate(key),
+        });
+    }
+    resetLabel = this.label('components.table.reset');
+    /** Entity click-to-filter affordance tooltips, one instance for the grid. */
+    filterByThisLabel = this.label('components.table.filterByThis');
+    clearFilterLabel = this.label('components.table.clearFilter');
+    actionsLabel = this.label('components.table.actions');
+    escalationLabel = this.label('components.clientComponents.list.hasActiveEscalation');
     /** Caption toolbar action: clears both column filters and the search
      * term. For paginated (server-driven) cards this also re-triggers the
      * filter-change effect below, which re-fetches page 1 without any
@@ -1055,25 +1087,99 @@ class ClientListCardsView {
     rowForCard(card) {
         return this.rowByCard().get(card) ?? this.cardToRow(card);
     }
-    /** Visible (non-hidden) actions for a card — mirrors the table's filter. */
-    visibleActionsForCard(card) {
-        const row = this.rowForCard(card);
-        return this.rowActions().filter((action) => !action.hidden?.(row));
+    /**
+     * Every card's actions, already filtered by `hidden` and split into the
+     * three buckets the template renders (inline buttons, 3-dots menu,
+     * escalation corner marker).
+     *
+     * Memoized rather than derived per template call on purpose: the four call
+     * sites below each used to re-run `hidden()` across the whole action list,
+     * so a single card cost four full passes — on every change detection tick,
+     * for every card in the grid. `rowActions()` is rebuilt with a new array
+     * identity whenever the runtime-action cache its predicates close over
+     * changes, so this stays correct without re-evaluating on every pass.
+     */
+    actionsByCard = computed(() => {
+        const actions = this.rowActions();
+        const rows = this.rowByCard();
+        const map = new Map();
+        for (const card of this.cardsState().cards) {
+            const row = rows.get(card) ?? this.cardToRow(card);
+            const inline = [];
+            const menu = [];
+            let escalationMarker = null;
+            for (const action of actions) {
+                if (action.hidden?.(row))
+                    continue;
+                if (this.isCardMarkerAction(action)) {
+                    escalationMarker ??= action;
+                    menu.push(action);
+                }
+                else if (this.actionPlacement(action) === 'inline') {
+                    inline.push(action);
+                }
+                else {
+                    menu.push(action);
+                }
+            }
+            // Destructive actions last, so the irreversible one is never adjacent to
+            // the two most common ones (finding M-07). Sorted here rather than at
+            // read time so it costs one pass per card, not one per change detection.
+            map.set(card, {
+                inline,
+                menu: [
+                    ...menu.filter((action) => !isDestructiveAction(action)),
+                    ...menu.filter((action) => isDestructiveAction(action)),
+                ],
+                escalationMarker,
+            });
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "actionsByCard" }] : /* istanbul ignore next */ []));
+    actionsFor(card) {
+        return this.actionsByCard().get(card) ?? EMPTY_CARD_ACTION_SET;
     }
     inlineActionsForCard(card) {
-        return this.visibleActionsForCard(card).filter((action) => this.actionPlacement(action) === 'inline' &&
-            !this.isCardMarkerAction(action));
+        return this.actionsFor(card).inline;
     }
     escalationMarkerAction(card) {
-        return (this.visibleActionsForCard(card).find((action) => this.isCardMarkerAction(action)) ?? null);
+        return this.actionsFor(card).escalationMarker;
     }
+    /**
+     * Menu actions with the destructive ones moved to the bottom, matching the
+     * table's row menu. A card and a row are the same record in two shapes, so
+     * the irreversible action has to sit in the same place in both (finding
+     * M-07).
+     */
     menuActionsForCard(card) {
-        return this.visibleActionsForCard(card).filter((action) => this.isCardMarkerAction(action) ||
-            this.actionPlacement(action) !== 'inline');
+        return this.actionsFor(card).menu;
+    }
+    /** Whether the user narrowed the board themselves — drives the empty state. */
+    hasActiveCardFilters() {
+        const bucket = this.bucket();
+        if (bucket.filterTerm().trim().length > 0) {
+            return true;
+        }
+        return Object.entries(bucket.filters()).some(([key, value]) => key !== 'generalSearch' &&
+            value !== null &&
+            value !== undefined &&
+            value !== '');
+    }
+    clearCardFilters() {
+        this.bucket().filterTerm.set('');
+        this.bucket().filters.set({});
+    }
+    /** True at the first destructive item — where the divider is drawn. */
+    isFirstDestructiveCardAction(card, index) {
+        const menu = this.menuActionsForCard(card);
+        const action = menu[index];
+        return (index > 0 &&
+            !!action &&
+            isDestructiveAction(action) &&
+            !isDestructiveAction(menu[index - 1]));
     }
     showCardActionsMenu(card) {
-        return (this.isCardActionsLoading(card) ||
-            this.menuActionsForCard(card).length > 0);
+        return (this.isCardActionsLoading(card) || this.actionsFor(card).menu.length > 0);
     }
     resolveActionLoading(action, card) {
         const loading = action.loading;
@@ -1189,6 +1295,43 @@ class ClientListCardsView {
             });
         });
     }, ...(ngDevMode ? [{ debugName: "visibleCards" }] : /* istanbul ignore next */ []));
+    /**
+     * Legend for the coloured count badges the cards carry.
+     *
+     * Each card renders a cluster of small coloured pills under a level name
+     * ("Programs (2)") and, before this, nothing on the card or on the page said
+     * what the colours counted — a convention you either had been told offline or
+     * could not decode (finding M-04). The per-badge tooltip names one status at
+     * a time; this names the whole set once, above the board, so the mapping is
+     * readable without hovering anything.
+     *
+     * Built from the cards actually on screen rather than from a catalog call:
+     * the statuses in play are exactly the ones the board is showing, and a
+     * legend listing statuses that appear nowhere would be its own noise. Empty
+     * when no card carries a badge cluster, so boards without them are unchanged.
+     */
+    badgeLegend = computed(() => {
+        const entries = new Map();
+        for (const card of this.visibleCards()) {
+            for (const entity of card.entities ?? []) {
+                if (entity.viewType !== 'LeafDetails')
+                    continue;
+                const value = entity.value;
+                for (const status of value?.statuses ?? []) {
+                    if (!status?.key || entries.has(status.key))
+                        continue;
+                    const color = status.color ?? DEFAULT_BADGE_COLOR;
+                    entries.set(status.key, {
+                        key: status.key,
+                        label: status.display || status.key,
+                        color,
+                        textColor: readableTextOn(color),
+                    });
+                }
+            }
+        }
+        return [...entries.values()];
+    }, ...(ngDevMode ? [{ debugName: "badgeLegend" }] : /* istanbul ignore next */ []));
     /**
      * Grouped cards. Reuses TableGroupingController helpers so the accent color,
      * label, and count rendering match the table's subheader exactly.
@@ -1250,31 +1393,44 @@ class ClientListCardsView {
     }, ...(ngDevMode ? [{ debugName: "clickableEntityKeys" }] : /* istanbul ignore next */ []));
     /**
      * Per-card set of entity keys that match the active filter — passed into
-     * `<mt-entities-preview [activeKeys]>`. Computed lazily per card via the
-     * helper below; bucket changes (filter add / remove) automatically
-     * invalidate any place that reads from this in a template.
+     * `<mt-entities-preview [activeKeys]>`.
+     *
+     * Memoized rather than built per call: the template binds the result
+     * straight into a child input, and minting a fresh `Set` on every call
+     * handed `mt-entities-preview` a new input identity on every change
+     * detection pass, re-rendering every card's entity grid whenever any
+     * filter was active. Cards with no match are left out of the map so they
+     * all share the one `EMPTY_KEY_SET` reference.
      */
-    activeKeysForCard(card) {
+    activeKeysByCard = computed(() => {
+        const map = new Map();
         const filters = this.bucket().filters();
-        const filterKeys = Object.keys(filters);
-        if (filterKeys.length === 0)
-            return EMPTY_KEY_SET;
-        const row = this.cardToRow(card);
-        const result = new Set();
-        for (const key of filterKeys) {
-            if (key === 'generalSearch')
-                continue;
-            const column = this.columns().find((c) => c.key === key);
-            if (!column)
-                continue;
-            const cellTarget = TableValueResolver.buildClickFilterValue(row, column);
-            if (cellTarget === null || cellTarget === undefined)
-                continue;
-            if (TableValueResolver.isFilterValueEqual(filters[key], cellTarget)) {
-                result.add(key);
+        const columns = this.columns();
+        const targets = Object.keys(filters)
+            .filter((key) => key !== 'generalSearch')
+            .map((key) => ({ key, column: columns.find((c) => c.key === key) }))
+            .filter((target) => !!target.column);
+        if (targets.length === 0)
+            return map;
+        const rows = this.rowByCard();
+        for (const card of this.cardsState().cards) {
+            const row = rows.get(card) ?? this.cardToRow(card);
+            const result = new Set();
+            for (const { key, column } of targets) {
+                const cellTarget = TableValueResolver.buildClickFilterValue(row, column);
+                if (cellTarget === null || cellTarget === undefined)
+                    continue;
+                if (TableValueResolver.isFilterValueEqual(filters[key], cellTarget)) {
+                    result.add(key);
+                }
             }
+            if (result.size > 0)
+                map.set(card, result);
         }
-        return result;
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "activeKeysByCard" }] : /* istanbul ignore next */ []));
+    activeKeysForCard(card) {
+        return this.activeKeysByCard().get(card) ?? EMPTY_KEY_SET;
     }
     /**
      * Click-to-filter handler invoked from `<mt-entities-preview (entityClick)>`.
@@ -1464,12 +1620,12 @@ 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\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  [filters]=\"bucket().filters()\"\r\n  (filtersChange)=\"bucket().filters.set($event)\"\r\n  [filterTerm]=\"bucket().filterTerm()\"\r\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n  [groupBy]=\"bucket().groupBy()\"\r\n  (groupByChange)=\"bucket().groupBy.set($event)\"\r\n  [activeTab]=\"bucket().activeTab()\"\r\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n  (exportRequested)=\"exportExcel()\"\r\n  (printRequested)=\"printPdf()\"\r\n/>\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"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  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"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]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"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]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  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]=\"\r\n        'components.clientComponents.list.hasActiveEscalation' | transloco\r\n      \"\r\n      [mtTooltip]=\"\r\n        'components.clientComponents.list.hasActiveEscalation' | transloco\r\n      \"\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]=\"'components.table.actions' | transloco\"\r\n          [mtTooltip]=\"'components.table.actions' | transloco\"\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                <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{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),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"], 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: "pipe", type: i4.TranslocoPipe, name: "transloco" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet, Card,
-                EntitiesPreview, i4.TranslocoPipe]] });
+    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  [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{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),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: [{
             type: Component,
-            args: [{ selector: 'mt-client-list-cards-view', standalone: true, imports: [
+            args: [{ selector: 'mt-client-list-cards-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
                         TranslocoModule,
                         Card,
@@ -1480,7 +1636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SkeletonModule,
                         PopoverModule,
                         TableCaption,
-                    ], providers: [MTDateFormatPipe], template: "<mt-table-caption\r\n  [generalSearch]=\"true\"\r\n  [showFilters]=\"true\"\r\n  filterMode=\"popover\"\r\n  [printable]=\"true\"\r\n  [groupable]=\"true\"\r\n  [exportable]=\"true\"\r\n  [columns]=\"columns()\"\r\n  [data]=\"rowRepresentations()\"\r\n  [groupColumns]=\"grouping.groupableColumns()\"\r\n  [actions]=\"toolbarActions()\"\r\n  [filters]=\"bucket().filters()\"\r\n  (filtersChange)=\"bucket().filters.set($event)\"\r\n  [filterTerm]=\"bucket().filterTerm()\"\r\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n  [groupBy]=\"bucket().groupBy()\"\r\n  (groupByChange)=\"bucket().groupBy.set($event)\"\r\n  [activeTab]=\"bucket().activeTab()\"\r\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n  (exportRequested)=\"exportExcel()\"\r\n  (printRequested)=\"printPdf()\"\r\n/>\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"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  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"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]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"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]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  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]=\"\r\n        'components.clientComponents.list.hasActiveEscalation' | transloco\r\n      \"\r\n      [mtTooltip]=\"\r\n        'components.clientComponents.list.hasActiveEscalation' | transloco\r\n      \"\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]=\"'components.table.actions' | transloco\"\r\n          [mtTooltip]=\"'components.table.actions' | transloco\"\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                <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{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),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"] }]
+                        EmptyState,
+                    ], 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  [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{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),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 }] }] } });
 
 function toDashboardExtraFilters(filters = []) {
@@ -2516,7 +2673,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"], 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\">\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientList, decorators: [{
             type: Component,