spiderly 19.11.6 → 19.11.7

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

@@ -176,6 +176,8 @@ Two details that decide whether the guard actually works:
 
 Lazy tables are always deterministically ordered: when no sort is active the backend falls back to `Id` DESC (newest first). Declare `defaultSortField` (+ `defaultSortOrder`) when a page wants a different, user-visible default — it renders as a normal header sort arrow, persisted user sort wins over it, and un-sorting (tri-state header click, Clear filters) returns to it instead of "unsorted".
 
+Every paginated table offers a rows-per-page dropdown — `rowsPerPageOptions`, default `[10, 25, 50, 100]`; a custom initial `rows` value is merged in automatically. The user's pick rides PrimeNG table state, so it persists per table under the existing `stateKey` (session-scoped unless `stateStorage: 'local'`).
+
 ### Client-Side Mode
 
 ```html
@@ -284,6 +286,12 @@ Project an `<ng-template spiderlyDataTableActions>` to add your own buttons (or
 - The template binds to the **consuming component** (`(click)` calls your method), and root-level buttons inherit the toolbar's spacing + responsive stacking.
 - No table state is passed as context — read it from the table's outputs (`onLazyLoad` for the current `Filter`, `onTotalRecordsChange`, `onRowSelect`) when an action needs it.
 
+### Row selection (checkbox column + shift-click ranges)
+
+`selectionMode: 'multiple'` renders a checkbox column (auto-enabled when `deleteListFromTableObservableMethod` is set). On a `navigateOnRowClick` table, no interactive cell doubles as navigation: the checkbox column, action icons, editable cells and `onCellClick` cells all keep their click to themselves. Row navigation resolves the id through `idField`.
+
+**Shift+click selects a range**: click one checkbox, hold Shift, click another — every row between receives the *clicked checkbox's new state* (shift-checking selects the range, shift-unchecking clears it). The anchor is the last clicked checkbox, and a range only ever spans rows visible on the current page: if the anchor is no longer among them, the shift-click degrades to a plain toggle. (A client-side sort that keeps both rows on screen ranges over the *new* visual order, which is what the user sees and expects.) Rows already in the target state are skipped; each actual change emits `onRowSelect`/`onRowUnselect` exactly as a single click would, so delta-based consumers (`newlySelectedItems`/`unselectedItems`) need no changes.
+
 ### Key Inputs
 
 | Input                              | Type                     | Default | Purpose                 |
@@ -294,6 +302,8 @@ Project an `<ng-template spiderlyDataTableActions>` to add your own buttons (or
 | `hasLazyLoad`                      | `boolean`                | `true`  | Server vs client mode   |
 | `items`                            | `any[]`                  | —       | Client-side data        |
 | `selectionMode`                    | `'single' \| 'multiple'` | —       | Selection mode          |
+| `rows`                             | `number`                 | `10`    | Initial page size       |
+| `rowsPerPageOptions`               | `number[]`               | `[10, 25, 50, 100]` | Paginator page-size choices |
 | `navigateOnRowClick`               | `boolean`                | `false` | Click row → details     |
 | `rowNavigationPath`                | `string`                 | —       | Base path for row click |
 | `defaultSortField`                 | `string`                 | —       | Sort applied while the user has none |

package/fesm2022/spiderly.mjs

@@ -4001,6 +4001,8 @@ class SpiderlyDataTableComponent {
         this.locale = locale;
         this.destroy$ = new Subject();
         this.tableIcon = 'pi pi-list';
+        /** Paginator page-size choices; merge rules and persistence: CLAUDE.md → "Rows-per-page". */
+        this.rowsPerPageOptions = [10, 25, 50, 100];
         /** Whether the paginator is shown. Pass only when `hasLazyLoad === false`. Defaults to `true`. */
         this.showPaginator = true;
         /** Whether the table is wrapped in a card container. Defaults to `false`. */
@@ -4018,6 +4020,9 @@ class SpiderlyDataTableComponent {
         this.isAllSelected = null;
         this.fakeIsAllSelected = false; // Only for showing checkboxes, we will not send this to the backend
         this.isFirstTimeLazyLoad = true;
+        /** Shift-range selection state — model and invariants: CLAUDE.md → "Shift-click range selection". */
+        this.rangeAnchorId = null;
+        this.pendingShift = null;
         this.onIsAllSelectedChange = new EventEmitter();
         this.matchModeDateOptions = [];
         this.matchModeNumberOptions = [];
@@ -4117,6 +4122,34 @@ class SpiderlyDataTableComponent {
             originalSort(event);
         };
     }
+    /**
+     * A page size PrimeNG will actually apply but that is missing from `rowsPerPageOptions` leaves
+     * the paginator dropdown blank — so both the effective `rows` and the persisted pick (which
+     * `restoreState` applies after init) are merged in. Runs again on input changes because a
+     * consumer may resolve `[rows]` asynchronously. Storage is user-writable, hence the shape and
+     * ceiling check: a hand-edited `{"rows": 100000}` must not become an offered choice, since the
+     * backend `.Take`s whatever it is sent.
+     */
+    mergeActivePageSizesIntoOptions() {
+        const ceiling = Math.max(...this.rowsPerPageOptions);
+        const persisted = this.persistedTableState()?.rows;
+        const candidates = [
+            this.rows,
+            Number.isInteger(persisted) && persisted > 0 && persisted <= ceiling
+                ? persisted
+                : null,
+        ];
+        for (const value of candidates) {
+            if (value != null && !this.rowsPerPageOptions.includes(value)) {
+                this.rowsPerPageOptions = [...this.rowsPerPageOptions, value].sort((a, b) => a - b);
+            }
+        }
+    }
+    ngOnChanges() {
+        // Only meaningful once ngOnInit has resolved the defaults; before that it is a no-op re-run.
+        if (this.rows != null)
+            this.mergeActivePageSizesIntoOptions();
+    }
     ngOnInit() {
         if (this.rows == null)
             this.rows = this.configService.defaultPageSize;
@@ -4161,6 +4194,7 @@ class SpiderlyDataTableComponent {
         else {
             this.clientLoad();
         }
+        this.mergeActivePageSizesIntoOptions();
         this.restoreColumnVisibility();
         this.reconcileVisibilityWithPersistedConstraints();
         this.chooserCols = this.cols.filter(SpiderlyDataTableComponent.isDataColumn);
@@ -4375,6 +4409,7 @@ class SpiderlyDataTableComponent {
     lazyLoad(event) {
         this.applyDefaultSortIfUnsorted(event);
         this.lastLazyLoadEvent = event;
+        this.rangeAnchorId = null;
         let tableFilter = event;
         tableFilter.additionalFilterIdLong = this.additionalFilterIdLong;
         this.onLazyLoad.next(tableFilter);
@@ -4452,6 +4487,7 @@ class SpiderlyDataTableComponent {
     }
     loadFormArrayItems() {
         this.items = this.getFormArrayItems(this.additionalIndexes);
+        this.rangeAnchorId = null;
         this.items.forEach((item, index) => {
             item.index = index;
         });
@@ -4543,13 +4579,21 @@ class SpiderlyDataTableComponent {
             this.router.navigate([rowId], { relativeTo: this.route });
         }
     }
-    /*
-     * Handle row click event.
+    /**
+     * Handle row click event. Arbitration between "this click navigates the row" and "this click
+     * belongs to a control inside the row" happens HERE, once, rather than in each interactive
+     * surface: anything marked `.row-interactive` (the selection cell, the actions column, editable
+     * cells, opted-in `onCellClick` cells) owns its own click and never navigates. Per-surface
+     * `stopPropagation` used to be the mechanism and was structurally lossy — the actions column
+     * never had one, so a Delete click opened the dialog AND navigated away. Mark new interactive
+     * cells with the class; don't add another stop.
      */
-    onRowClick(row) {
-        if (!this.navigateOnRowClick || !row?.id)
+    onRowClick(row, event) {
+        if (!this.navigateOnRowClick)
             return;
-        this.navigateToDetails(row.id);
+        if (event.target?.closest?.('.row-interactive'))
+            return;
+        this.navigateToDetails(row?.[this.idField]);
     }
     /*
      * Handle a cell click. Only columns that opt in (have an `onCellClick` callback) react; for them
@@ -4765,7 +4809,54 @@ class SpiderlyDataTableComponent {
             this.selectedItemIds = [];
         }
     }
+    /**
+     * Captures the shift state for the checkbox change this press produces — id-paired so an
+     * aborted press can never leak into a later toggle (see CLAUDE.md). Also stops shift+click
+     * from extending the browser text selection, which starts at mousedown.
+     */
+    onSelectionCellMouseDown(event, id) {
+        // Arm only for a press on the checkbox itself: a press on the surrounding cell produces no
+        // `change`, so arming there would strand the flag until some later toggle consumed it. The
+        // text-selection preventDefault still covers the whole cell.
+        if (event.target.closest('p-checkbox')) {
+            this.pendingShift = { shiftKey: event.shiftKey, id };
+        }
+        if (event.shiftKey)
+            event.preventDefault();
+    }
+    /**
+     * The rows the user can currently see, in display order — PrimeNG's own answer, so it cannot
+     * drift from what the table paints (it applies `filteredValue` and the paginator slice, and
+     * caps lazy pages at `rows` even when the server overshoots). Resolving a range over raw
+     * `items` would sweep filtered-out or off-page rows sitting between two visually adjacent
+     * ones. An anchor outside this window misses and the shift-click degrades to a plain toggle.
+     */
+    renderedRows() {
+        return this.table?.dataToRender(null) ?? this.items;
+    }
     selectRow(id, index) {
+        const shiftRange = this.pendingShift?.id === id && this.pendingShift.shiftKey;
+        this.pendingShift = null;
+        // `null` is the no-anchor sentinel, so it must never resolve to a row: a client-side table
+        // can hold unsaved rows whose idField is null, and findIndex would happily match one.
+        if (shiftRange && this.rangeAnchorId != null && id != null) {
+            const rendered = this.renderedRows();
+            const indexOf = (rowId) => rendered.findIndex((x) => x[this.idField] === rowId);
+            const anchorIndex = indexOf(this.rangeAnchorId);
+            const clickedIndex = indexOf(id);
+            if (anchorIndex !== -1 && clickedIndex !== -1) {
+                // The clicked checkbox's NEW state, applied to the whole range. Our model hasn't been
+                // updated for this click yet, so the new state is the negation of what we hold.
+                this.applyRange(rendered, anchorIndex, clickedIndex, !this.isRowSelected(id));
+                this.rangeAnchorId = id;
+                return;
+            }
+        }
+        this.toggleRow(id, index);
+        this.rangeAnchorId = id;
+    }
+    /** Single-row toggle — the plain-click path. */
+    toggleRow(id, index) {
         if (this.isRowSelected(id)) {
             this.rowUnselect(id);
             this.onRowUnselect.next(new RowClickEvent({
@@ -4783,6 +4874,22 @@ class SpiderlyDataTableComponent {
             }));
         }
     }
+    /**
+     * Applies `select` to every row between the two positions in `rows` (inclusive), skipping rows
+     * already in the target state; each change goes through `toggleRow` so the delta model and
+     * per-row events stay identical to manual clicks (see CLAUDE.md). The event payload keeps
+     * `row.index` for parity with what the single-click template binding passes.
+     */
+    applyRange(rows, fromIndex, toIndex, select) {
+        const start = Math.min(fromIndex, toIndex);
+        const end = Math.max(fromIndex, toIndex);
+        for (let i = start; i <= end; i++) {
+            const rowId = rows[i][this.idField];
+            if (this.isRowSelected(rowId) !== select) {
+                this.toggleRow(rowId, rows[i].index);
+            }
+        }
+    }
     isRowSelected(id) {
         if (this.hasLazyLoad) {
             return this.fakeSelectedItems.find((x) => x === id) != undefined;
@@ -4841,7 +4948,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: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", deleteListFromTableObservableMethod: "deleteListFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", stateKey: "stateKey", stateStorage: "stateStorage", defaultSortField: "defaultSortField", defaultSortOrder: "defaultSortOrder", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes", navigateOnRowClick: "navigateOnRowClick", rowNavigationPath: "rowNavigationPath" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: SpiderlyDataTableActionsDirective, descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: SpiderlyCellTemplateDirective }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 0rem\" *ngIf=\"selectionMode == 'multiple'\">\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style]=\"getColHeaderWidth(col)\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                </span>\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"col.filterField ?? col.field\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n                  [matchMode]=\"getColMatchMode(col.filterType)\"\n                >\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            {{ displayValue }}\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData)\"\n        >\n          <td *ngIf=\"selectionMode == 'multiple'\">\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              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action)\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td *ngIf=\"col.editable\">\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"loadingbody\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"Loading\") }}...\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnVisibility()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i12.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", cols: "cols", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", deleteListFromTableObservableMethod: "deleteListFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", stateKey: "stateKey", stateStorage: "stateStorage", defaultSortField: "defaultSortField", defaultSortOrder: "defaultSortOrder", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes", navigateOnRowClick: "navigateOnRowClick", rowNavigationPath: "rowNavigationPath" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: SpiderlyDataTableActionsDirective, descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: SpiderlyCellTemplateDirective }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 0rem\" *ngIf=\"selectionMode == 'multiple'\">\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style]=\"getColHeaderWidth(col)\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                </span>\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"col.filterField ?? col.field\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n                  [matchMode]=\"getColMatchMode(col.filterType)\"\n                >\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            {{ displayValue }}\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td *ngIf=\"col.editable\" class=\"row-interactive\">\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"loadingbody\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"Loading\") }}...\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnVisibility()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i12.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
             type: Component,
@@ -4857,7 +4964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         DatePickerModule,
                         CheckboxModule,
                         TooltipModule,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 0rem\" *ngIf=\"selectionMode == 'multiple'\">\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style]=\"getColHeaderWidth(col)\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                </span>\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"col.filterField ?? col.field\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n                  [matchMode]=\"getColMatchMode(col.filterType)\"\n                >\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            {{ displayValue }}\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData)\"\n        >\n          <td *ngIf=\"selectionMode == 'multiple'\">\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              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action)\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td *ngIf=\"col.editable\">\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"loadingbody\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"Loading\") }}...\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnVisibility()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host ::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    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 0rem\" *ngIf=\"selectionMode == 'multiple'\">\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style]=\"getColHeaderWidth(col)\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                </span>\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"col.filterField ?? col.field\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n                  [matchMode]=\"getColMatchMode(col.filterType)\"\n                >\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            {{ displayValue }}\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td *ngIf=\"col.editable\" class=\"row-interactive\">\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"loadingbody\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"Loading\") }}...\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnVisibility()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
         }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$5.DialogService }, { type: i3$2.ActivatedRoute }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }, { type: ConfigServiceBase }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -4878,6 +4985,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], rows: [{
                 type: Input
+            }], rowsPerPageOptions: [{
+                type: Input
             }], cols: [{
                 type: Input
             }], showPaginator: [{