@masterteam/client-components 0.0.66 → 0.0.68

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, input, output, Component, effect, untracked } from '@angular/core';
+import { inject, Injectable, signal, computed, input, output, Component, viewChild, effect, untracked } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@jsverse/transloco';
-import { TranslocoModule, TranslocoPipe, TranslocoService } from '@jsverse/transloco';
+import { TranslocoService, TranslocoModule, TranslocoPipe } from '@jsverse/transloco';
 import { Button } from '@masterteam/components/button';
 import { RuntimeActionRunner, resolveActionLabel } from '@masterteam/components/runtime-action';
 import { HttpClient } from '@angular/common/http';
@@ -12,6 +12,7 @@ import { resolveLocalizedLabel, isSectionKey, EntitiesPreview } from '@mastertea
 import { Table, TableExportService, TableGroupingController, TableValueResolver, TableCaption } from '@masterteam/components/table';
 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 { Icon } from '@masterteam/icons';
 import { ConfirmationService } from '@masterteam/components/confirmation';
@@ -37,13 +38,20 @@ class ClientListApiService {
             pageSize: query.take,
         })));
     }
-    getCards(contextKey, filters = []) {
+    getCards(contextKey, filters = [], skip, take) {
+        // `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({
             contextKey,
             projection: 'Card',
             includeState: [...DEFAULT_INCLUDE_STATE],
             filters,
             display: { areas: ['card'] },
+            ...(pageSize === null
+                ? {}
+                : { page: this.toPage(skip ?? 0, pageSize), pageSize }),
         });
     }
     getInformativeDashboard(levelId, moduleId) {
@@ -233,22 +241,45 @@ class ClientListStateService {
             },
         });
     }
-    setCardsResult(key, response, config) {
+    setCardsResult(key, response, config, skip = 0, take = 0, append = false) {
         const target = this.itemsByKey()[key];
         if (!target ||
             target.type === 'informative' ||
             target.areaType !== 'cards') {
             return;
         }
-        const cards = this.toCards(response);
+        const newCards = this.toCards(response);
+        const isAppend = append && config.isPaginated;
+        // Never trust two pages not to overlap. A record inserted or re-sorted
+        // between fetches shifts the window, and the grid tracks by `card.id` —
+        // a repeat would raise NG0955 (duplicate keys) rather than just look odd.
+        const cards = isAppend
+            ? this.concatDistinctCards(target.cards, newCards)
+            : newCards;
         const schema = this.resolvePrimarySchema(response);
-        const firstCardModule = cards[0]?.module;
+        const firstCardModule = newCards[0]?.module;
         const moduleKey = schema?.key ?? firstCardModule?.key ?? target.moduleKey;
         const title = (config.title ?? '').trim() ||
             schema?.name ||
             firstCardModule?.name ||
             moduleKey ||
             target.title;
+        // The backend is the authority on how big a page actually is: it may cap
+        // `pageSize` below what we asked for. Offsets are derived from that
+        // effective size, not from the requested `take` — `toPage()` floors
+        // `skip / take`, so a mismatch would re-request a page we already hold.
+        const effectiveTake = this.resolveEffectivePageSize(response, take);
+        // A page shorter than the effective size is the last page, whatever
+        // `totalCount` claims — without this the sentinel would sit there
+        // showing skeletons for records the backend will never return. A
+        // non-positive size means the response carried no usable paging info at
+        // all, which we also treat as "this is everything".
+        const exhausted = !config.isPaginated ||
+            effectiveTake <= 0 ||
+            newCards.length < effectiveTake;
+        const totalCount = config.isPaginated && !exhausted
+            ? (response.pagination?.totalCount ?? cards.length)
+            : cards.length;
         this.itemsByKey.set({
             ...this.itemsByKey(),
             [key]: {
@@ -258,14 +289,45 @@ class ClientListStateService {
                 columns: [],
                 rows: [],
                 cards,
-                skip: 0,
-                take: 0,
-                totalCount: cards.length,
+                // `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
+                    ? exhausted
+                        ? cards.length
+                        : skip + effectiveTake
+                    : 0,
+                take: config.isPaginated && effectiveTake > 0 ? effectiveTake : target.take,
+                totalCount,
                 error: null,
                 rawData: response,
             },
         });
     }
+    /**
+     * Appends `next` to `current`, dropping any card whose id is already
+     * present. Ids are the grid's `@for` track key, so duplicates are a runtime
+     * error, not a cosmetic issue.
+     */
+    concatDistinctCards(current, next) {
+        if (!next.length)
+            return current;
+        const seen = new Set(current.map((card) => card.id));
+        const fresh = next.filter((card) => !seen.has(card.id));
+        return fresh.length ? [...current, ...fresh] : current;
+    }
+    /**
+     * The page size the backend actually applied, falling back to the size we
+     * asked for. Returns `0` when neither is usable — i.e. the response carried
+     * no paging contract, so there is no stride to walk and the caller should
+     * treat the set as complete.
+     */
+    resolveEffectivePageSize(response, requestedTake) {
+        const serverPageSize = response.pagination?.pageSize;
+        if (typeof serverPageSize === 'number' && serverPageSize > 0) {
+            return serverPageSize;
+        }
+        return requestedTake > 0 ? requestedTake : 0;
+    }
     setInformativeResult(key, response, config) {
         const target = this.itemsByKey()[key];
         if (!target || target.type !== 'informative')
@@ -827,7 +889,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"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListTableView, isStandalone: true, selector: "mt-client-list-table-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, actionShape: { classPropertyName: "actionShape", publicName: "actionShape", isSignal: true, isRequired: false, transformFunction: null }, rowActionsLoadingFn: { classPropertyName: "rowActionsLoadingFn", publicName: "rowActionsLoadingFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", rowClick: "rowClick", rowActionsRequested: "rowActionsRequested" }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (table().config.contentStart) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.startSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div [style.gridColumn]=\"slotGridSpan(table().config.layout.tableSpan)\">\r\n    @if (table().loading && table().rows.length === 0) {\r\n      <div class=\"flex flex-col gap-3 py-3\">\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n        <p-skeleton height=\"3rem\" />\r\n      </div>\r\n    } @else if (table().error) {\r\n      <div\r\n        class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n      >\r\n        {{ table().error }}\r\n      </div>\r\n    } @else {\r\n      <mt-table\r\n        [noCard]=\"true\"\r\n        [data]=\"table().rows\"\r\n        [columns]=\"table().columns\"\r\n        dataKey=\"Id\"\r\n        [storageKey]=\"tableStorageKey()\"\r\n        [persistStateExclude]=\"table().config.table.persistStateExclude\"\r\n        [rowActions]=\"rowActions()\"\r\n        [actionShape]=\"actionShape()\"\r\n        [rowActionsLoadingFn]=\"rowActionsLoadingFn()\"\r\n        (rowActionsRequested)=\"rowActionsRequested.emit($event)\"\r\n        [generalSearch]=\"table().config.table.searchable\"\r\n        [showFilters]=\"true\"\r\n        filterMode=\"column\"\r\n        [printable]=\"true\"\r\n        [groupable]=\"true\"\r\n        [cellClickFilter]=\"true\"\r\n        [freezeActions]=\"true\"\r\n        [exportable]=\"table().config.table.exportable\"\r\n        [loading]=\"table().loading\"\r\n        [clickableRows]=\"true\"\r\n        [lazy]=\"table().config.isPaginated\"\r\n        [lazyTotalRecords]=\"table().totalCount\"\r\n        [virtualScroll]=\"!table().config.isPaginated\"\r\n        [virtualScrollItemSize]=\"56\"\r\n        scrollHeight=\"520px\"\r\n        [pageSize]=\"pageSize()\"\r\n        [filters]=\"bucket().filters()\"\r\n        (filtersChange)=\"bucket().filters.set($event)\"\r\n        [filterTerm]=\"bucket().filterTerm()\"\r\n        (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n        [groupBy]=\"bucket().groupBy()\"\r\n        (groupByChange)=\"bucket().groupBy.set($event)\"\r\n        [activeTab]=\"bucket().activeTab()\"\r\n        (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n        (lazyLoad)=\"lazyLoad.emit($event)\"\r\n        (rowClick)=\"rowClick.emit($event)\"\r\n      />\r\n    }\r\n  </div>\r\n\r\n  @if (table().config.contentEnd) {\r\n    <div [style.gridColumn]=\"slotGridSpan(table().config.layout.endSpan)\">\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"table().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(table())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListTableView, decorators: [{
             type: Component,
@@ -835,11 +897,18 @@ 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();
+/**
+ * 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';
 class ClientListCardsView {
     toolbar = inject(ClientListToolbarService);
     exportService = inject(TableExportService);
     dateFormat = inject(MTDateFormatPipe);
     confirmationService = inject(ConfirmationService);
+    transloco = inject(TranslocoService);
     state = input.required(...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
     /** Per-card loading predicate — drives the popover skeleton while runtime
@@ -847,13 +916,58 @@ class ClientListCardsView {
      * the predicate operates on the card's row representation (`{ Id, ... }`). */
     rowActionsLoadingFn = input(null, ...(ngDevMode ? [{ debugName: "rowActionsLoadingFn" }] : /* istanbul ignore next */ []));
     lazyLoad = output();
+    /** Emitted when the infinite-scroll sentinel enters the viewport and more
+     * pages remain — the parent responds by fetching and appending the next
+     * page of cards. Only relevant when `config.isPaginated` is true. */
+    loadMore = output();
     cardClick = output();
     /** Emitted when a card's 3-dots menu opens, so the parent can lazily fetch
      * that record's runtime actions (same contract as the table view). */
     rowActionsRequested = output();
     cardsState = computed(() => this.state(), ...(ngDevMode ? [{ debugName: "cardsState" }] : /* istanbul ignore next */ []));
+    /** True while backend pagination is enabled and more pages remain to
+     * fetch — drives the infinite-scroll sentinel's visibility. */
+    hasMoreCards = computed(() => this.cardsState().config.isPaginated &&
+        this.cardsState().cards.length < this.cardsState().totalCount, ...(ngDevMode ? [{ debugName: "hasMoreCards" }] : /* istanbul ignore next */ []));
+    /** Anchor element rendered at the end of the grid when more cards remain;
+     * 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 */ []));
+    /** 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 ||
+        this.bucket().filterTerm().trim().length > 0, ...(ngDevMode ? [{ debugName: "hasActiveFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * `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.
+     */
+    resetLabel = toSignal(this.transloco.selectTranslate('components.table.reset'), {
+        initialValue: this.transloco.translate('components.table.reset'),
+    });
+    /** 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
+     * filters/search — i.e. reloads the full unfiltered set. */
+    toolbarActions = computed(() => this.hasActiveFilter()
+        ? [
+            {
+                icon: 'arrow.refresh-cw-01',
+                color: 'secondary',
+                variant: 'text',
+                tooltip: this.resetLabel(),
+                label: this.resetLabel(),
+                action: () => this.resetFilters(),
+            },
+        ]
+        : [], ...(ngDevMode ? [{ debugName: "toolbarActions" }] : /* istanbul ignore next */ []));
+    resetFilters() {
+        this.bucket().filters.set({});
+        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
@@ -1248,15 +1362,73 @@ class ClientListCardsView {
         return null;
     }
     constructor() {
-        // Emit lazyLoad only on filter / search changes for paginated lists,
-        // matching mt-table's behaviour (group-by is a pure FE concern, not a
-        // re-fetch trigger). Skip the initial firing while the bucket is still at
-        // its default empty state so we don't double-fetch on mount.
-        let primed = false;
+        // Attach the observer to whatever element the sentinel query currently
+        // resolves to, and re-attach if Angular ever swaps that element. Keying
+        // on the element instance is what makes this safe: appending a page
+        // doesn't recreate the node, so the observer is *not* rebuilt per page —
+        // which matters because a fresh IntersectionObserver always fires once
+        // with the current intersection state, and rebuilding on every append
+        // would cascade through the remaining pages on its own.
+        //
+        // Attaching only once, however, is not safe: the sentinel lives at the
+        // end of the grid, and the grid is one branch of the view (the initial
+        // skeleton, an error, an empty result and the grouped layout are the
+        // others). A one-shot attach survives the initial skeleton but then
+        // silently observes a detached node the first time any sibling branch
+        // takes over, killing infinite scroll for the rest of the component's
+        // life.
+        effect((onCleanup) => {
+            const el = this.loadMoreSentinel()?.nativeElement;
+            if (!el) {
+                this.loadMoreObserver = null;
+                return;
+            }
+            const observer = new IntersectionObserver((entries) => {
+                if (!this.hasMoreCards())
+                    return;
+                if (entries.some((entry) => entry.isIntersecting)) {
+                    this.loadMore.emit();
+                }
+            }, { rootMargin: LOAD_MORE_ROOT_MARGIN });
+            observer.observe(el);
+            this.loadMoreObserver = observer;
+            onCleanup(() => {
+                observer.disconnect();
+                if (this.loadMoreObserver === observer)
+                    this.loadMoreObserver = null;
+            });
+        });
+        // Re-arm after each page settles. IntersectionObserver only reports
+        // threshold *crossings*: if an appended page is too short to push the
+        // sentinel back out of the root margin, the entry stays `isIntersecting`
+        // and no further callback ever arrives — the list stalls part-loaded
+        // until the user happens to scroll. Re-observing the same element
+        // delivers a fresh initial callback, so the loop continues until the
+        // sentinel really is out of range (callback reports no intersection, no
+        // emit, no state change, effect idle) or the data runs out
+        // (`hasMoreCards()` false). `observe()` on an already-observed target is
+        // a no-op, hence the explicit `unobserve` first.
         effect(() => {
             const state = this.cardsState();
+            const el = this.loadMoreSentinel()?.nativeElement;
+            const observer = this.loadMoreObserver;
+            if (!observer || !el || state.loading || !this.hasMoreCards())
+                return;
+            observer.unobserve(el);
+            observer.observe(el);
+        });
+        // Emit lazyLoad only on genuine filter / search changes for paginated
+        // lists, matching mt-table's behaviour (group-by is a pure FE concern,
+        // not a re-fetch trigger). Deliberately reads `cardsState()` via
+        // `untracked` — the item state gets a new object reference on every
+        // page append (infinite scroll), and reacting to that here would
+        // re-emit `lazyLoad` after every append, which re-fetches with
+        // `append: false` and wipes out everything already loaded.
+        let primed = false;
+        effect(() => {
             const filters = this.bucket().filters();
             const filterTerm = this.bucket().filterTerm();
+            const state = untracked(() => this.cardsState());
             if (!state.config.isPaginated)
                 return;
             if (!primed) {
@@ -1270,13 +1442,13 @@ class ClientListCardsView {
                     ...(filterTerm ? { generalSearch: filterTerm } : {}),
                 },
                 pageSize: state.take,
-                first: state.skip,
-                currentPage: state.skip / Math.max(state.take, 1) + 1,
+                first: 0,
+                currentPage: 1,
             }));
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListCardsView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListCardsView, isStandalone: true, selector: "mt-client-list-cards-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, rowActionsLoadingFn: { classPropertyName: "rowActionsLoadingFn", publicName: "rowActionsLoadingFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", cardClick: "cardClick", rowActionsRequested: "rowActionsRequested" }, providers: [MTDateFormatPipe], ngImport: i0, template: "<mt-table-caption\r\n  [generalSearch]=\"true\"\r\n  [showFilters]=\"true\"\r\n  filterMode=\"popover\"\r\n  [printable]=\"true\"\r\n  [groupable]=\"true\"\r\n  [exportable]=\"true\"\r\n  [columns]=\"columns()\"\r\n  [data]=\"rowRepresentations()\"\r\n  [groupColumns]=\"grouping.groupableColumns()\"\r\n  [filters]=\"bucket().filters()\"\r\n  (filtersChange)=\"bucket().filters.set($event)\"\r\n  [filterTerm]=\"bucket().filterTerm()\"\r\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n  [groupBy]=\"bucket().groupBy()\"\r\n  (groupByChange)=\"bucket().groupBy.set($event)\"\r\n  [activeTab]=\"bucket().activeTab()\"\r\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n  (exportRequested)=\"exportExcel()\"\r\n  (printRequested)=\"printPdf()\"\r\n/>\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (visibleCards().length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n          @for (card of group.cards; track card.id) {\r\n            <mt-card\r\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n              (click)=\"cardClick.emit(card)\"\r\n            >\r\n              <ng-template #headless>\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n                />\r\n                <mt-entities-preview\r\n                  [entities]=\"card.entities\"\r\n                  attachmentShape=\"compact\"\r\n                  [stackOnNarrow]=\"false\"\r\n                  [clickableKeys]=\"clickableEntityKeys()\"\r\n                  [activeKeys]=\"activeKeysForCard(card)\"\r\n                  [clickableTooltip]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of visibleCards(); track card.id) {\r\n      @defer (on viewport) {\r\n        <mt-card\r\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n          (click)=\"cardClick.emit(card)\"\r\n        >\r\n          <ng-template #headless>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"cardActionsMenu\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n            />\r\n            <mt-entities-preview\r\n              [entities]=\"card.entities\"\r\n              attachmentShape=\"compact\"\r\n              [stackOnNarrow]=\"false\"\r\n              [clickableKeys]=\"clickableEntityKeys()\"\r\n              [activeKeys]=\"activeKeysForCard(card)\"\r\n              [clickableTooltip]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  Per-card 3-dots actions menu \u2014 same contract as the table view's popover\r\n  row-actions. Rendered into each card's top-end corner; clicks stop at the\r\n  wrapper so the card's own click (cardClick) doesn't fire.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @if (rowActions().length > 0) {\r\n    <div\r\n      class=\"absolute end-2 top-2 z-10 flex items-center gap-1\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @for (action of inlineActionsForCard(card); track $index) {\r\n        <mt-button\r\n          [icon]=\"action.icon\"\r\n          [severity]=\"action.color\"\r\n          [variant]=\"action.variant\"\r\n          [size]=\"actionSize(action) || 'small'\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [label]=\"action.label\"\r\n          [loading]=\"resolveActionLoading(action, card)\"\r\n          (onClick)=\"runCardAction($event, action, card)\"\r\n        />\r\n      }\r\n      @if (showCardActionsMenu(card)) {\r\n        <mt-button\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"text\"\r\n          [tooltip]=\"'components.table.actions' | transloco\"\r\n          (onClick)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n        />\r\n        <p-popover #cardPopover appendTo=\"body\">\r\n          <div class=\"flex min-w-44 flex-col gap-1 p-1\">\r\n            @if (isCardActionsLoading(card)) {\r\n              <div class=\"flex flex-col gap-2 p-1\">\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n              </div>\r\n            } @else {\r\n              @for (action of menuActionsForCard(card); track $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\r\n                  [class]=\"\r\n                    action.color === 'danger'\r\n                      ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\r\n                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\r\n                  \"\r\n                  (click)=\"\r\n                    runCardAction($event, action, card); cardPopover.hide()\r\n                  \"\r\n                >\r\n                  @if (action.icon) {\r\n                    <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\r\n                  }\r\n                  <span>{{ action.label || action.tooltip }}</span>\r\n                </button>\r\n              }\r\n            }\r\n          </div>\r\n        </p-popover>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "stackOnNarrow", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TableCaption, selector: "mt-table-caption", inputs: ["generalSearch", "showFilters", "filterMode", "exportable", "printable", "groupable", "columns", "data", "groupColumns", "tabs", "tabsOptionLabel", "tabsOptionValue", "actions", "captionStart", "captionEnd", "activeTab", "filters", "filterTerm", "groupBy"], outputs: ["activeTabChange", "filtersChange", "filterTermChange", "groupByChange", "exportRequested", "printRequested", "onTabChange", "searchChange", "filterApplied", "filterReset"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet, Card,
+    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=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (visibleCards().length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n          @for (card of group.cards; track card.id) {\r\n            <mt-card\r\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n              (click)=\"cardClick.emit(card)\"\r\n            >\r\n              <ng-template #headless>\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n                />\r\n                <mt-entities-preview\r\n                  [entities]=\"card.entities\"\r\n                  attachmentShape=\"compact\"\r\n                  [stackOnNarrow]=\"false\"\r\n                  [clickableKeys]=\"clickableEntityKeys()\"\r\n                  [activeKeys]=\"activeKeysForCard(card)\"\r\n                  [clickableTooltip]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of visibleCards(); track card.id) {\r\n      @defer (on viewport) {\r\n        <mt-card\r\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n          (click)=\"cardClick.emit(card)\"\r\n        >\r\n          <ng-template #headless>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"cardActionsMenu\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n            />\r\n            <mt-entities-preview\r\n              [entities]=\"card.entities\"\r\n              attachmentShape=\"compact\"\r\n              [stackOnNarrow]=\"false\"\r\n              [clickableKeys]=\"clickableEntityKeys()\"\r\n              [activeKeys]=\"activeKeysForCard(card)\"\r\n              [clickableTooltip]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  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=\"grid grid-cols-1 gap-5 py-4 md:grid-cols-2 xl:grid-cols-3\"\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 3-dots actions menu \u2014 same contract as the table view's popover\r\n  row-actions. Rendered into each card's top-end corner; clicks stop at the\r\n  wrapper so the card's own click (cardClick) doesn't fire.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @if (rowActions().length > 0) {\r\n    <div\r\n      class=\"absolute end-2 top-2 z-10 flex items-center gap-1\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @for (action of inlineActionsForCard(card); track $index) {\r\n        <mt-button\r\n          [icon]=\"action.icon\"\r\n          [severity]=\"action.color\"\r\n          [variant]=\"action.variant\"\r\n          [size]=\"actionSize(action) || 'small'\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [label]=\"action.label\"\r\n          [loading]=\"resolveActionLoading(action, card)\"\r\n          (onClick)=\"runCardAction($event, action, card)\"\r\n        />\r\n      }\r\n      @if (showCardActionsMenu(card)) {\r\n        <mt-button\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"text\"\r\n          [tooltip]=\"'components.table.actions' | transloco\"\r\n          (onClick)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n        />\r\n        <p-popover #cardPopover appendTo=\"body\">\r\n          <div class=\"flex min-w-44 flex-col gap-1 p-1\">\r\n            @if (isCardActionsLoading(card)) {\r\n              <div class=\"flex flex-col gap-2 p-1\">\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n              </div>\r\n            } @else {\r\n              @for (action of menuActionsForCard(card); track $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\r\n                  [class]=\"\r\n                    action.color === 'danger'\r\n                      ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\r\n                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\r\n                  \"\r\n                  (click)=\"\r\n                    runCardAction($event, action, card); cardPopover.hide()\r\n                  \"\r\n                >\r\n                  @if (action.icon) {\r\n                    <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\r\n                  }\r\n                  <span>{{ action.label || action.tooltip }}</span>\r\n                </button>\r\n              }\r\n            }\r\n          </div>\r\n        </p-popover>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EntitiesPreview, selector: "mt-entities-preview", inputs: ["entities", "attachmentShape", "stackOnNarrow", "clickableKeys", "activeKeys", "clickableTooltip", "activeTooltip"], outputs: ["entityClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: TableCaption, selector: "mt-table-caption", inputs: ["generalSearch", "showFilters", "filterMode", "exportable", "printable", "groupable", "columns", "data", "groupColumns", "tabs", "tabsOptionLabel", "tabsOptionValue", "actions", "captionStart", "captionEnd", "activeTab", "filters", "filterTerm", "groupBy"], outputs: ["activeTabChange", "filtersChange", "filterTermChange", "groupByChange", "exportRequested", "printRequested", "onTabChange", "searchChange", "filterApplied", "filterReset"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], deferBlockDependencies: [() => [i1.NgTemplateOutlet, Card,
                 EntitiesPreview, i4.TranslocoPipe]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListCardsView, decorators: [{
@@ -1291,8 +1463,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  [filters]=\"bucket().filters()\"\r\n  (filtersChange)=\"bucket().filters.set($event)\"\r\n  [filterTerm]=\"bucket().filterTerm()\"\r\n  (filterTermChange)=\"bucket().filterTerm.set($event)\"\r\n  [groupBy]=\"bucket().groupBy()\"\r\n  (groupByChange)=\"bucket().groupBy.set($event)\"\r\n  [activeTab]=\"bucket().activeTab()\"\r\n  (activeTabChange)=\"bucket().activeTab.set($event)\"\r\n  (exportRequested)=\"exportExcel()\"\r\n  (printRequested)=\"printPdf()\"\r\n/>\r\n\r\n@if (cardsState().loading && cardsState().cards.length === 0) {\r\n  <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (visibleCards().length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n          @for (card of group.cards; track card.id) {\r\n            <mt-card\r\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n              (click)=\"cardClick.emit(card)\"\r\n            >\r\n              <ng-template #headless>\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n                />\r\n                <mt-entities-preview\r\n                  [entities]=\"card.entities\"\r\n                  attachmentShape=\"compact\"\r\n                  [stackOnNarrow]=\"false\"\r\n                  [clickableKeys]=\"clickableEntityKeys()\"\r\n                  [activeKeys]=\"activeKeysForCard(card)\"\r\n                  [clickableTooltip]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of visibleCards(); track card.id) {\r\n      @defer (on viewport) {\r\n        <mt-card\r\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n          (click)=\"cardClick.emit(card)\"\r\n        >\r\n          <ng-template #headless>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"cardActionsMenu\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n            />\r\n            <mt-entities-preview\r\n              [entities]=\"card.entities\"\r\n              attachmentShape=\"compact\"\r\n              [stackOnNarrow]=\"false\"\r\n              [clickableKeys]=\"clickableEntityKeys()\"\r\n              [activeKeys]=\"activeKeysForCard(card)\"\r\n              [clickableTooltip]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  Per-card 3-dots actions menu \u2014 same contract as the table view's popover\r\n  row-actions. Rendered into each card's top-end corner; clicks stop at the\r\n  wrapper so the card's own click (cardClick) doesn't fire.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @if (rowActions().length > 0) {\r\n    <div\r\n      class=\"absolute end-2 top-2 z-10 flex items-center gap-1\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @for (action of inlineActionsForCard(card); track $index) {\r\n        <mt-button\r\n          [icon]=\"action.icon\"\r\n          [severity]=\"action.color\"\r\n          [variant]=\"action.variant\"\r\n          [size]=\"actionSize(action) || 'small'\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [label]=\"action.label\"\r\n          [loading]=\"resolveActionLoading(action, card)\"\r\n          (onClick)=\"runCardAction($event, action, card)\"\r\n        />\r\n      }\r\n      @if (showCardActionsMenu(card)) {\r\n        <mt-button\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"text\"\r\n          [tooltip]=\"'components.table.actions' | transloco\"\r\n          (onClick)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n        />\r\n        <p-popover #cardPopover appendTo=\"body\">\r\n          <div class=\"flex min-w-44 flex-col gap-1 p-1\">\r\n            @if (isCardActionsLoading(card)) {\r\n              <div class=\"flex flex-col gap-2 p-1\">\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n              </div>\r\n            } @else {\r\n              @for (action of menuActionsForCard(card); track $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\r\n                  [class]=\"\r\n                    action.color === 'danger'\r\n                      ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\r\n                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\r\n                  \"\r\n                  (click)=\"\r\n                    runCardAction($event, action, card); cardPopover.hide()\r\n                  \"\r\n                >\r\n                  @if (action.icon) {\r\n                    <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\r\n                  }\r\n                  <span>{{ action.label || action.tooltip }}</span>\r\n                </button>\r\n              }\r\n            }\r\n          </div>\r\n        </p-popover>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], rowActionsLoadingFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionsLoadingFn", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], rowActionsRequested: [{ type: i0.Output, args: ["rowActionsRequested"] }] } });
+                    ], 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=\"grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n      <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n    }\r\n  </div>\r\n} @else if (cardsState().error) {\r\n  <div class=\"rounded-lg border border-red-200 bg-red-50 p-6 text-red-600\">\r\n    {{ cardsState().error }}\r\n  </div>\r\n} @else if (visibleCards().length === 0) {\r\n  <div class=\"p-6 text-center text-gray-400\">\r\n    {{ \"components.clientComponents.list.noCardsFound\" | transloco }}\r\n  </div>\r\n} @else if (grouping.groupingActive()) {\r\n  <div class=\"flex flex-col gap-6\">\r\n    @for (group of groupedCards(); track group.key) {\r\n      <section class=\"flex flex-col gap-3\">\r\n        <header\r\n          class=\"flex items-center gap-3 px-2 py-2 bg-surface-50 dark:bg-surface-900 border-y border-surface-200 dark:border-surface-700 rounded\"\r\n          [style.--mt-group-accent]=\"group.accent ?? 'var(--p-primary-color)'\"\r\n        >\r\n          <span\r\n            class=\"inline-block w-1 h-5 rounded-full\"\r\n            [style.background]=\"'var(--mt-group-accent)'\"\r\n          ></span>\r\n          <span\r\n            class=\"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400\"\r\n          >\r\n            {{ group.columnLabel }}\r\n          </span>\r\n          <span class=\"text-sm font-semibold text-gray-900 dark:text-gray-100\">\r\n            {{ group.label }}\r\n          </span>\r\n          <span\r\n            class=\"ml-auto inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-950 dark:text-primary-300\"\r\n          >\r\n            {{ group.count }}\r\n          </span>\r\n        </header>\r\n        <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n          @for (card of group.cards; track card.id) {\r\n            <mt-card\r\n              class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n              (click)=\"cardClick.emit(card)\"\r\n            >\r\n              <ng-template #headless>\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cardActionsMenu\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n                />\r\n                <mt-entities-preview\r\n                  [entities]=\"card.entities\"\r\n                  attachmentShape=\"compact\"\r\n                  [stackOnNarrow]=\"false\"\r\n                  [clickableKeys]=\"clickableEntityKeys()\"\r\n                  [activeKeys]=\"activeKeysForCard(card)\"\r\n                  [clickableTooltip]=\"\r\n                    'components.table.filterByThis' | transloco\r\n                  \"\r\n                  [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n                  (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n                />\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        </div>\r\n      </section>\r\n    }\r\n  </div>\r\n} @else {\r\n  <div class=\"grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3\">\r\n    @for (card of visibleCards(); track card.id) {\r\n      @defer (on viewport) {\r\n        <mt-card\r\n          class=\"relative cursor-pointer p-5 shadow-sm transition-shadow hover:shadow-md\"\r\n          (click)=\"cardClick.emit(card)\"\r\n        >\r\n          <ng-template #headless>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"cardActionsMenu\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: card }\"\r\n            />\r\n            <mt-entities-preview\r\n              [entities]=\"card.entities\"\r\n              attachmentShape=\"compact\"\r\n              [stackOnNarrow]=\"false\"\r\n              [clickableKeys]=\"clickableEntityKeys()\"\r\n              [activeKeys]=\"activeKeysForCard(card)\"\r\n              [clickableTooltip]=\"'components.table.filterByThis' | transloco\"\r\n              [activeTooltip]=\"'components.table.clearFilter' | transloco\"\r\n              (entityClick)=\"onEntityFilterClick(card, $event)\"\r\n            />\r\n          </ng-template>\r\n        </mt-card>\r\n      } @placeholder {\r\n        <div class=\"min-h-[20rem]\">\r\n          <p-skeleton height=\"20rem\" class=\"rounded-lg\" />\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n}\r\n\r\n<!--\r\n  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=\"grid grid-cols-1 gap-5 py-4 md:grid-cols-2 xl:grid-cols-3\"\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 3-dots actions menu \u2014 same contract as the table view's popover\r\n  row-actions. Rendered into each card's top-end corner; clicks stop at the\r\n  wrapper so the card's own click (cardClick) doesn't fire.\r\n-->\r\n<ng-template #cardActionsMenu let-card>\r\n  @if (rowActions().length > 0) {\r\n    <div\r\n      class=\"absolute end-2 top-2 z-10 flex items-center gap-1\"\r\n      (click)=\"$event.stopPropagation()\"\r\n    >\r\n      @for (action of inlineActionsForCard(card); track $index) {\r\n        <mt-button\r\n          [icon]=\"action.icon\"\r\n          [severity]=\"action.color\"\r\n          [variant]=\"action.variant\"\r\n          [size]=\"actionSize(action) || 'small'\"\r\n          [tooltip]=\"action.tooltip\"\r\n          [label]=\"action.label\"\r\n          [loading]=\"resolveActionLoading(action, card)\"\r\n          (onClick)=\"runCardAction($event, action, card)\"\r\n        />\r\n      }\r\n      @if (showCardActionsMenu(card)) {\r\n        <mt-button\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"text\"\r\n          [tooltip]=\"'components.table.actions' | transloco\"\r\n          (onClick)=\"onCardActionsToggle($event, cardPopover, card)\"\r\n        />\r\n        <p-popover #cardPopover appendTo=\"body\">\r\n          <div class=\"flex min-w-44 flex-col gap-1 p-1\">\r\n            @if (isCardActionsLoading(card)) {\r\n              <div class=\"flex flex-col gap-2 p-1\">\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n                <p-skeleton height=\"1.75rem\" />\r\n              </div>\r\n            } @else {\r\n              @for (action of menuActionsForCard(card); track $index) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex cursor-pointer items-center gap-2 rounded px-2 py-2 text-start text-sm transition-colors\"\r\n                  [class]=\"\r\n                    action.color === 'danger'\r\n                      ? 'text-red-600 hover:bg-red-50 dark:hover:bg-red-950'\r\n                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-surface-700'\r\n                  \"\r\n                  (click)=\"\r\n                    runCardAction($event, action, card); cardPopover.hide()\r\n                  \"\r\n                >\r\n                  @if (action.icon) {\r\n                    <mt-icon [icon]=\"action.icon\" class=\"text-base\" />\r\n                  }\r\n                  <span>{{ action.label || action.tooltip }}</span>\r\n                </button>\r\n              }\r\n            }\r\n          </div>\r\n        </p-popover>\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], rowActionsLoadingFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionsLoadingFn", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], 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 = []) {
     const extraFilters = {};
@@ -1466,17 +1638,41 @@ class ClientList {
         const nextFilters = event.filters ?? this.runtimeFilters.get(item.key) ?? {};
         const filtersChanged = runtimeFiltersChanged(this.runtimeFilters.get(item.key), nextFilters);
         this.runtimeFilters.set(item.key, nextFilters);
-        if (item.areaType === 'cards') {
-            this.loadCards(item.key, item.config);
-            return;
-        }
         const take = this.resolvePositiveInteger(event.pageSize) ?? item.take;
         const skip = filtersChanged
             ? 0
             : (this.resolveNonNegativeInteger(event.first) ?? 0);
+        if (item.areaType === 'cards') {
+            this.loadCards(item.key, item.config, skip, take, false);
+            return;
+        }
         this.state.setTablePaging(item.key, skip, take);
         this.loadTable(item.key, item.config, skip, take);
     }
+    /**
+     * Fetches the next page of cards and appends it to the currently loaded
+     * set — the infinite-scroll counterpart to table pagination. No-op unless
+     * `isPaginated` is enabled for this cards list, a load is already in
+     * flight, or every record has already been loaded.
+     *
+     * The offset comes from `item.skip`, which the state service advances by
+     * the page size the backend actually applied. Deriving it from
+     * `cards.length` instead would drift the moment a page came back short (a
+     * capped `pageSize`, a de-duplicated overlap) and re-request a page we
+     * already hold.
+     */
+    loadMoreCards(itemKey) {
+        const item = this.state.itemsByKey()[itemKey];
+        if (!item ||
+            item.type !== 'form' ||
+            item.areaType !== 'cards' ||
+            !item.config.isPaginated ||
+            item.loading ||
+            item.cards.length >= item.totalCount) {
+            return;
+        }
+        this.loadCards(item.key, item.config, item.skip, item.take, true);
+    }
     reload(itemKey) {
         if (itemKey) {
             this.reloadByKey(itemKey);
@@ -1795,12 +1991,13 @@ class ClientList {
                 ? DEFAULT_MODE
                 : this.resolveMode(formConfig?.mode, formConfig?.columnKeys);
             const isPaginated = !isInformative &&
-                areaType === 'table' &&
-                (formConfig?.isPaginated ?? true);
+                (areaType === 'table'
+                    ? (formConfig?.isPaginated ?? true)
+                    : (formConfig?.isPaginated ?? false));
             const configuredTablePageSize = this.resolvePositiveInteger(formConfig?.table?.pageSize);
             const configuredTake = this.resolvePositiveInteger(formConfig?.take);
             const showHeader = config.showHeader ?? true;
-            const take = !isInformative && areaType === 'table'
+            const take = !isInformative && (areaType === 'table' || isPaginated)
                 ? isPaginated
                     ? (configuredTake ??
                         configuredTablePageSize ??
@@ -1849,8 +2046,12 @@ class ClientList {
                     columns: [],
                     rows: [],
                     cards: [],
+                    // Cards restart from the first page on every reconfigure: the
+                    // loaded set above is wiped, and for infinite scroll `skip` is
+                    // the next offset into that set — carrying it forward would ask
+                    // the backend for page N with nothing before it on screen.
                     skip: 0,
-                    take: 0,
+                    take,
                     expanded: existing?.expanded ?? config.collapse?.expandedByDefault ?? true,
                     dashboardData: null,
                     rawData: existing?.rawData ?? null,
@@ -1889,7 +2090,7 @@ class ClientList {
             return;
         }
         if (item.areaType === 'cards') {
-            this.loadCards(item.key, item.config, force);
+            this.loadCards(item.key, item.config, 0, item.take, false, force);
             return;
         }
         this.loadTable(item.key, item.config, item.skip, item.take, force);
@@ -1948,14 +2149,14 @@ class ClientList {
         });
         this.subscriptions.set(key, sub);
     }
-    loadCards(key, config, force = false) {
+    loadCards(key, config, skip = 0, take = 0, append = false, force = false) {
         if (!this.hasValidIdentifiers(config)) {
             this.state.setLoading(key, false);
             this.state.setError(key, this.getMissingIdentifiersMessage(config));
             return;
         }
         const filters = this.resolveFetchFilters(key, config);
-        const requestSignature = this.createCardsRequestSignature(config, filters);
+        const requestSignature = this.createCardsRequestSignature(config, filters, skip, take);
         if (force) {
             this.inFlightRequestSignatures.delete(key);
             this.fulfilledRequestSignatures.delete(key);
@@ -1968,11 +2169,13 @@ class ClientList {
         this.inFlightRequestSignatures.set(key, requestSignature);
         this.state.setLoading(key, true);
         this.state.setError(key, null);
-        const sub = this.api.getCards(config.contextKey, filters).subscribe({
+        const sub = this.api
+            .getCards(config.contextKey, filters, config.isPaginated ? skip : undefined, config.isPaginated ? take : undefined)
+            .subscribe({
             next: (response) => {
                 let hasLoadedData = false;
                 if (response.data) {
-                    this.state.setCardsResult(key, response.data, config);
+                    this.state.setCardsResult(key, response.data, config, skip, take, append);
                     this.fulfilledRequestSignatures.set(key, requestSignature);
                     hasLoadedData = true;
                 }
@@ -2239,13 +2442,15 @@ class ClientList {
             ...(query.columnKeys ?? []),
         ].join('|');
     }
-    createCardsRequestSignature(config, filters) {
+    createCardsRequestSignature(config, filters, skip, take) {
         return [
             config.type,
             config.areaType,
             config.contextKey ?? 'x',
             this.serializeFilters(filters),
             'Card',
+            config.isPaginated ? skip : 0,
+            config.isPaginated ? take : 0,
         ].join('|');
     }
     createInformativeRequestSignature(config) {
@@ -2293,7 +2498,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            (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", "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"], 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,
@@ -2307,7 +2512,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            (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\">\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" }]
         }], 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"] }] } });
 
 /**