spiderly 19.11.7 → 19.11.9

package/fesm2022/spiderly.mjs

@@ -723,6 +723,31 @@ function getImageDimensions(file) {
         img.src = URL.createObjectURL(file);
     });
 }
+/**
+ * Scrolls `element` back under the top of the viewport, but only when it has already scrolled
+ * above it. Set the element's `scroll-margin-top` to whatever fixed chrome must stay clear.
+ * Assumes the element's nearest scroll container is the viewport itself.
+ */
+// This is the one full telling of the three decisions below; paging is the caller (see
+// spiderly-data-table/CLAUDE.md → "Scroll back to the table on page change").
+// - The offset is READ from CSS rather than passed in, so the amount of fixed chrome to clear
+//   stays declared in one place per component and no TypeScript knows the shell's dimensions.
+//   That read is also why the viewport assumption above matters: getBoundingClientRect is
+//   viewport-relative, so inside a consumer's own overflow container it measures the wrong box.
+// - The early return is what stops a list sitting BELOW other page content (a table inside a
+//   details form) from shoving that content off-screen when it was already visible.
+// - `behavior: 'instant'` overrides the element's CSS `scroll-behavior`; `'auto'` defers to it,
+//   so an app setting `html { scroll-behavior: smooth }` would animate every call.
+function scrollElementIntoViewIfAboveViewport(element) {
+    const offset = parseFloat(getComputedStyle(element).scrollMarginTop) || 0;
+    if (element.getBoundingClientRect().top >= offset)
+        return;
+    element.scrollIntoView({
+        block: 'start',
+        inline: 'nearest',
+        behavior: 'instant',
+    });
+}
 
 class SpiderlyCalendarComponent extends BaseControl {
     constructor(translocoService) {
@@ -3080,19 +3105,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }] } });
 
-class FooterComponent {
-    constructor(config) {
-        this.config = config;
-        this.companyName = this.config.companyName;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FooterComponent, deps: [{ token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: FooterComponent, isStandalone: true, selector: "footer", ngImport: i0, template: "<div class=\"layout-footer\">\n  <span class=\"font-medium ml-2\">{{ companyName }}</span>\n</div>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'footer', standalone: true, template: "<div class=\"layout-footer\">\n  <span class=\"font-medium ml-2\">{{ companyName }}</span>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: ConfigServiceBase }] });
-
 class IndexCardComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
@@ -3829,7 +3841,7 @@ class SpiderlyLayoutComponent {
         this.onAfterNgDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, deps: [{ token: LayoutServiceBase }, { token: i0.Renderer2 }, { token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout", showHoverBgOnRootTopMenuItems: "showHoverBgOnRootTopMenuItems", maxWidth: "maxWidth" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\n  <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\n  <div class=\"layout-sidebar\">\n    <sidebar [menu]=\"sideMenu\"></sidebar>\n  </div>\n  <div class=\"layout-main-container\">\n    <div class=\"layout-main\">\n      <router-outlet></router-outlet>\n    </div>\n    <footer></footer>\n  </div>\n  <div class=\"layout-mask\"></div>\n</div>\n\n<div *ngIf=\"isSideMenuLayout === false\">\n  <spiderly-topbar\n    [menu]=\"topMenu\"\n    [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\"\n  >\n    <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\n  </spiderly-topbar>\n  <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px\">\n    <router-outlet></router-outlet>\n  </main>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: FooterComponent, selector: "footer" }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu", "showHoverBgOnRootItems"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyLayoutComponent, isStandalone: true, selector: "spiderly-layout", inputs: { menu: "menu", isSideMenuLayout: "isSideMenuLayout", showHoverBgOnRootTopMenuItems: "showHoverBgOnRootTopMenuItems", maxWidth: "maxWidth" }, viewQueries: [{ propertyName: "appSidebar", first: true, predicate: AppSidebarComponent, descendants: true }, { propertyName: "sidemenuTopbar", first: true, predicate: SideMenuTopBarComponent, descendants: true }, { propertyName: "topbarmenu", first: true, predicate: ["topbarmenu"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\n  <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\n  <div class=\"layout-sidebar\">\n    <sidebar [menu]=\"sideMenu\"></sidebar>\n  </div>\n  <div class=\"layout-main-container\">\n    <div class=\"layout-main\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n  <div class=\"layout-mask\"></div>\n</div>\n\n<div *ngIf=\"isSideMenuLayout === false\">\n  <spiderly-topbar\n    [menu]=\"topMenu\"\n    [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\"\n  >\n    <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\n  </spiderly-topbar>\n  <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px\">\n    <router-outlet></router-outlet>\n  </main>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppSidebarComponent, selector: "sidebar", inputs: ["menu"] }, { kind: "component", type: SideMenuTopBarComponent, selector: "spiderly-sidemenu-topbar" }, { kind: "component", type: TopBarComponent, selector: "spiderly-topbar", inputs: ["menu", "showHoverBgOnRootItems"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLayoutComponent, decorators: [{
             type: Component,
@@ -3837,10 +3849,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         CommonModule,
                         RouterModule,
                         AppSidebarComponent,
-                        FooterComponent,
                         SideMenuTopBarComponent,
                         TopBarComponent,
-                    ], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\n  <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\n  <div class=\"layout-sidebar\">\n    <sidebar [menu]=\"sideMenu\"></sidebar>\n  </div>\n  <div class=\"layout-main-container\">\n    <div class=\"layout-main\">\n      <router-outlet></router-outlet>\n    </div>\n    <footer></footer>\n  </div>\n  <div class=\"layout-mask\"></div>\n</div>\n\n<div *ngIf=\"isSideMenuLayout === false\">\n  <spiderly-topbar\n    [menu]=\"topMenu\"\n    [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\"\n  >\n    <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\n  </spiderly-topbar>\n  <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px\">\n    <router-outlet></router-outlet>\n  </main>\n</div>\n" }]
+                    ], template: "<div *ngIf=\"isSideMenuLayout\" class=\"layout-wrapper\" [ngClass]=\"containerClass\">\n  <spiderly-sidemenu-topbar></spiderly-sidemenu-topbar>\n  <div class=\"layout-sidebar\">\n    <sidebar [menu]=\"sideMenu\"></sidebar>\n  </div>\n  <div class=\"layout-main-container\">\n    <div class=\"layout-main\">\n      <router-outlet></router-outlet>\n    </div>\n  </div>\n  <div class=\"layout-mask\"></div>\n</div>\n\n<div *ngIf=\"isSideMenuLayout === false\">\n  <spiderly-topbar\n    [menu]=\"topMenu\"\n    [showHoverBgOnRootItems]=\"showHoverBgOnRootTopMenuItems\"\n  >\n    <ng-content ACTIONS select=\"[ACTIONS]\"></ng-content>\n  </spiderly-topbar>\n  <main [style.max-width]=\"maxWidth\" style=\"margin: auto; padding: 18px\">\n    <router-outlet></router-outlet>\n  </main>\n</div>\n" }]
         }], ctorParameters: () => [{ type: LayoutServiceBase }, { type: i0.Renderer2 }, { type: i3$2.Router }], propDecorators: { menu: [{
                 type: Input
             }], isSideMenuLayout: [{
@@ -3990,14 +4001,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{ selector: 'spiderly-delete-confirmation', imports: [SpiderlyButtonComponent, TranslocoDirective, ConfirmDialogModule], providers: [ConfirmationService], template: "<ng-container *transloco=\"let t\">\n  <p-confirmDialog #cd></p-confirmDialog>\n  <div\n    class=\"border-b surface-border text-lg\"\n    style=\"\n      display: flex;\n      align-items: center;\n      padding-bottom: 10px;\n      width: 100%;\n      gap: 10px;\n    \"\n  >\n    <i class=\"pi pi-exclamation-circle text-4xl\"></i>\n    <p>{{ config.data.message }}</p>\n  </div>\n\n  <div\n    style=\"display: flex; gap: 12px; justify-content: right; margin-top: 28px\"\n  >\n    <spiderly-button\n      (onClick)=\"reject()\"\n      icon=\"pi pi-times\"\n      [label]=\"t('Cancel')\"\n      severity=\"secondary\"\n    ></spiderly-button>\n    <spiderly-button\n      (onClick)=\"accept()\"\n      icon=\"pi pi-check\"\n      [label]=\"t('Confirm')\"\n      styleClass=\"p-button-danger\"\n    ></spiderly-button>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1$5.DynamicDialogRef }, { type: i1$5.DynamicDialogConfig }] });
 
+/**
+ * Default column width per filter type, in rem. Sized for the HEADER — the filter input plus its
+ * match-mode dropdown — so a column of short values reserves more than its content needs; that is
+ * deliberate, and {@link Column.width} is the per-column override.
+ *
+ * A table, not a switch, so the mapping is exhaustive: a new `filterType` fails the build here
+ * instead of silently inheriting the actions-column reservation below.
+ */
+const DEFAULT_COLUMN_WIDTH_REM = {
+    text: 12,
+    date: 10,
+    multiselect: 12,
+    boolean: 8,
+    numeric: 12,
+    // Fits the 45px thumbnail `#defaultCell` renders for a blob.
+    blob: 5,
+};
 class SpiderlyDataTableComponent {
-    constructor(router, dialogService, route, messageService, translocoService, configService, locale) {
+    constructor(router, dialogService, route, messageService, translocoService, configService, errorHandler, locale) {
         this.router = router;
         this.dialogService = dialogService;
         this.route = route;
         this.messageService = messageService;
         this.translocoService = translocoService;
         this.configService = configService;
+        this.errorHandler = errorHandler;
         this.locale = locale;
         this.destroy$ = new Subject();
         this.tableIcon = 'pi pi-list';
@@ -4009,6 +4038,17 @@ class SpiderlyDataTableComponent {
         this.showCardWrapper = false;
         this.readonly = false;
         this.idField = 'id';
+        /**
+         * Sizes the columns from their declared widths instead of from the rendered rows.
+         *
+         * The browser default is `table-layout: auto`, which computes every column from the content
+         * of the rows currently on screen — so a column is one width on this page and another on the
+         * next, and a filter (which narrows the variety of values in the column it filters) moves the
+         * whole grid. PrimeNG sets no `table-layout` of its own, so without this the table inherits
+         * that default. Bound to a field, never an object literal in the template: a literal is a new
+         * reference on every change-detection pass.
+         */
+        this.tableStyle = { 'table-layout': 'fixed' };
         this.onTotalRecordsChange = new EventEmitter();
         this.loading = true;
         this.newlySelectedItems = [];
@@ -4026,6 +4066,7 @@ class SpiderlyDataTableComponent {
         this.onIsAllSelectedChange = new EventEmitter();
         this.matchModeDateOptions = [];
         this.matchModeNumberOptions = [];
+        this.matchModeTextOptions = [];
         /** Whether the "Add" button is shown. Defaults to `true`. */
         this.showAddButton = true;
         /** Whether the "Export to Excel" button is shown. Defaults to `true`. */
@@ -4068,7 +4109,25 @@ class SpiderlyDataTableComponent {
          * transient safety reveal into a durable choice.
          */
         this.revealedByConstraint = new Set();
+        /**
+         * The filter keys the rows on screen were actually narrowed by. Kept apart from
+         * `table.filters` because those are not the same question: PrimeNG's `onModelChange`
+         * writes each keystroke of a text/numeric filter straight into the meta and only calls
+         * `_filter()` for the auto-applying types, so `table.filters` holds PENDING edits too.
+         * Reading it for the header icon marked a column filtered the moment the operator typed
+         * a character, before Apply — claiming the grid was narrowed when it was not.
+         */
+        this.appliedFilterKeys = new Set();
         this.clientFilterCount = 0;
+        /**
+         * Memo for the resolution below. Two jobs: the narrowing maps to a NEW array and a
+         * template binding must not hand PrimeNG a fresh reference every CD pass, and both
+         * halves (offered list, default mode) must come from ONE computation so they cannot
+         * disagree. Keyed on the declared array's identity, so reassigning `col.matchModes`
+         * recomputes — note PrimeNG itself reads `matchModeOptions` only in its own `ngOnInit`,
+         * so a post-init change still never reaches the rendered dropdown.
+         */
+        this.matchModeResolutions = new WeakMap();
     }
     ngAfterViewInit() {
         this.setupRemovableSort();
@@ -4170,6 +4229,24 @@ class SpiderlyDataTableComponent {
                 value: MatchModeCodes.GreaterThan,
             },
         ];
+        // Only the three the generated paginator implements for strings
+        // (PaginatedResultGenerator.GetCaseForString). Declared rather than left to PrimeNG,
+        // whose own text list adds notContains/endsWith/notEquals — modes the backend answers
+        // with InvalidMatchMode, i.e. a 400 on every load once the user picks one.
+        this.matchModeTextOptions = [
+            {
+                label: this.translocoService.translate('StartsWith'),
+                value: MatchModeCodes.StartsWith,
+            },
+            {
+                label: this.translocoService.translate('Contains'),
+                value: MatchModeCodes.Contains,
+            },
+            {
+                label: this.translocoService.translate('Equals'),
+                value: MatchModeCodes.Equals,
+            },
+        ];
         this.matchModeNumberOptions = [
             {
                 label: this.translocoService.translate('Equals'),
@@ -4197,6 +4274,10 @@ class SpiderlyDataTableComponent {
         this.mergeActivePageSizesIntoOptions();
         this.restoreColumnVisibility();
         this.reconcileVisibilityWithPersistedConstraints();
+        this.reconcilePersistedMatchModes();
+        // Restored filters are applied by definition — mark them before the first paint rather
+        // than waiting for the first response, which is the reload case the icon exists for.
+        this.snapshotAppliedFilters(this.persistedTableState()?.filters);
         this.chooserCols = this.cols.filter(SpiderlyDataTableComponent.isDataColumn);
         this.refreshVisibleCols();
         // Bound to p-table's [multiSortMeta] so the FIRST request already carries the right
@@ -4276,9 +4357,8 @@ class SpiderlyDataTableComponent {
             return;
         let cleared = false;
         for (const col of cols) {
-            const filterKey = col.filterField ?? col.field;
-            if (SpiderlyDataTableComponent.isActiveFilterMeta(this.table.filters?.[filterKey])) {
-                delete this.table.filters[filterKey];
+            if (this.columnHasConstraint(this.table, col)) {
+                delete this.table.filters[this.filterKey(col)];
                 cleared = true;
             }
             if (this.table._multiSortMeta?.some((m) => m.field === col.field)) {
@@ -4296,6 +4376,40 @@ class SpiderlyDataTableComponent {
             m.value !== '' &&
             (!Array.isArray(m.value) || m.value.length > 0));
     }
+    /**
+     * The one home of the filter-state key rule (sort meta is keyed by `field` instead).
+     * Instance rather than static so the template's `[field]` binding can share it.
+     */
+    filterKey(col) {
+        return col.filterField ?? col.field;
+    }
+    /**
+     * Whether the rows on screen are narrowed by this column — feeds the projected
+     * `filtericon` template. Why not the template's `let-hasFilter`, and why applied rather
+     * than pending state: CLAUDE.md → "Active-filter header icon".
+     */
+    isColumnFiltered(col) {
+        return this.appliedFilterKeys.has(this.filterKey(col));
+    }
+    /** Whether the column carries a constraint at all, applied or still being typed. */
+    columnHasConstraint(table, col) {
+        return SpiderlyDataTableComponent.isActiveFilterMeta(table.filters?.[this.filterKey(col)]);
+    }
+    /**
+     * Records what a just-applied filter set narrows by. Called from every path that commits
+     * one: `(onFilter)` (Apply, auto-apply, a per-column Clear), `lazyLoad` (which also covers
+     * `table.clear()` — it re-queries WITHOUT emitting onFilter), the caption's Clear filters,
+     * and once from `ngOnInit` off persisted state, so a restored filter is marked on first
+     * paint rather than after the first response.
+     */
+    snapshotAppliedFilters(filters) {
+        const applied = new Set();
+        for (const [field, meta] of Object.entries(filters ?? {})) {
+            if (SpiderlyDataTableComponent.isActiveFilterMeta(meta))
+                applied.add(field);
+        }
+        this.appliedFilterKeys = applied;
+    }
     persistColumnVisibility() {
         if (!this.columnsStateKey)
             return;
@@ -4345,7 +4459,7 @@ class SpiderlyDataTableComponent {
                 continue;
             if (this.isColumnVisible(col))
                 continue;
-            if (constrained.has(col.field) || constrained.has(col.filterField)) {
+            if (constrained.has(this.filterKey(col)) || constrained.has(col.field)) {
                 this.revealedByConstraint.add(col.field);
             }
         }
@@ -4388,6 +4502,47 @@ class SpiderlyDataTableComponent {
             return col == null || this.isColumnSortable(col);
         });
     }
+    /**
+     * The filter twin of `keepSortableMeta` — persisted state outlives the rule that produced
+     * it, here a match mode stored before the column declared `matchModes`. It has to REWRITE
+     * storage rather than filter a value on the way past: `ColumnFilter.ngOnInit` skips
+     * `initFieldFilterConstraint()` whenever the field already carries a constraint, so our
+     * `[matchMode]` never applies to a restored one. Left alone, the column keeps filtering by
+     * a mode it no longer offers while its match-mode `<p-select>` renders blank (the stored
+     * value is not among the options). Runs before PrimeNG's `restoreState()`, which reads this
+     * same key on the first `[value]` change.
+     *
+     * Deliberately narrow: it touches only constraints whose mode the declaring column no
+     * longer offers, so every other byte of the persisted blob survives.
+     */
+    reconcilePersistedMatchModes() {
+        if (!this.resolvedStateKey)
+            return;
+        const state = this.persistedTableState();
+        if (!state?.filters)
+            return;
+        let changed = false;
+        for (const col of this.cols ?? []) {
+            if (!col.matchModes?.length)
+                continue;
+            const offered = this.getColMatchModeOptions(col);
+            const meta = state.filters[this.filterKey(col)];
+            if (!offered?.length || !Array.isArray(meta))
+                continue;
+            for (const constraint of meta) {
+                if (constraint?.matchMode == null)
+                    continue;
+                if (offered.some((option) => option.value === constraint.matchMode))
+                    continue;
+                constraint.matchMode = this.getColMatchMode(col);
+                changed = true;
+            }
+        }
+        if (!changed)
+            return;
+        const storage = this.stateStorage === 'local' ? localStorage : sessionStorage;
+        storage.setItem(this.resolvedStateKey, JSON.stringify(state));
+    }
     // Safety net: any lazy load still leaving unsorted (Clear filters — PrimeNG's clear()
     // nulls the sort and emits in one call — or stale persisted state) falls back to the
     // declared default. Patching the event before it becomes the backend Filter avoids a
@@ -4406,58 +4561,112 @@ class SpiderlyDataTableComponent {
             this.table.tableService.onSort(defaultSort);
         }
     }
+    onPageChange(container) {
+        scrollElementIntoViewIfAboveViewport(container);
+    }
+    /**
+     * The one pending predicate: PrimeNG's overlay and the container's `aria-busy` must never
+     * disagree about whether a fetch is in flight.
+     *
+     * It used to also test `items === undefined`, for the first load. That clause is dead now
+     * that `loading` initialises true and every lazyLoad raises it — except in the one state
+     * where it was actively wrong: a FAILED first load lowers the flag with `items` still
+     * undefined, which pinned the overlay up forever. Same stranded overlay this component was
+     * fixed for once already, through the other door.
+     */
+    get isPending() {
+        return this.loading;
+    }
     lazyLoad(event) {
+        // Every refetch is pending, not just the first load and reload(). `items` is deliberately
+        // left alone: the previous page stays on screen under the overlay (stale-while-revalidate)
+        // rather than blanking. Raising the flag is also what stops PrimeNG's empty message, gated
+        // on `isEmpty() && !loading`, from claiming "no records" for the length of the request.
+        this.loading = true;
         this.applyDefaultSortIfUnsorted(event);
         this.lastLazyLoadEvent = event;
         this.rangeAnchorId = null;
+        this.snapshotAppliedFilters(event.filters);
         let tableFilter = event;
         tableFilter.additionalFilterIdLong = this.additionalFilterIdLong;
         this.onLazyLoad.next(tableFilter);
+        // Issued NOW rather than after the list lands: it needs only `tableFilter`, so serialising
+        // it behind the list response cost a second round trip on every page of every
+        // selection-enabled table — and the overlay is held up for both. The `.catch` at creation
+        // is mandatory, not defensive: when the list request errors, `next` never runs, and a
+        // rejected promise nobody awaits is exactly the unowned rejection this handler exists to
+        // prevent. The rejection is re-thrown out of `awaitSelectedIds` instead, where it has one.
+        const selectedIds = this.selectedLazyLoadObservableMethod != null
+            ? firstValueFrom(this.selectedLazyLoadObservableMethod(tableFilter)).catch((error) => error)
+            : null;
         this.getPaginatedListObservableMethod(tableFilter).subscribe({
             next: async (res) => {
-                this.items = res.data;
-                this.totalRecords = res.totalRecords;
-                this.onTotalRecordsChange.next(res.totalRecords);
-                if (this.selectedLazyLoadObservableMethod != null) {
-                    let selectedRowsMethodResult = await firstValueFrom(this.selectedLazyLoadObservableMethod(tableFilter));
-                    this.currentPageSelectedItemsFromDb = [
-                        ...selectedRowsMethodResult.selectedIds,
-                    ];
-                    if (this.isFirstTimeLazyLoad == true) {
-                        this.rowsSelectedNumber =
-                            selectedRowsMethodResult.totalRecordsSelected;
-                        this.setFakeIsAllSelected();
-                        this.isFirstTimeLazyLoad = false;
-                    }
-                    if (this.isAllSelected == true) {
-                        let idsToInsert = [...this.items.map((x) => x[this.idField])];
-                        idsToInsert = idsToInsert.filter((x) => this.unselectedItems.includes(x) == false);
-                        this.fakeSelectedItems = [...idsToInsert]; // Only for showing checkboxes, we will not send this to the backend
-                    }
-                    else if (this.isAllSelected == false) {
-                        this.fakeSelectedItems = [...this.newlySelectedItems]; // Only for showing checkboxes, we will not send this to the backend
-                    }
-                    else if (this.isAllSelected == null) {
-                        let idsToInsert = [
-                            ...selectedRowsMethodResult.selectedIds,
-                            ...this.newlySelectedItems,
-                        ];
-                        idsToInsert = idsToInsert.filter((x) => this.unselectedItems.includes(x) == false);
-                        this.fakeSelectedItems = [...idsToInsert];
-                    }
+                // The await below is INSIDE an async subscriber, so a rejection there settles nothing:
+                // `error:` belongs to the paginated-list observable and never runs. That used to strand
+                // the overlay forever, hence the finally.
+                try {
+                    this.items = res.data;
+                    this.totalRecords = res.totalRecords;
+                    this.onTotalRecordsChange.next(res.totalRecords);
+                    await this.reconcileSelectionForLoadedPage(selectedIds);
                 }
-                if (this.selectedLazyLoadObservableMethod == null && this.deleteListFromTableObservableMethod) {
-                    this.fakeSelectedItems = this.items
-                        .map((x) => x[this.idField])
-                        .filter((id) => this.newlySelectedItems.includes(id));
+                catch (error) {
+                    // The library's own owner: it toasts, it skips HttpErrorResponse (the interceptor
+                    // already reported those), and a consumer's ErrorHandler wrapper forwards to their
+                    // tracker. console.error here would have dropped both.
+                    this.errorHandler.handleError(error);
+                }
+                finally {
+                    this.loading = false;
                 }
-                this.loading = false;
             },
             error: () => {
                 this.loading = false;
             },
         });
     }
+    /**
+     * Repaints the checkbox column for the page that just landed. Split out of the subscriber so
+     * the try/finally that guarantees the pending flag wraps an await, not fifty lines of
+     * selection algebra.
+     */
+    async reconcileSelectionForLoadedPage(selectedIds) {
+        if (selectedIds == null) {
+            if (this.deleteListFromTableObservableMethod) {
+                this.fakeSelectedItems = this.items
+                    .map((x) => x[this.idField])
+                    .filter((id) => this.newlySelectedItems.includes(id));
+            }
+            return;
+        }
+        const selectedRowsMethodResult = await selectedIds;
+        if (selectedRowsMethodResult instanceof Error)
+            throw selectedRowsMethodResult;
+        this.currentPageSelectedItemsFromDb = [
+            ...selectedRowsMethodResult.selectedIds,
+        ];
+        if (this.isFirstTimeLazyLoad == true) {
+            this.rowsSelectedNumber = selectedRowsMethodResult.totalRecordsSelected;
+            this.setFakeIsAllSelected();
+            this.isFirstTimeLazyLoad = false;
+        }
+        if (this.isAllSelected == true) {
+            let idsToInsert = [...this.items.map((x) => x[this.idField])];
+            idsToInsert = idsToInsert.filter((x) => this.unselectedItems.includes(x) == false);
+            this.fakeSelectedItems = [...idsToInsert]; // Only for showing checkboxes, we will not send this to the backend
+        }
+        else if (this.isAllSelected == false) {
+            this.fakeSelectedItems = [...this.newlySelectedItems]; // Only for showing checkboxes, we will not send this to the backend
+        }
+        else if (this.isAllSelected == null) {
+            let idsToInsert = [
+                ...selectedRowsMethodResult.selectedIds,
+                ...this.newlySelectedItems,
+            ];
+            idsToInsert = idsToInsert.filter((x) => this.unselectedItems.includes(x) == false);
+            this.fakeSelectedItems = [...idsToInsert];
+        }
+    }
     clientLoad() {
         this.loading = false;
         this.loadFormArrayItems();
@@ -4473,6 +4682,8 @@ class SpiderlyDataTableComponent {
         this.setFakeIsAllSelected();
     }
     filter(event) {
+        // Fires from _filter(), i.e. only once a filter is COMMITTED — never on a keystroke.
+        this.snapshotAppliedFilters(event.filters ?? this.table?.filters);
         if (this.hasLazyLoad && this.selectionMode === 'multiple')
             this.selectAll(false); // We need to do it like this because: totalRecords: 1 -> selectedRecords from earlyer selection 2 -> unselect current -> all checkbox is set to true
         if (this.hasLazyLoad === false && this.selectionMode === 'multiple') {
@@ -4504,29 +4715,76 @@ class SpiderlyDataTableComponent {
             !!col.field &&
             !col.field.endsWith('CommaSeparated'));
     }
-    /** The column's declared {@link Column.minWidth}, or the default for its filter type. */
-    getColHeaderWidth(col) {
-        if (col.minWidth != null)
-            return `min-width: ${col.minWidth};`;
-        switch (col.filterType) {
-            case 'text':
-                return 'min-width: 12rem;';
-            case 'date':
-                return 'min-width: 10rem;';
-            case 'multiselect':
-                return 'min-width: 12rem;';
-            case 'boolean':
-                return 'min-width: 8rem;';
-            case 'numeric':
-                return 'min-width: 12rem;';
-            default:
-                return 'width: 0rem;'; // fitting content of the row like this
-        }
+    /**
+     * The column's declared {@link Column.width}, or the default for its filter type.
+     *
+     * A width, not a minimum: under the fixed layout {@link tableStyle} establishes, this is what
+     * the column is sized from, and the table shares its surplus in PROPORTION to these numbers.
+     * Columns declaring none would otherwise take an equal share, which throws away what the
+     * per-type defaults say — a boolean holds "Da"/"Ne", a text column holds a name.
+     */
+    getColWidth(col) {
+        if (col.width != null)
+            return col.width;
+        if (col.filterType)
+            return `${DEFAULT_COLUMN_WIDTH_REM[col.filterType]}rem`;
+        // What is left declares no filterType: an actions column. It cannot shrink to fit any more,
+        // so the icons need a reservation — each sits in a flex row whose gap is set beside them in
+        // the template, inside the cell's own padding. 2.5, not 2.2, so the arithmetic stays exact in
+        // binary and the string never reads `8.6000000001rem`.
+        return `${2 + (col.actions?.length ?? 0) * 2.5}rem`;
+    }
+    getColMatchModeOptions(col) {
+        return this.resolveMatchModes(col).options;
+    }
+    getColMatchMode(col) {
+        return this.resolveMatchModes(col).defaultMode;
+    }
+    resolveMatchModes(col) {
+        const cached = this.matchModeResolutions.get(col);
+        if (cached && cached.source === col.matchModes)
+            return cached.resolution;
+        const resolution = this.computeMatchModes(col);
+        this.matchModeResolutions.set(col, {
+            source: col.matchModes,
+            resolution,
+        });
+        return resolution;
     }
-    getColMatchModeOptions(filterType) {
+    /**
+     * Applies `Column.matchModes`, and refuses to half-apply it. Both ways a declaration can
+     * be wrong are consumer mistakes that PrimeNG would otherwise turn into a broken filter
+     * rather than an error: it reads `matchModeOptions || <type defaults>`, so handing it
+     * `[]` renders an EMPTY dropdown (an empty array is truthy) while the default mode still
+     * seeds the constraint, and handing it `null` silently restores PrimeNG's own list. So an
+     * unusable narrowing falls back to the full list and says so, instead of shipping a
+     * dropdown the user cannot pick from.
+     */
+    computeMatchModes(col) {
+        const options = this.matchModeOptionsForType(col.filterType);
+        const typeDefault = this.defaultMatchModeForType(col.filterType);
+        const declared = col.matchModes;
+        if (!declared?.length)
+            return { options, defaultMode: typeDefault };
+        if (!options?.length) {
+            console.error(`spiderly-data-table: column "${col.field}" declares matchModes, but filterType "${col.filterType}" has no match modes to narrow — ignoring.`);
+            return { options, defaultMode: typeDefault };
+        }
+        const narrowed = declared
+            .map((code) => options.find((option) => option.value === code))
+            .filter((option) => option != null);
+        if (narrowed.length !== declared.length) {
+            const unsupported = declared.filter((code) => !options.some((option) => option.value === code));
+            console.error(`spiderly-data-table: column "${col.field}" declares match mode(s) [${unsupported.join(', ')}] that filterType "${col.filterType}" does not support — ignoring them.`);
+        }
+        if (!narrowed.length)
+            return { options, defaultMode: typeDefault };
+        return { options: narrowed, defaultMode: narrowed[0].value };
+    }
+    matchModeOptionsForType(filterType) {
         switch (filterType) {
             case 'text':
-                return null;
+                return this.matchModeTextOptions;
             case 'date':
                 return this.matchModeDateOptions;
             case 'multiselect':
@@ -4539,7 +4797,7 @@ class SpiderlyDataTableComponent {
                 return null;
         }
     }
-    getColMatchMode(filterType) {
+    defaultMatchModeForType(filterType) {
         switch (filterType) {
             case 'text':
                 return MatchModeCodes.Contains;
@@ -4563,6 +4821,30 @@ class SpiderlyDataTableComponent {
             return false;
         }
     }
+    /**
+     * Whether the filter type applies on every value change, which hides the menu's Apply
+     * button — an Apply there would promise a pending state that cannot exist. Boolean
+     * auto-applies through PrimeNG's own `onModelChange`; date and dropdown/multiselect
+     * through the filter templates THIS component projects, which call `filterCallback`
+     * directly (PrimeNG's built-in element, and with it its `onModelChange`, is only
+     * rendered when no template is projected — so the date path is ours, not PrimeNG's).
+     * With showApplyButton off, PrimeNG also auto-applies match-mode, operator and
+     * constraint-removal changes, so the whole menu stays consistent. Typed input
+     * (text/numeric) is deliberately NOT here — it commits on Enter/Apply, since applying
+     * per keystroke would fire a lazy load per key. Listing the auto types (not the typed
+     * ones) is the safe polarity: an unlisted future type keeps its Apply button rather
+     * than silently losing its commit.
+     *
+     * Known gap this does not close, and it predates the flag: the projected date template
+     * binds `[ngModel]` one-way and commits on `(onSelect)`, which the datepicker raises for
+     * a calendar pick but not for `onUserInput` — so a date TYPED into the field never
+     * reaches the constraint at all, with or without an Apply button.
+     */
+    filterAppliesOnChange(filterType) {
+        return (filterType === 'boolean' ||
+            filterType === 'date' ||
+            this.isDropOrMulti(filterType));
+    }
     /*
      * Navigate to details page based on rowId and rowNavigationPath.
      * If rowNavigationPath is provided, it will navigate to that path with the rowId.
@@ -4675,8 +4957,10 @@ class SpiderlyDataTableComponent {
         this.fakeIsAllSelected = false;
     }
     reload() {
-        this.loading = true;
-        this.items = null;
+        // Nothing to replay before the table's own initial load, which is already on its way.
+        if (this.lastLazyLoadEvent == null)
+            return;
+        // Not special: same refetch as a page flip, so lazyLoad owns both the flag and `items`.
         this.lazyLoad(this.lastLazyLoadEvent);
     }
     showActions() {
@@ -4775,6 +5059,9 @@ class SpiderlyDataTableComponent {
     clear(table) {
         table.clear();
         table.clearState();
+        // clear() re-queries without emitting (onFilter), so the icons would keep their fill
+        // on a client-side table; on a lazy one lazyLoad already covers it.
+        this.snapshotAppliedFilters(table.filters);
     }
     //#region Selection
     setFakeIsAllSelected() {
@@ -4947,8 +5234,8 @@ class SpiderlyDataTableComponent {
             return null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, deps: [{ token: i3$2.Router }, { token: i1$5.DialogService }, { token: i3$2.ActivatedRoute }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }, { token: ConfigServiceBase }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", deleteListFromTableObservableMethod: "deleteListFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", stateKey: "stateKey", stateStorage: "stateStorage", defaultSortField: "defaultSortField", defaultSortOrder: "defaultSortOrder", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes", navigateOnRowClick: "navigateOnRowClick", rowNavigationPath: "rowNavigationPath" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: SpiderlyDataTableActionsDirective, descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: SpiderlyCellTemplateDirective }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 0rem\" *ngIf=\"selectionMode == 'multiple'\">\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style]=\"getColHeaderWidth(col)\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                </span>\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"col.filterField ?? col.field\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n                  [matchMode]=\"getColMatchMode(col.filterType)\"\n                >\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            {{ displayValue }}\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td *ngIf=\"col.editable\" class=\"row-interactive\">\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"loadingbody\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"Loading\") }}...\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnVisibility()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i12.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, deps: [{ token: i3$2.Router }, { token: i1$5.DialogService }, { token: i3$2.ActivatedRoute }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }, { token: ConfigServiceBase }, { token: i0.ErrorHandler }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", deleteListFromTableObservableMethod: "deleteListFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", stateKey: "stateKey", stateStorage: "stateStorage", defaultSortField: "defaultSortField", defaultSortOrder: "defaultSortOrder", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes", navigateOnRowClick: "navigateOnRowClick", rowNavigationPath: "rowNavigationPath" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: SpiderlyDataTableActionsDirective, descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: SpiderlyCellTemplateDirective }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    #tableContainer\n    class=\"spiderly-table-container\"\n    [attr.aria-busy]=\"isPending\"\n    [ngClass]=\"{\n      'card responsive-card-padding overflow-auto': showCardWrapper\n    }\"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n      [tableStyle]=\"tableStyle\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <!-- Sized for the checkbox plus the counter beside it, which shows `totalRecords` on a\n               select-all and so reaches five digits on a large table. Not `0rem` (see CLAUDE.md \u2192\n               Column widths), and not routed through getColWidth: this column has no `Column`. -->\n          <th style=\"width: 6rem\" *ngIf=\"selectionMode == 'multiple'\">\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                </span>\n                <!-- hideOnClear: Apply is what closes this menu in PrimeNG (applyFilter =\n                     _filter + hide), so wherever Apply is hidden Clear is the only button\n                     left and would otherwise clear-and-linger. Committing a VALUE still\n                     leaves the menu open deliberately \u2014 a multiselect gets ticked several\n                     times per visit; dismissal is the popover's own (outside click, Esc). -->\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"filterKey(col)\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [showApplyButton]=\"!filterAppliesOnChange(col.filterType)\"\n                  [hideOnClear]=\"true\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col)\"\n                  [matchMode]=\"getColMatchMode(col)\"\n                >\n                  <!-- Marks a filtered column \u2014 PrimeNG's own <FilterIcon> cannot\n                       (CLAUDE.md \u2192 \"Active-filter header icon\"). Colour: the SCSS. -->\n                  <ng-template pTemplate=\"filtericon\">\n                    <i\n                      [class]=\"\n                        isColumnFiltered(col) ? 'pi pi-filter-fill' : 'pi pi-filter'\n                      \"\n                    ></i>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            <span class=\"cell-text\">{{ displayValue }}</span>\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <!-- getColWidth reserves this column's width from `actions.length`; this gap is\n                   the geometry it reserves for, so changing it belongs in the same edit. -->\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td *ngIf=\"col.editable\" class=\"row-interactive\">\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnVisibility()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}.pi-filter-fill{color:var(--p-primary-color)}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host .cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-datatable-mask{background:color-mix(in srgb,var(--p-content-background, #ffffff) 65%,transparent);color:var(--p-primary-color, #334155);align-items:flex-start;padding-top:6rem}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i12.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
             type: Component,
@@ -4964,8 +5251,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         DatePickerModule,
                         CheckboxModule,
                         TooltipModule,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 0rem\" *ngIf=\"selectionMode == 'multiple'\">\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style]=\"getColHeaderWidth(col)\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                </span>\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"col.filterField ?? col.field\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n                  [matchMode]=\"getColMatchMode(col.filterType)\"\n                >\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            {{ displayValue }}\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td *ngIf=\"col.editable\" class=\"row-interactive\">\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"loadingbody\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"Loading\") }}...\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnVisibility()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$5.DialogService }, { type: i3$2.ActivatedRoute }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }, { type: ConfigServiceBase }, { type: undefined, decorators: [{
+                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    #tableContainer\n    class=\"spiderly-table-container\"\n    [attr.aria-busy]=\"isPending\"\n    [ngClass]=\"{\n      'card responsive-card-padding overflow-auto': showCardWrapper\n    }\"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n      [tableStyle]=\"tableStyle\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <!-- Sized for the checkbox plus the counter beside it, which shows `totalRecords` on a\n               select-all and so reaches five digits on a large table. Not `0rem` (see CLAUDE.md \u2192\n               Column widths), and not routed through getColWidth: this column has no `Column`. -->\n          <th style=\"width: 6rem\" *ngIf=\"selectionMode == 'multiple'\">\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                </span>\n                <!-- hideOnClear: Apply is what closes this menu in PrimeNG (applyFilter =\n                     _filter + hide), so wherever Apply is hidden Clear is the only button\n                     left and would otherwise clear-and-linger. Committing a VALUE still\n                     leaves the menu open deliberately \u2014 a multiselect gets ticked several\n                     times per visit; dismissal is the popover's own (outside click, Esc). -->\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"filterKey(col)\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [showApplyButton]=\"!filterAppliesOnChange(col.filterType)\"\n                  [hideOnClear]=\"true\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col)\"\n                  [matchMode]=\"getColMatchMode(col)\"\n                >\n                  <!-- Marks a filtered column \u2014 PrimeNG's own <FilterIcon> cannot\n                       (CLAUDE.md \u2192 \"Active-filter header icon\"). Colour: the SCSS. -->\n                  <ng-template pTemplate=\"filtericon\">\n                    <i\n                      [class]=\"\n                        isColumnFiltered(col) ? 'pi pi-filter-fill' : 'pi pi-filter'\n                      \"\n                    ></i>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            <span class=\"cell-text\">{{ displayValue }}</span>\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <!-- getColWidth reserves this column's width from `actions.length`; this gap is\n                   the geometry it reserves for, so changing it belongs in the same edit. -->\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td *ngIf=\"col.editable\" class=\"row-interactive\">\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnVisibility()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}.pi-filter-fill{color:var(--p-primary-color)}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host .cell-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep .p-datatable-mask{background:color-mix(in srgb,var(--p-content-background, #ffffff) 65%,transparent);color:var(--p-primary-color, #334155);align-items:flex-start;padding-top:6rem}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
+        }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$5.DialogService }, { type: i3$2.ActivatedRoute }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }, { type: ConfigServiceBase }, { type: i0.ErrorHandler }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
                 }] }], propDecorators: { table: [{
@@ -5067,13 +5354,14 @@ class Action {
     }
 }
 class Column {
-    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, minWidth, onCellClick, } = {}) {
+    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, matchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, width, onCellClick, } = {}) {
         this.name = name;
         this.field = field;
         this.filterField = filterField;
         this.filterType = filterType;
         this.filterPlaceholder = filterPlaceholder;
         this.showMatchModes = showMatchModes;
+        this.matchModes = matchModes;
         this.showAddButton = showAddButton;
         this.dropdownOrMultiselectValues = dropdownOrMultiselectValues;
         this.actions = actions;
@@ -5083,7 +5371,7 @@ class Column {
         this.sortable = sortable;
         this.visible = visible;
         this.lockVisible = lockVisible;
-        this.minWidth = minWidth;
+        this.width = width;
         this.onCellClick = onCellClick;
     }
 }
@@ -5156,7 +5444,24 @@ class SpiderlyDataViewComponent {
             },
         ];
     }
+    // Paging semantics and the scroll-margin contract are documented once, on the data table:
+    // spiderly-data-table/CLAUDE.md → "Scroll back to the table on page change".
+    onPageChange(container) {
+        scrollElementIntoViewIfAboveViewport(container);
+    }
+    /**
+     * The one pending predicate: PrimeNG's overlay and the container's `aria-busy` must never
+     * disagree. Mirrors the data table's, including why it is not also testing `items`; the
+     * rationale lives there.
+     */
+    get isPending() {
+        return this.loading;
+    }
     lazyLoad(event) {
+        // Every refetch is pending, not just the first load. `items` is deliberately left alone so
+        // the previous page stays readable under the overlay. Full reasoning: the data table's
+        // CLAUDE.md → "Pending state".
+        this.loading = true;
         this.lastLazyLoadEvent = event;
         const transformedFilter = {};
         for (const key in event.filters) {
@@ -5177,7 +5482,7 @@ class SpiderlyDataViewComponent {
         tableFilter.filters = transformedFilter;
         this.onLazyLoad.next(tableFilter);
         this.getPaginatedListObservableMethod(tableFilter).subscribe({
-            next: async (res) => {
+            next: (res) => {
                 this.items = res.data;
                 this.totalRecords = res.totalRecords;
                 this.loading = false;
@@ -5221,8 +5526,10 @@ class SpiderlyDataViewComponent {
         }
     }
     reload() {
-        this.loading = true;
-        this.items = null;
+        // Nothing to replay before the initial load, which is already on its way.
+        if (this.lastLazyLoadEvent == null)
+            return;
+        // Not special: same refetch as a page flip, so lazyLoad owns both the flag and `items`.
         this.lazyLoad(this.lastLazyLoadEvent);
     }
     colTrackByFn(index, item) {
@@ -5235,7 +5542,7 @@ class SpiderlyDataViewComponent {
         this.table.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, deps: [{ token: i1.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getPaginatedListObservableMethod: "getPaginatedListObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowHover]=\"false\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"true\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      [filterDelay]=\"500\"\n      [paginator]=\"true\"\n    >\n      <ng-template #caption>\n        <div *ngIf=\"filters.length !== 0\">\n          <div class=\"data-view-grid\">\n            @for (filter of filters; track $index) {\n              <div>\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0.5rem;\n                    position: relative;\n                  \"\n                >\n                  <div>\n                    <label>\n                      {{ filter.label }}\n                    </label>\n                  </div>\n\n                  <p-columnFilter\n                    *ngIf=\"filter.type != null\"\n                    [type]=\"filter.type\"\n                    [field]=\"filter.filterField ?? filter.field\"\n                    display=\"row\"\n                    [placeholder]=\"filter.placeholder\"\n                    [showOperator]=\"false\"\n                    [showMenu]=\"filter.showMatchModes\"\n                    [showMatchModes]=\"true\"\n                    [showClearButton]=\"false\"\n                    [matchMode]=\"getDefaultMatchMode(filter.type)\"\n                    [matchModeOptions]=\"getMatchModeOptions(filter.type)\"\n                  >\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filter=\"filterCallback\"\n                      >\n                        <p-multiSelect\n                          [ngModel]=\"value\"\n                          [options]=\"filter.dropdownOrMultiselectValues\"\n                          [placeholder]=\"t('All')\"\n                          (onChange)=\"filter($event.value)\"\n                          optionLabel=\"label\"\n                          optionValue=\"code\"\n                          [style]=\"{ width: '100%' }\"\n                        >\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"p-multiselect-representative-option\">\n                              <span class=\"ml-2\">{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </p-multiSelect>\n                      </ng-template>\n                    </ng-container>\n                  </p-columnFilter>\n                </div>\n              </div>\n            }\n          </div>\n          <div style=\"display: flex; gap: 12px\">\n            <spiderly-button\n              [label]=\"t('ApplyFilters')\"\n              (onClick)=\"applyFilters()\"\n              [icon]=\"applyFiltersIcon\"\n            ></spiderly-button>\n            <spiderly-button\n              [label]=\"t('ClearFilters')\"\n              (onClick)=\"clearFilters()\"\n              [icon]=\"clearFiltersIcon\"\n            ></spiderly-button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #body let-rowData let-index=\"rowIndex\">\n        <tr style=\"padding: 0; margin-bottom: 0\">\n          <td style=\"display: block; border: 0; padding: 0\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cardBody;\n                context: { $implicit: rowData, item: rowData, index: index }\n              \"\n            >\n            </ng-container>\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        {{ t(\"NoRecordsFound\") }}\n      </ng-template>\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n      </ng-template>\n    </p-table>\n  </div>\n</ng-container>\n", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getPaginatedListObservableMethod: "getPaginatedListObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    #tableContainer\n    class=\"spiderly-table-container\"\n    [attr.aria-busy]=\"isPending\"\n    [ngClass]=\"{\n      'card responsive-card-padding overflow-auto': showCardWrapper\n    }\"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowHover]=\"false\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"true\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      [filterDelay]=\"500\"\n      [paginator]=\"true\"\n    >\n      <ng-template #caption>\n        <div *ngIf=\"filters.length !== 0\">\n          <div class=\"data-view-grid\">\n            @for (filter of filters; track $index) {\n              <div>\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0.5rem;\n                    position: relative;\n                  \"\n                >\n                  <div>\n                    <label>\n                      {{ filter.label }}\n                    </label>\n                  </div>\n\n                  <p-columnFilter\n                    *ngIf=\"filter.type != null\"\n                    [type]=\"filter.type\"\n                    [field]=\"filter.filterField ?? filter.field\"\n                    display=\"row\"\n                    [placeholder]=\"filter.placeholder\"\n                    [showOperator]=\"false\"\n                    [showMenu]=\"filter.showMatchModes\"\n                    [showMatchModes]=\"true\"\n                    [showClearButton]=\"false\"\n                    [matchMode]=\"getDefaultMatchMode(filter.type)\"\n                    [matchModeOptions]=\"getMatchModeOptions(filter.type)\"\n                  >\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filter=\"filterCallback\"\n                      >\n                        <p-multiSelect\n                          [ngModel]=\"value\"\n                          [options]=\"filter.dropdownOrMultiselectValues\"\n                          [placeholder]=\"t('All')\"\n                          (onChange)=\"filter($event.value)\"\n                          optionLabel=\"label\"\n                          optionValue=\"code\"\n                          [style]=\"{ width: '100%' }\"\n                        >\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"p-multiselect-representative-option\">\n                              <span class=\"ml-2\">{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </p-multiSelect>\n                      </ng-template>\n                    </ng-container>\n                  </p-columnFilter>\n                </div>\n              </div>\n            }\n          </div>\n          <div style=\"display: flex; gap: 12px\">\n            <spiderly-button\n              [label]=\"t('ApplyFilters')\"\n              (onClick)=\"applyFilters()\"\n              [icon]=\"applyFiltersIcon\"\n            ></spiderly-button>\n            <spiderly-button\n              [label]=\"t('ClearFilters')\"\n              (onClick)=\"clearFilters()\"\n              [icon]=\"clearFiltersIcon\"\n            ></spiderly-button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #body let-rowData let-index=\"rowIndex\">\n        <tr style=\"padding: 0; margin-bottom: 0\">\n          <td style=\"display: block; border: 0; padding: 0\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cardBody;\n                context: { $implicit: rowData, item: rowData, index: index }\n              \"\n            >\n            </ng-container>\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        {{ t(\"NoRecordsFound\") }}\n      </ng-template>\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n      </ng-template>\n    </p-table>\n  </div>\n</ng-container>\n", styles: [":host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}:host ::ng-deep .p-datatable-mask{background:color-mix(in srgb,var(--p-content-background, #ffffff) 65%,transparent);color:var(--p-primary-color, #334155);align-items:flex-start;padding-top:6rem}::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, decorators: [{
             type: Component,
@@ -5253,7 +5560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         InputTextModule,
                         InputNumberModule,
                         SelectModule,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowHover]=\"false\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"true\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      [filterDelay]=\"500\"\n      [paginator]=\"true\"\n    >\n      <ng-template #caption>\n        <div *ngIf=\"filters.length !== 0\">\n          <div class=\"data-view-grid\">\n            @for (filter of filters; track $index) {\n              <div>\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0.5rem;\n                    position: relative;\n                  \"\n                >\n                  <div>\n                    <label>\n                      {{ filter.label }}\n                    </label>\n                  </div>\n\n                  <p-columnFilter\n                    *ngIf=\"filter.type != null\"\n                    [type]=\"filter.type\"\n                    [field]=\"filter.filterField ?? filter.field\"\n                    display=\"row\"\n                    [placeholder]=\"filter.placeholder\"\n                    [showOperator]=\"false\"\n                    [showMenu]=\"filter.showMatchModes\"\n                    [showMatchModes]=\"true\"\n                    [showClearButton]=\"false\"\n                    [matchMode]=\"getDefaultMatchMode(filter.type)\"\n                    [matchModeOptions]=\"getMatchModeOptions(filter.type)\"\n                  >\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filter=\"filterCallback\"\n                      >\n                        <p-multiSelect\n                          [ngModel]=\"value\"\n                          [options]=\"filter.dropdownOrMultiselectValues\"\n                          [placeholder]=\"t('All')\"\n                          (onChange)=\"filter($event.value)\"\n                          optionLabel=\"label\"\n                          optionValue=\"code\"\n                          [style]=\"{ width: '100%' }\"\n                        >\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"p-multiselect-representative-option\">\n                              <span class=\"ml-2\">{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </p-multiSelect>\n                      </ng-template>\n                    </ng-container>\n                  </p-columnFilter>\n                </div>\n              </div>\n            }\n          </div>\n          <div style=\"display: flex; gap: 12px\">\n            <spiderly-button\n              [label]=\"t('ApplyFilters')\"\n              (onClick)=\"applyFilters()\"\n              [icon]=\"applyFiltersIcon\"\n            ></spiderly-button>\n            <spiderly-button\n              [label]=\"t('ClearFilters')\"\n              (onClick)=\"clearFilters()\"\n              [icon]=\"clearFiltersIcon\"\n            ></spiderly-button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #body let-rowData let-index=\"rowIndex\">\n        <tr style=\"padding: 0; margin-bottom: 0\">\n          <td style=\"display: block; border: 0; padding: 0\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cardBody;\n                context: { $implicit: rowData, item: rowData, index: index }\n              \"\n            >\n            </ng-container>\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        {{ t(\"NoRecordsFound\") }}\n      </ng-template>\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n      </ng-template>\n    </p-table>\n  </div>\n</ng-container>\n", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"] }]
+                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    #tableContainer\n    class=\"spiderly-table-container\"\n    [attr.aria-busy]=\"isPending\"\n    [ngClass]=\"{\n      'card responsive-card-padding overflow-auto': showCardWrapper\n    }\"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowHover]=\"false\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"true\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      [filterDelay]=\"500\"\n      [paginator]=\"true\"\n    >\n      <ng-template #caption>\n        <div *ngIf=\"filters.length !== 0\">\n          <div class=\"data-view-grid\">\n            @for (filter of filters; track $index) {\n              <div>\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0.5rem;\n                    position: relative;\n                  \"\n                >\n                  <div>\n                    <label>\n                      {{ filter.label }}\n                    </label>\n                  </div>\n\n                  <p-columnFilter\n                    *ngIf=\"filter.type != null\"\n                    [type]=\"filter.type\"\n                    [field]=\"filter.filterField ?? filter.field\"\n                    display=\"row\"\n                    [placeholder]=\"filter.placeholder\"\n                    [showOperator]=\"false\"\n                    [showMenu]=\"filter.showMatchModes\"\n                    [showMatchModes]=\"true\"\n                    [showClearButton]=\"false\"\n                    [matchMode]=\"getDefaultMatchMode(filter.type)\"\n                    [matchModeOptions]=\"getMatchModeOptions(filter.type)\"\n                  >\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filter=\"filterCallback\"\n                      >\n                        <p-multiSelect\n                          [ngModel]=\"value\"\n                          [options]=\"filter.dropdownOrMultiselectValues\"\n                          [placeholder]=\"t('All')\"\n                          (onChange)=\"filter($event.value)\"\n                          optionLabel=\"label\"\n                          optionValue=\"code\"\n                          [style]=\"{ width: '100%' }\"\n                        >\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"p-multiselect-representative-option\">\n                              <span class=\"ml-2\">{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </p-multiSelect>\n                      </ng-template>\n                    </ng-container>\n                  </p-columnFilter>\n                </div>\n              </div>\n            }\n          </div>\n          <div style=\"display: flex; gap: 12px\">\n            <spiderly-button\n              [label]=\"t('ApplyFilters')\"\n              (onClick)=\"applyFilters()\"\n              [icon]=\"applyFiltersIcon\"\n            ></spiderly-button>\n            <spiderly-button\n              [label]=\"t('ClearFilters')\"\n              (onClick)=\"clearFilters()\"\n              [icon]=\"clearFiltersIcon\"\n            ></spiderly-button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #body let-rowData let-index=\"rowIndex\">\n        <tr style=\"padding: 0; margin-bottom: 0\">\n          <td style=\"display: block; border: 0; padding: 0\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cardBody;\n                context: { $implicit: rowData, item: rowData, index: index }\n              \"\n            >\n            </ng-container>\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        {{ t(\"NoRecordsFound\") }}\n      </ng-template>\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n      </ng-template>\n    </p-table>\n  </div>\n</ng-container>\n", styles: [":host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}:host ::ng-deep .p-datatable-mask{background:color-mix(in srgb,var(--p-content-background, #ffffff) 65%,transparent);color:var(--p-primary-color, #334155);align-items:flex-start;padding-top:6rem}::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslocoService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -5779,5 +6086,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthCardComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, DEFAULT_EXTERNAL_PROVIDER_ICONS, ExternalLoginComponent, ExternalProvider, ExternalProviderPublic, Filter, FilterRule, FilterSortMeta, FooterComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCellTemplateDirective, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableActionsDirective, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyLoginComponent, SpiderlyMarkdownComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, getPrimengNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, parseDateOnlyLocal, pushAction, saveResponseAsFile, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
+export { Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthCardComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, DEFAULT_EXTERNAL_PROVIDER_ICONS, ExternalLoginComponent, ExternalProvider, ExternalProviderPublic, Filter, FilterRule, FilterSortMeta, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCellTemplateDirective, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableActionsDirective, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyLoginComponent, SpiderlyMarkdownComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, getPrimengNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, parseDateOnlyLocal, pushAction, saveResponseAsFile, scrollElementIntoViewIfAboveViewport, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
 //# sourceMappingURL=spiderly.mjs.map