spiderly 19.12.3 → 19.13.0

package/agent/docs/angular-customization/index.md

@@ -268,9 +268,24 @@ The table renders the store as a **chip bar** above the header: one chip per *ap
 
 **Views** (`[views]`, `TableView[]`) are saved questions rendered as tabs above the bar: each `apply` receives the cleared store (a view is a state, not an addition) and writes with `setAndCommit`; a view whose apply is a function of *now* ("received today") declares `transient: true` so selecting it re-derives instead of restoring yesterday's answer. Column layout (visibility, order, widths, wrap) persists per view. A stored view id whose view is not in `[views]` yet (async-licensed views) is adopted when it arrives — unless the operator picked another tab meanwhile — and a restored transient view re-derives its question. **Sort is view state too**: entering a view resolves the user's per-view sort override ?? the view's declared `sort` ?? the table's `defaultSortField` ?? unsorted — it never inherits the previous tab's ordering, so give the catch-all first view a table-level default when "newest first" isn't what you want there.
 
+**A view tab can show a count**: `count?: number | null` renders a badge beside the label (`null` or absent shows none, `0` shows one). The table never computes it — run your own count query beside each list load and rebuild `[views]` with the fresh numbers, keeping each view's `id` stable. A rebuild neither re-enters the active view nor sends a request: a stored view id is adopted only from a change that *brings* that view, and the tabs are tracked by `id`, so the focused tab keeps focus.
+
+```typescript
+this.views = this.views.map((view) => ({ ...view, count: counts[view.id] }));
+```
+
+**A view can declare its columns**: `columns` is a field → visible map that overrides `Column.visible` in that view only, naming just the deviation — a column it does not name keeps its `Column.visible`. Visibility resolves per field as the user's own per-view choice ?? the view's `columns` ?? `Column.visible`; the user's choice is stored only where it differs from the view's declaration, *Reset to default* returns to the declaration, and `lockVisible` columns always show. To swap one column for another, declare them next to each other in `cols` (the swapped-in one `visible: false`) and the view's column takes the other's place. Type the row as the second generic to check the field names.
+
+```typescript
+const views: TableView<OrderFilters, Order>[] = [
+  { id: 'all', label: 'All' },
+  { id: 'late', label: 'Late goods', columns: { why: true, assignedLocation: false } },
+];
+```
+
 ### Column chooser (show/hide columns)
 
-Lazy tables render a **Columns** toolbar button opening a checkbox list of all data columns. Declare rarely-needed columns with `visible: false` (available in the chooser, hidden by default) and pin the row's identifying column with `lockVisible: true`. Hiding a column never touches its filter or sort — the chip bar is where both stay visible. Choices persist per table in `localStorage` under `` `${stateKey}:columns` `` (durable even with `stateStorage: 'session'`; only explicit toggles are stored, so later declared-default changes flow through), the last visible data column can't be hidden, and *Reset to default* restores the declared configuration.
+Lazy tables render a **Columns** toolbar button opening a checkbox list of all data columns. Declare rarely-needed columns with `visible: false` (available in the chooser, hidden by default) and pin the row's identifying column with `lockVisible: true`. Hiding a column never touches its filter or sort — the chip bar is where both stay visible. Choices persist per table in `localStorage` under `` `${stateKey}:columns` `` (durable even with `stateStorage: 'session'`; only explicit toggles are stored, so later declared-default changes flow through), the last visible data column can't be hidden, and *Reset to default* restores the declared configuration. On a table with `[views]` the key carries the view (`` `${stateKey}:${viewId}:columns` ``) and the declared configuration is the active view's `columns` over `Column.visible`.
 
 The `onClick` callback receives an `ActionClickEvent` — `{ id, row, element, originalEvent }`. Use `element` (or `originalEvent`) to anchor an overlay/popover to the clicked action; `row` gives you the full row object. It fires only for custom `field` values (never `'Details'` / `'Delete'`).
 
@@ -371,7 +386,7 @@ Set the inset rather than stretching `--spiderly-topbar-height`, which is the to
 | ---------------------------------- | ------------------------ | ------- | ----------------------- |
 | `cols`                             | `Column[]`               | —       | Column definitions      |
 | `filters`                          | `FilterSource`           | —       | The page's filter store (see Filtering); read once at init |
-| `views`                            | `TableView[]`            | —       | Saved questions rendered as tabs above the bar |
+| `views`                            | `TableView[]`            | —       | Saved questions rendered as tabs above the bar, each with an optional `count` badge and declared `columns` |
 | `getPaginatedListObservableMethod` | `(filter) => Observable` | —       | Server-side data source |
 | `additionalFilterIdLong`           | `number`                 | —       | Parent entity filter    |
 | `hasLazyLoad`                      | `boolean`                | `true`  | Server vs client mode   |

package/agent/docs/entity-design/index.md

@@ -89,8 +89,8 @@ public virtual Brand Brand { get; set; }
 ### Rules
 
 - Naming convention: `{NavigationName}Id` — resolved automatically. Use `[ForeignKey(nameof(OtherName))]` only when you need a different scalar name.
-- Nullability must match the relationship: `[Required]` navigation → non-nullable scalar (`long BrandId`); optional nav (`[SetNull]`) → nullable scalar (`long? BrandId`). Mismatch raises **SPID001**.
-- Scalar type must match the parent's `Id` type (`byte`/`int`/`long`). Mismatch raises **SPID003**.
+- Nullability must match the relationship: `[Required]` navigation → non-nullable scalar (`long BrandId`); optional nav (`[SetNull]`) → nullable scalar (`long? BrandId`). Mismatch raises **SPIDERLY006**.
+- Scalar type must match the parent's `Id` type (`byte`/`int`/`long`). Mismatch raises **SPIDERLY004**.
 
 ### Caveat — generated CRUD still loads the nav
 

package/fesm2022/spiderly.mjs

@@ -5243,8 +5243,12 @@ class SpiderlyDataTableComponent {
         // Only meaningful once ngOnInit has resolved the defaults; before that it is a no-op re-run.
         if (this.rows != null)
             this.mergeActivePageSizesIntoOptions();
-        if (changes['views'])
-            this.adoptStoredView();
+        const viewsChange = changes['views'];
+        if (viewsChange && !viewsChange.firstChange) {
+            this.adoptStoredView(viewsChange.previousValue);
+            // The active view's `columns` may differ in the new array, or the view may be gone from it.
+            this.refreshVisibleCols();
+        }
     }
     ngOnInit() {
         // Fail loud, not half-broken: the store commits through the paginated request, and a
@@ -5324,7 +5328,11 @@ class SpiderlyDataTableComponent {
             return true;
         if (col.lockVisible)
             return true; // pinned — wins over any (possibly stale) override
-        return this.columnVisibilityOverrides[col.field] ?? col.visible !== false;
+        return this.columnVisibilityOverrides[col.field] ?? this.isDeclaredVisible(col);
+    }
+    /** The declared default in the current context: the active view's `columns`, then `Column.visible`. */
+    isDeclaredVisible(col) {
+        return this.activeView()?.columns?.[col.field] ?? col.visible !== false;
     }
     /**
      * `cols` in the operator's order. A field the stored order has never seen — a column added in a
@@ -5432,7 +5440,7 @@ class SpiderlyDataTableComponent {
         return this.visibleDataColsCount > 1;
     }
     toggleColumn(col, visible) {
-        if (visible === (col.visible !== false)) {
+        if (visible === this.isDeclaredVisible(col)) {
             delete this.columnVisibilityOverrides[col.field]; // back at the declared default
         }
         else {
@@ -5555,13 +5563,20 @@ class SpiderlyDataTableComponent {
      * overwrites it, the operator's own choice wins by construction. Accepted cost of adopting
      * late instead of holding the first request: a brief flash of the seeded view's rows and a
      * second request when the late view lands.
+     *
+     * Only a view this change BROUGHT is adopted. A consumer rebuilds `[views]` on every list load
+     * to refresh `TableView.count`, and under `stateStorage: 'local'` the key can name a view the
+     * operator picked in another browser tab — adopting on every change switched this tab's view
+     * at the next count refresh (spiderly#430).
      */
-    adoptStoredView() {
+    adoptStoredView(previousViews) {
         if (!this.viewStateKey)
             return;
         const storedId = readStoredJson(this.filterStorage, this.viewStateKey);
         if (typeof storedId !== 'string' || storedId === this.activeViewId)
             return;
+        if (previousViews?.some((view) => view.id === storedId))
+            return;
         const view = this.viewById(storedId);
         if (view)
             this.selectView(view);
@@ -6596,6 +6611,10 @@ class SpiderlyDataTableComponent {
     actionTrackByFn(index, item) {
         return `${index}${item.field}`;
     }
+    /** By id: a count refresh rebuilds `[views]` as new objects, and must not re-create the focused tab. */
+    viewTrackByFn(index, view) {
+        return view.id;
+    }
     exportListToExcel() {
         let filter = this.lastLazyLoadEvent;
         filter.additionalFilterIdLong = this.additionalFilterIdLong;
@@ -6786,7 +6805,7 @@ class SpiderlyDataTableComponent {
         }
     }
     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: "17.2.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", filters: "filters", views: "views", 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 }, { propertyName: "filterTemplates", predicate: SpiderlyFilterTemplateDirective }], viewQueries: [{ propertyName: "columnMenu", first: true, predicate: ["columnMenu"], descendants: true, isSignal: true }, { propertyName: "filterBar", first: true, predicate: SpiderlyFilterBarComponent, descendants: true, isSignal: true }, { propertyName: "selectionHeader", first: true, predicate: ["selectionHeader"], descendants: true, isSignal: true }, { 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      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              *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        <!-- ONE menu for every column, with the target held in `menuColumn`. Rendering its items\n             inside an @if keyed on the column would put them inside the popover's projected\n             content, and PrimeNG does not re-project content an @if has destroyed \u2014 the filter\n             bar's editor lost a whole afternoon to exactly that. -->\n        <p-popover #columnMenu>\n          <div class=\"column-menu\" role=\"menu\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-hide\"\n              [disabled]=\"!menuColumn || !canToggleColumn(menuColumn)\"\n              (click)=\"hideMenuColumn()\"\n            >\n              <i class=\"pi pi-eye-slash\"></i>\n              <span class=\"column-menu-item-label\">{{ t('HideColumn') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-filter\"\n              [disabled]=\"!menuColumn || !canFilterColumn(menuColumn)\"\n              (click)=\"filterMenuColumn()\"\n            >\n              <i class=\"pi pi-filter\"></i>\n              <span class=\"column-menu-item-label\">{{ t('Filter') }}\u2026</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-asc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(1)\"\n            >\n              <i class=\"pi pi-sort-amount-up-alt\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortAscending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-desc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-sort-amount-down\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortDescending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-left\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, -1)\"\n              (click)=\"moveMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-arrow-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveLeft') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-right\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, 1)\"\n              (click)=\"moveMenuColumn(1)\"\n            >\n              <i class=\"pi pi-arrow-right\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveRight') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-fit\"\n              (click)=\"fitMenuColumn()\"\n            >\n              <i class=\"pi pi-arrows-h\"></i>\n              <span class=\"column-menu-item-label\">{{ t('FitWidth') }}</span>\n            </button>\n            <!-- menuitemcheckbox, not menuitem: this one TOGGLES, and a label reading the same\n                 in both states leaves the operator to find out by clicking \u2014 which on a wide\n                 column means re-laying the grid out to learn what it was already set to. The\n                 check is the state; the label stays put, which is what the role is for.\n                 Disabled for an editable column: its cell holds an input, not clamped text, so\n                 the toggle could only persist a preference that changes nothing. -->\n            <button\n              type=\"button\"\n              role=\"menuitemcheckbox\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-wrap\"\n              [disabled]=\"!menuColumn || menuColumn.editable === true\"\n              [attr.aria-checked]=\"isMenuColumnWrapped\"\n              (click)=\"toggleWrapForMenuColumn()\"\n            >\n              <i class=\"pi pi-align-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('WrapText') }}</span>\n              <i *ngIf=\"isMenuColumnWrapped\" class=\"pi pi-check\"></i>\n            </button>\n          </div>\n        </p-popover>\n\n        <div class=\"table-views\" *ngIf=\"views?.length\" role=\"tablist\">\n          <button\n            *ngFor=\"let view of views\"\n            type=\"button\"\n            role=\"tab\"\n            class=\"table-view\"\n            data-testid=\"table-view\"\n            [class.table-view-active]=\"activeViewId === view.id\"\n            [attr.aria-selected]=\"activeViewId === view.id\"\n            (click)=\"selectView(view)\"\n          >\n            {{ view.label }}\n          </button>\n        </div>\n\n        <spiderly-filter-bar\n          *ngIf=\"filters\"\n          [filters]=\"filters\"\n          [totalRecords]=\"totalRecords\"\n          [sort]=\"sortKeys\"\n          [sortOptions]=\"sortPickOptions\"\n          [sortIsDefault]=\"sortIsDefault\"\n          [controlTemplates]=\"filterTemplates\"\n          (clearAll)=\"clear()\"\n          (sortPick)=\"sortFromBar($event)\"\n          (sortReset)=\"resetSortFromBar()\"\n        ></spiderly-filter-bar>\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\n            #selectionHeader\n            class=\"frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.width]=\"selectionColumnWidth\"\n            [style.left]=\"'0'\"\n            *ngIf=\"selectionMode == 'multiple'\"\n          >\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              <span class=\"selection-count\">({{ rowsSelectedNumber }})</span>\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              #headerCell\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              [attr.draggable]=\"hasLazyLoad && !col.lockVisible ? true : null\"\n              (mousedown)=\"onHeaderMouseDown($event)\"\n              (dragstart)=\"onHeaderDragStart(col, $event)\"\n              (dragover)=\"onHeaderDragOver(col, $event)\"\n              (drop)=\"onHeaderDrop(col, $event)\"\n            >\n              <!-- Ours, not PrimeNG's: enabling [resizableColumns] makes it persist widths by\n                   th:nth-child INDEX into our own stateKey, which slides every stored width onto\n                   the wrong column the first time the chooser hides one (CLAUDE.md -> decision\n                   5). We take the gesture and keep the state. -->\n              <span\n                *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                class=\"column-resizer\"\n                data-testid=\"column-resizer\"\n                (mousedown)=\"startColumnResize(col, $event, headerCell)\"\n              ></span>\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                  <!-- stopPropagation is load-bearing: the th carries pSortableColumn, so a click\n                       that reaches it sorts the grid. Opening a menu must not reorder the table on\n                       the way. -->\n                  <button\n                    *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                    type=\"button\"\n                    class=\"column-menu-button\"\n                    data-testid=\"column-menu\"\n                    [attr.aria-label]=\"t('Columns')\"\n                    (click)=\"$event.stopPropagation(); openColumnMenu(col, $event)\"\n                  >\n                    <i class=\"pi pi-chevron-down\"></i>\n                  </button>\n                </span>\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 spiderlyOverflowTitle class=\"cell-text\">{{\n              displayValue\n            }}</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 frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.left]=\"'0'\"\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              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [class.cell-wrap]=\"isColumnWrapped(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\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\n              *ngIf=\"col.editable\"\n              class=\"row-interactive\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n            >\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)=\"resetColumnLayout()\"\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{border:none;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-top:4px;color:var(--p-primary-color);align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}.column-menu{display:flex;flex-direction:column;min-width:11rem}.column-menu-item{display:flex;align-items:center;gap:8px;border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.column-menu-item .column-menu-item-label{flex:1}.column-menu-item:hover:not(:disabled){background:var(--p-content-hover-background)}.column-menu-item:disabled{color:var(--p-text-muted-color);cursor:default}: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 .column-menu-button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:0 2px;opacity:0;font-size:.75rem}:host th:hover .column-menu-button,:host .column-menu-button:focus-visible{opacity:1}:host .table-views{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}:host .table-view{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:4px 10px;border-radius:var(--p-content-border-radius)}:host .table-view:hover{background:var(--p-content-hover-background)}:host .table-view-active{color:var(--p-primary-color);font-weight:600;background:var(--p-content-hover-background)}:host .frozen-column{position:sticky;z-index:1}:host td.frozen-column{background:var(--p-datatable-row-background, var(--p-content-background));transition:background-color var(--p-transition-duration, .2s)}:host tr:hover>td.frozen-column{background:var(--p-datatable-row-hover-background, inherit)}:host .frozen-column-last{box-shadow:2px 0 4px -2px #00000026}:host th{position:relative}:host .column-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}:host .selection-count{font-size:.75rem;color:var(--p-text-muted-color)}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host td.cell-wrap{--spiderly-cell-overflow: visible;--spiderly-cell-white-space: normal}:host .cell-text{display:block;overflow:var(--spiderly-cell-overflow, hidden);text-overflow:ellipsis;white-space:var(--spiderly-cell-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: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { 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: "component", type: SpiderlyFilterBarComponent, selector: "spiderly-filter-bar", inputs: ["filters", "totalRecords", "sort", "sortOptions", "sortIsDefault", "controlTemplates"], outputs: ["clearAll", "sortPick", "sortReset"] }, { kind: "directive", type: SpiderlyOverflowTitleDirective, selector: "[spiderlyOverflowTitle]" }, { 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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", filters: "filters", views: "views", 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 }, { propertyName: "filterTemplates", predicate: SpiderlyFilterTemplateDirective }], viewQueries: [{ propertyName: "columnMenu", first: true, predicate: ["columnMenu"], descendants: true, isSignal: true }, { propertyName: "filterBar", first: true, predicate: SpiderlyFilterBarComponent, descendants: true, isSignal: true }, { propertyName: "selectionHeader", first: true, predicate: ["selectionHeader"], descendants: true, isSignal: true }, { 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      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              *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        <!-- ONE menu for every column, with the target held in `menuColumn`. Rendering its items\n             inside an @if keyed on the column would put them inside the popover's projected\n             content, and PrimeNG does not re-project content an @if has destroyed \u2014 the filter\n             bar's editor lost a whole afternoon to exactly that. -->\n        <p-popover #columnMenu>\n          <div class=\"column-menu\" role=\"menu\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-hide\"\n              [disabled]=\"!menuColumn || !canToggleColumn(menuColumn)\"\n              (click)=\"hideMenuColumn()\"\n            >\n              <i class=\"pi pi-eye-slash\"></i>\n              <span class=\"column-menu-item-label\">{{ t('HideColumn') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-filter\"\n              [disabled]=\"!menuColumn || !canFilterColumn(menuColumn)\"\n              (click)=\"filterMenuColumn()\"\n            >\n              <i class=\"pi pi-filter\"></i>\n              <span class=\"column-menu-item-label\">{{ t('Filter') }}\u2026</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-asc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(1)\"\n            >\n              <i class=\"pi pi-sort-amount-up-alt\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortAscending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-desc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-sort-amount-down\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortDescending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-left\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, -1)\"\n              (click)=\"moveMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-arrow-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveLeft') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-right\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, 1)\"\n              (click)=\"moveMenuColumn(1)\"\n            >\n              <i class=\"pi pi-arrow-right\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveRight') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-fit\"\n              (click)=\"fitMenuColumn()\"\n            >\n              <i class=\"pi pi-arrows-h\"></i>\n              <span class=\"column-menu-item-label\">{{ t('FitWidth') }}</span>\n            </button>\n            <!-- menuitemcheckbox, not menuitem: this one TOGGLES, and a label reading the same\n                 in both states leaves the operator to find out by clicking \u2014 which on a wide\n                 column means re-laying the grid out to learn what it was already set to. The\n                 check is the state; the label stays put, which is what the role is for.\n                 Disabled for an editable column: its cell holds an input, not clamped text, so\n                 the toggle could only persist a preference that changes nothing. -->\n            <button\n              type=\"button\"\n              role=\"menuitemcheckbox\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-wrap\"\n              [disabled]=\"!menuColumn || menuColumn.editable === true\"\n              [attr.aria-checked]=\"isMenuColumnWrapped\"\n              (click)=\"toggleWrapForMenuColumn()\"\n            >\n              <i class=\"pi pi-align-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('WrapText') }}</span>\n              <i *ngIf=\"isMenuColumnWrapped\" class=\"pi pi-check\"></i>\n            </button>\n          </div>\n        </p-popover>\n\n        <div class=\"table-views\" *ngIf=\"views?.length\" role=\"tablist\">\n          <button\n            *ngFor=\"let view of views; trackBy: viewTrackByFn\"\n            type=\"button\"\n            role=\"tab\"\n            class=\"table-view\"\n            data-testid=\"table-view\"\n            [class.table-view-active]=\"activeViewId === view.id\"\n            [attr.aria-selected]=\"activeViewId === view.id\"\n            (click)=\"selectView(view)\"\n          >\n            {{ view.label }}\n            <span\n              *ngIf=\"view.count != null\"\n              class=\"table-view-count\"\n              data-testid=\"table-view-count\"\n              >{{ view.count }}</span\n            >\n          </button>\n        </div>\n\n        <spiderly-filter-bar\n          *ngIf=\"filters\"\n          [filters]=\"filters\"\n          [totalRecords]=\"totalRecords\"\n          [sort]=\"sortKeys\"\n          [sortOptions]=\"sortPickOptions\"\n          [sortIsDefault]=\"sortIsDefault\"\n          [controlTemplates]=\"filterTemplates\"\n          (clearAll)=\"clear()\"\n          (sortPick)=\"sortFromBar($event)\"\n          (sortReset)=\"resetSortFromBar()\"\n        ></spiderly-filter-bar>\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\n            #selectionHeader\n            class=\"frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.width]=\"selectionColumnWidth\"\n            [style.left]=\"'0'\"\n            *ngIf=\"selectionMode == 'multiple'\"\n          >\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              <span class=\"selection-count\">({{ rowsSelectedNumber }})</span>\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              #headerCell\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              [attr.draggable]=\"hasLazyLoad && !col.lockVisible ? true : null\"\n              (mousedown)=\"onHeaderMouseDown($event)\"\n              (dragstart)=\"onHeaderDragStart(col, $event)\"\n              (dragover)=\"onHeaderDragOver(col, $event)\"\n              (drop)=\"onHeaderDrop(col, $event)\"\n            >\n              <!-- Ours, not PrimeNG's: enabling [resizableColumns] makes it persist widths by\n                   th:nth-child INDEX into our own stateKey, which slides every stored width onto\n                   the wrong column the first time the chooser hides one (CLAUDE.md -> decision\n                   5). We take the gesture and keep the state. -->\n              <span\n                *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                class=\"column-resizer\"\n                data-testid=\"column-resizer\"\n                (mousedown)=\"startColumnResize(col, $event, headerCell)\"\n              ></span>\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                  <!-- stopPropagation is load-bearing: the th carries pSortableColumn, so a click\n                       that reaches it sorts the grid. Opening a menu must not reorder the table on\n                       the way. -->\n                  <button\n                    *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                    type=\"button\"\n                    class=\"column-menu-button\"\n                    data-testid=\"column-menu\"\n                    [attr.aria-label]=\"t('Columns')\"\n                    (click)=\"$event.stopPropagation(); openColumnMenu(col, $event)\"\n                  >\n                    <i class=\"pi pi-chevron-down\"></i>\n                  </button>\n                </span>\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 spiderlyOverflowTitle class=\"cell-text\">{{\n              displayValue\n            }}</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 frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.left]=\"'0'\"\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              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [class.cell-wrap]=\"isColumnWrapped(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\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\n              *ngIf=\"col.editable\"\n              class=\"row-interactive\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n            >\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)=\"resetColumnLayout()\"\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{border:none;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-top:4px;color:var(--p-primary-color);align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}.column-menu{display:flex;flex-direction:column;min-width:11rem}.column-menu-item{display:flex;align-items:center;gap:8px;border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.column-menu-item .column-menu-item-label{flex:1}.column-menu-item:hover:not(:disabled){background:var(--p-content-hover-background)}.column-menu-item:disabled{color:var(--p-text-muted-color);cursor:default}: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 .column-menu-button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:0 2px;opacity:0;font-size:.75rem}:host th:hover .column-menu-button,:host .column-menu-button:focus-visible{opacity:1}:host .table-views{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}:host .table-view{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:4px 10px;border-radius:var(--p-content-border-radius)}:host .table-view:hover{background:var(--p-content-hover-background)}:host .table-view-active{color:var(--p-primary-color);font-weight:600;background:var(--p-content-hover-background)}:host .table-view-count{margin-left:6px;padding:0 6px;border-radius:999px;background:var(--p-content-border-color);font-size:.75rem;font-variant-numeric:tabular-nums}:host .frozen-column{position:sticky;z-index:1}:host td.frozen-column{background:var(--p-datatable-row-background, var(--p-content-background));transition:background-color var(--p-transition-duration, .2s)}:host tr:hover>td.frozen-column{background:var(--p-datatable-row-hover-background, inherit)}:host .frozen-column-last{box-shadow:2px 0 4px -2px #00000026}:host th{position:relative}:host .column-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}:host .selection-count{font-size:.75rem;color:var(--p-text-muted-color)}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host td.cell-wrap{--spiderly-cell-overflow: visible;--spiderly-cell-white-space: normal}:host .cell-text{display:block;overflow:var(--spiderly-cell-overflow, hidden);text-overflow:ellipsis;white-space:var(--spiderly-cell-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: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { 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: "component", type: SpiderlyFilterBarComponent, selector: "spiderly-filter-bar", inputs: ["filters", "totalRecords", "sort", "sortOptions", "sortIsDefault", "controlTemplates"], outputs: ["clearAll", "sortPick", "sortReset"] }, { kind: "directive", type: SpiderlyOverflowTitleDirective, selector: "[spiderlyOverflowTitle]" }, { 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,
@@ -6802,7 +6821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyFilterBarComponent,
                         SpiderlyOverflowTitleDirective,
                         TooltipModule,
-                    ], 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      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              *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        <!-- ONE menu for every column, with the target held in `menuColumn`. Rendering its items\n             inside an @if keyed on the column would put them inside the popover's projected\n             content, and PrimeNG does not re-project content an @if has destroyed \u2014 the filter\n             bar's editor lost a whole afternoon to exactly that. -->\n        <p-popover #columnMenu>\n          <div class=\"column-menu\" role=\"menu\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-hide\"\n              [disabled]=\"!menuColumn || !canToggleColumn(menuColumn)\"\n              (click)=\"hideMenuColumn()\"\n            >\n              <i class=\"pi pi-eye-slash\"></i>\n              <span class=\"column-menu-item-label\">{{ t('HideColumn') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-filter\"\n              [disabled]=\"!menuColumn || !canFilterColumn(menuColumn)\"\n              (click)=\"filterMenuColumn()\"\n            >\n              <i class=\"pi pi-filter\"></i>\n              <span class=\"column-menu-item-label\">{{ t('Filter') }}\u2026</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-asc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(1)\"\n            >\n              <i class=\"pi pi-sort-amount-up-alt\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortAscending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-desc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-sort-amount-down\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortDescending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-left\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, -1)\"\n              (click)=\"moveMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-arrow-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveLeft') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-right\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, 1)\"\n              (click)=\"moveMenuColumn(1)\"\n            >\n              <i class=\"pi pi-arrow-right\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveRight') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-fit\"\n              (click)=\"fitMenuColumn()\"\n            >\n              <i class=\"pi pi-arrows-h\"></i>\n              <span class=\"column-menu-item-label\">{{ t('FitWidth') }}</span>\n            </button>\n            <!-- menuitemcheckbox, not menuitem: this one TOGGLES, and a label reading the same\n                 in both states leaves the operator to find out by clicking \u2014 which on a wide\n                 column means re-laying the grid out to learn what it was already set to. The\n                 check is the state; the label stays put, which is what the role is for.\n                 Disabled for an editable column: its cell holds an input, not clamped text, so\n                 the toggle could only persist a preference that changes nothing. -->\n            <button\n              type=\"button\"\n              role=\"menuitemcheckbox\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-wrap\"\n              [disabled]=\"!menuColumn || menuColumn.editable === true\"\n              [attr.aria-checked]=\"isMenuColumnWrapped\"\n              (click)=\"toggleWrapForMenuColumn()\"\n            >\n              <i class=\"pi pi-align-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('WrapText') }}</span>\n              <i *ngIf=\"isMenuColumnWrapped\" class=\"pi pi-check\"></i>\n            </button>\n          </div>\n        </p-popover>\n\n        <div class=\"table-views\" *ngIf=\"views?.length\" role=\"tablist\">\n          <button\n            *ngFor=\"let view of views\"\n            type=\"button\"\n            role=\"tab\"\n            class=\"table-view\"\n            data-testid=\"table-view\"\n            [class.table-view-active]=\"activeViewId === view.id\"\n            [attr.aria-selected]=\"activeViewId === view.id\"\n            (click)=\"selectView(view)\"\n          >\n            {{ view.label }}\n          </button>\n        </div>\n\n        <spiderly-filter-bar\n          *ngIf=\"filters\"\n          [filters]=\"filters\"\n          [totalRecords]=\"totalRecords\"\n          [sort]=\"sortKeys\"\n          [sortOptions]=\"sortPickOptions\"\n          [sortIsDefault]=\"sortIsDefault\"\n          [controlTemplates]=\"filterTemplates\"\n          (clearAll)=\"clear()\"\n          (sortPick)=\"sortFromBar($event)\"\n          (sortReset)=\"resetSortFromBar()\"\n        ></spiderly-filter-bar>\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\n            #selectionHeader\n            class=\"frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.width]=\"selectionColumnWidth\"\n            [style.left]=\"'0'\"\n            *ngIf=\"selectionMode == 'multiple'\"\n          >\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              <span class=\"selection-count\">({{ rowsSelectedNumber }})</span>\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              #headerCell\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              [attr.draggable]=\"hasLazyLoad && !col.lockVisible ? true : null\"\n              (mousedown)=\"onHeaderMouseDown($event)\"\n              (dragstart)=\"onHeaderDragStart(col, $event)\"\n              (dragover)=\"onHeaderDragOver(col, $event)\"\n              (drop)=\"onHeaderDrop(col, $event)\"\n            >\n              <!-- Ours, not PrimeNG's: enabling [resizableColumns] makes it persist widths by\n                   th:nth-child INDEX into our own stateKey, which slides every stored width onto\n                   the wrong column the first time the chooser hides one (CLAUDE.md -> decision\n                   5). We take the gesture and keep the state. -->\n              <span\n                *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                class=\"column-resizer\"\n                data-testid=\"column-resizer\"\n                (mousedown)=\"startColumnResize(col, $event, headerCell)\"\n              ></span>\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                  <!-- stopPropagation is load-bearing: the th carries pSortableColumn, so a click\n                       that reaches it sorts the grid. Opening a menu must not reorder the table on\n                       the way. -->\n                  <button\n                    *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                    type=\"button\"\n                    class=\"column-menu-button\"\n                    data-testid=\"column-menu\"\n                    [attr.aria-label]=\"t('Columns')\"\n                    (click)=\"$event.stopPropagation(); openColumnMenu(col, $event)\"\n                  >\n                    <i class=\"pi pi-chevron-down\"></i>\n                  </button>\n                </span>\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 spiderlyOverflowTitle class=\"cell-text\">{{\n              displayValue\n            }}</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 frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.left]=\"'0'\"\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              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [class.cell-wrap]=\"isColumnWrapped(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\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\n              *ngIf=\"col.editable\"\n              class=\"row-interactive\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n            >\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)=\"resetColumnLayout()\"\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{border:none;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-top:4px;color:var(--p-primary-color);align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}.column-menu{display:flex;flex-direction:column;min-width:11rem}.column-menu-item{display:flex;align-items:center;gap:8px;border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.column-menu-item .column-menu-item-label{flex:1}.column-menu-item:hover:not(:disabled){background:var(--p-content-hover-background)}.column-menu-item:disabled{color:var(--p-text-muted-color);cursor:default}: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 .column-menu-button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:0 2px;opacity:0;font-size:.75rem}:host th:hover .column-menu-button,:host .column-menu-button:focus-visible{opacity:1}:host .table-views{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}:host .table-view{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:4px 10px;border-radius:var(--p-content-border-radius)}:host .table-view:hover{background:var(--p-content-hover-background)}:host .table-view-active{color:var(--p-primary-color);font-weight:600;background:var(--p-content-hover-background)}:host .frozen-column{position:sticky;z-index:1}:host td.frozen-column{background:var(--p-datatable-row-background, var(--p-content-background));transition:background-color var(--p-transition-duration, .2s)}:host tr:hover>td.frozen-column{background:var(--p-datatable-row-hover-background, inherit)}:host .frozen-column-last{box-shadow:2px 0 4px -2px #00000026}:host th{position:relative}:host .column-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}:host .selection-count{font-size:.75rem;color:var(--p-text-muted-color)}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host td.cell-wrap{--spiderly-cell-overflow: visible;--spiderly-cell-white-space: normal}:host .cell-text{display:block;overflow:var(--spiderly-cell-overflow, hidden);text-overflow:ellipsis;white-space:var(--spiderly-cell-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"] }]
+                    ], 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      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              *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        <!-- ONE menu for every column, with the target held in `menuColumn`. Rendering its items\n             inside an @if keyed on the column would put them inside the popover's projected\n             content, and PrimeNG does not re-project content an @if has destroyed \u2014 the filter\n             bar's editor lost a whole afternoon to exactly that. -->\n        <p-popover #columnMenu>\n          <div class=\"column-menu\" role=\"menu\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-hide\"\n              [disabled]=\"!menuColumn || !canToggleColumn(menuColumn)\"\n              (click)=\"hideMenuColumn()\"\n            >\n              <i class=\"pi pi-eye-slash\"></i>\n              <span class=\"column-menu-item-label\">{{ t('HideColumn') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-filter\"\n              [disabled]=\"!menuColumn || !canFilterColumn(menuColumn)\"\n              (click)=\"filterMenuColumn()\"\n            >\n              <i class=\"pi pi-filter\"></i>\n              <span class=\"column-menu-item-label\">{{ t('Filter') }}\u2026</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-asc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(1)\"\n            >\n              <i class=\"pi pi-sort-amount-up-alt\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortAscending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-desc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-sort-amount-down\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortDescending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-left\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, -1)\"\n              (click)=\"moveMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-arrow-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveLeft') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-right\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, 1)\"\n              (click)=\"moveMenuColumn(1)\"\n            >\n              <i class=\"pi pi-arrow-right\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveRight') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-fit\"\n              (click)=\"fitMenuColumn()\"\n            >\n              <i class=\"pi pi-arrows-h\"></i>\n              <span class=\"column-menu-item-label\">{{ t('FitWidth') }}</span>\n            </button>\n            <!-- menuitemcheckbox, not menuitem: this one TOGGLES, and a label reading the same\n                 in both states leaves the operator to find out by clicking \u2014 which on a wide\n                 column means re-laying the grid out to learn what it was already set to. The\n                 check is the state; the label stays put, which is what the role is for.\n                 Disabled for an editable column: its cell holds an input, not clamped text, so\n                 the toggle could only persist a preference that changes nothing. -->\n            <button\n              type=\"button\"\n              role=\"menuitemcheckbox\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-wrap\"\n              [disabled]=\"!menuColumn || menuColumn.editable === true\"\n              [attr.aria-checked]=\"isMenuColumnWrapped\"\n              (click)=\"toggleWrapForMenuColumn()\"\n            >\n              <i class=\"pi pi-align-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('WrapText') }}</span>\n              <i *ngIf=\"isMenuColumnWrapped\" class=\"pi pi-check\"></i>\n            </button>\n          </div>\n        </p-popover>\n\n        <div class=\"table-views\" *ngIf=\"views?.length\" role=\"tablist\">\n          <button\n            *ngFor=\"let view of views; trackBy: viewTrackByFn\"\n            type=\"button\"\n            role=\"tab\"\n            class=\"table-view\"\n            data-testid=\"table-view\"\n            [class.table-view-active]=\"activeViewId === view.id\"\n            [attr.aria-selected]=\"activeViewId === view.id\"\n            (click)=\"selectView(view)\"\n          >\n            {{ view.label }}\n            <span\n              *ngIf=\"view.count != null\"\n              class=\"table-view-count\"\n              data-testid=\"table-view-count\"\n              >{{ view.count }}</span\n            >\n          </button>\n        </div>\n\n        <spiderly-filter-bar\n          *ngIf=\"filters\"\n          [filters]=\"filters\"\n          [totalRecords]=\"totalRecords\"\n          [sort]=\"sortKeys\"\n          [sortOptions]=\"sortPickOptions\"\n          [sortIsDefault]=\"sortIsDefault\"\n          [controlTemplates]=\"filterTemplates\"\n          (clearAll)=\"clear()\"\n          (sortPick)=\"sortFromBar($event)\"\n          (sortReset)=\"resetSortFromBar()\"\n        ></spiderly-filter-bar>\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\n            #selectionHeader\n            class=\"frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.width]=\"selectionColumnWidth\"\n            [style.left]=\"'0'\"\n            *ngIf=\"selectionMode == 'multiple'\"\n          >\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              <span class=\"selection-count\">({{ rowsSelectedNumber }})</span>\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              #headerCell\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              [attr.draggable]=\"hasLazyLoad && !col.lockVisible ? true : null\"\n              (mousedown)=\"onHeaderMouseDown($event)\"\n              (dragstart)=\"onHeaderDragStart(col, $event)\"\n              (dragover)=\"onHeaderDragOver(col, $event)\"\n              (drop)=\"onHeaderDrop(col, $event)\"\n            >\n              <!-- Ours, not PrimeNG's: enabling [resizableColumns] makes it persist widths by\n                   th:nth-child INDEX into our own stateKey, which slides every stored width onto\n                   the wrong column the first time the chooser hides one (CLAUDE.md -> decision\n                   5). We take the gesture and keep the state. -->\n              <span\n                *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                class=\"column-resizer\"\n                data-testid=\"column-resizer\"\n                (mousedown)=\"startColumnResize(col, $event, headerCell)\"\n              ></span>\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                  <!-- stopPropagation is load-bearing: the th carries pSortableColumn, so a click\n                       that reaches it sorts the grid. Opening a menu must not reorder the table on\n                       the way. -->\n                  <button\n                    *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                    type=\"button\"\n                    class=\"column-menu-button\"\n                    data-testid=\"column-menu\"\n                    [attr.aria-label]=\"t('Columns')\"\n                    (click)=\"$event.stopPropagation(); openColumnMenu(col, $event)\"\n                  >\n                    <i class=\"pi pi-chevron-down\"></i>\n                  </button>\n                </span>\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 spiderlyOverflowTitle class=\"cell-text\">{{\n              displayValue\n            }}</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 frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.left]=\"'0'\"\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              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [class.cell-wrap]=\"isColumnWrapped(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\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\n              *ngIf=\"col.editable\"\n              class=\"row-interactive\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n            >\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)=\"resetColumnLayout()\"\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{border:none;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-top:4px;color:var(--p-primary-color);align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}.column-menu{display:flex;flex-direction:column;min-width:11rem}.column-menu-item{display:flex;align-items:center;gap:8px;border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.column-menu-item .column-menu-item-label{flex:1}.column-menu-item:hover:not(:disabled){background:var(--p-content-hover-background)}.column-menu-item:disabled{color:var(--p-text-muted-color);cursor:default}: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 .column-menu-button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:0 2px;opacity:0;font-size:.75rem}:host th:hover .column-menu-button,:host .column-menu-button:focus-visible{opacity:1}:host .table-views{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}:host .table-view{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:4px 10px;border-radius:var(--p-content-border-radius)}:host .table-view:hover{background:var(--p-content-hover-background)}:host .table-view-active{color:var(--p-primary-color);font-weight:600;background:var(--p-content-hover-background)}:host .table-view-count{margin-left:6px;padding:0 6px;border-radius:999px;background:var(--p-content-border-color);font-size:.75rem;font-variant-numeric:tabular-nums}:host .frozen-column{position:sticky;z-index:1}:host td.frozen-column{background:var(--p-datatable-row-background, var(--p-content-background));transition:background-color var(--p-transition-duration, .2s)}:host tr:hover>td.frozen-column{background:var(--p-datatable-row-hover-background, inherit)}:host .frozen-column-last{box-shadow:2px 0 4px -2px #00000026}:host th{position:relative}:host .column-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}:host .selection-count{font-size:.75rem;color:var(--p-text-muted-color)}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host td.cell-wrap{--spiderly-cell-overflow: visible;--spiderly-cell-white-space: normal}:host .cell-text{display:block;overflow:var(--spiderly-cell-overflow, hidden);text-overflow:ellipsis;white-space:var(--spiderly-cell-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]