spiderly 19.9.2 → 19.9.4

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

@@ -153,6 +153,8 @@ Library components/controls also expose their own `show*` `@Input()`s (e.g. `sho
 </spiderly-data-table>
 ```
 
+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".
+
 ### Client-Side Mode
 
 ```html
@@ -164,9 +166,9 @@ Library components/controls also expose their own `show*` `@Input()`s (e.g. `sho
 
 ```typescript
 cols: Column<ProductDTO>[] = [
-  new Column({ field: 'title', name: 'Title', filterType: 'text' }),
+  new Column({ field: 'title', name: 'Title', filterType: 'text', lockVisible: true }),
   new Column({ field: 'price', name: 'Price', filterType: 'numeric', showMatchModes: true, decimalPlaces: 2 }),
-  new Column({ field: 'createdAt', name: 'Created', filterType: 'date', showTime: true }),
+  new Column({ field: 'createdAt', name: 'Created', filterType: 'date', showTime: true, visible: false }),
   new Column({ field: 'isActive', name: 'Active', filterType: 'boolean' }),
   new Column({ field: 'categoryDisplayName', name: 'Category', filterType: 'multiselect',
     dropdownOrMultiselectValues: this.categoryOptions }),
@@ -180,6 +182,10 @@ cols: Column<ProductDTO>[] = [
 ];
 ```
 
+### Column chooser (show/hide columns)
+
+Lazy tables render a **Columns** toolbar button opening a checkbox list of all data columns. Because a column's header is the table's only filter surface, showing a column is what makes it filterable — declare rarely-needed but filter-worthy columns with `visible: false` (available in the chooser, hidden by default) and pin the row's identifying column with `lockVisible: true`. Rules the table enforces: hiding a column clears its active filter + sort (one reload; plain hides don't hit the server), 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.
+
 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'`).
 
 For a click on the cell value itself (not an action icon), set a column's `onCellClick` callback — the mirror of `Action.onClick`, but for plain value cells:
@@ -228,6 +234,8 @@ Project an `<ng-template spiderlyDataTableActions>` to add your own buttons (or
 | `selectionMode`                    | `'single' \| 'multiple'` | —       | Selection mode          |
 | `navigateOnRowClick`               | `boolean`                | `false` | Click row → details     |
 | `rowNavigationPath`                | `string`                 | —       | Base path for row click |
+| `defaultSortField`                 | `string`                 | —       | Sort applied while the user has none |
+| `defaultSortOrder`                 | `1 \| -1`                | `1`     | Direction for `defaultSortField` |
 | `showAddButton`                    | `boolean`                | `true`  | Show "New" button       |
 | `showExportToExcelButton`          | `boolean`                | `true`  | Show Excel export       |
 | `readonly`                         | `boolean`                | `false` | Disable mutations       |

package/agent/docs/backend-hooks/index.md

@@ -66,15 +66,26 @@ protected virtual async Task OnAfterSave{Entity}AndReturnMainUIFormDTO(
 ### Delete Hooks
 
 ```csharp
+// Before the delete — rows still exist; validation / capturing data that dies with the rows.
 // Default forwards to OnBefore{Entity}ListDelete with a single-element list.
 public virtual Task OnBefore{Entity}Delete({IdType} id) =>
     OnBefore{Entity}ListDelete(id.StructToList());
 
 public virtual async Task OnBefore{Entity}ListDelete(List<{IdType}> ids) { }
+
+// After the delete (cascades included), still inside the transaction — queries observe
+// the post-delete state; writes commit or roll back atomically with the delete.
+// Default forwards to OnAfter{Entity}ListDelete with a single-element list.
+public virtual Task OnAfter{Entity}Delete({IdType} id) =>
+    OnAfter{Entity}ListDelete(id.StructToList());
+
+public virtual async Task OnAfter{Entity}ListDelete(List<{IdType}> deletedIds) { }
 ```
 
 **When single and batch deletes need the same logic, override only the list hook** — the single-id path forwards to it automatically. Override the single hook only when the per-id behaviour genuinely diverges from the batch case.
 
+**Recomputing denormalized aggregates belongs in the After hook**, where a plain query reads the real post-delete state. In the Before hook the doomed rows still exist, so an aggregate query there would have to exclude them by hand to simulate the future state.
+
 ### Get Hooks
 
 ```csharp
@@ -127,7 +138,7 @@ protected virtual async Task<IQueryable<{Related}>> GetAll{Property}QueryFor{Ent
 
 Every generated method wraps its logic in `_context.WithTransactionAsync(...)`. Nested calls reuse the existing transaction. You do **not** need to start your own transaction in hooks.
 
-**Generated CRUD operations flush the change tracker before commit**, so you can stage tracked writes — an entity `Add`/`Update`, or `IOutbox.Enqueue` — inside any `OnBefore...` hook (including `OnBefore{Entity}Delete`) and they persist atomically with the operation; no manual `SaveChangesAsync`. This holds even though the delete path deletes via untracked bulk `ExecuteDeleteAsync` — the operation still flushes whatever the hook staged. The catch: `WithTransactionAsync`'s clean-tracker-at-commit guard is a backstop, so if you stage a tracked write in a **custom** (non-hook) `WithTransactionAsync` block, you must `SaveChangesAsync` it yourself or the guard throws.
+**Generated CRUD operations flush the change tracker before commit**, so you can stage tracked writes — an entity `Add`/`Update`, or `IOutbox.Enqueue` — inside any `OnBefore...` hook or the delete-side `OnAfter...Delete` hooks, and they persist atomically with the operation; no manual `SaveChangesAsync`. This holds even though the delete path deletes via untracked bulk `ExecuteDeleteAsync` — the operation still flushes whatever the hook staged. Two exceptions: the save-side `OnAfterSave...` hook runs after the save's own flush, so a tracked write staged there needs its own `SaveChangesAsync`; and in a **custom** (non-hook) `WithTransactionAsync` block you must `SaveChangesAsync` yourself — `WithTransactionAsync`'s clean-tracker-at-commit guard throws otherwise.
 
 If you need a transaction in **custom** (non-hook) methods:
 

package/fesm2022/spiderly.mjs

@@ -65,6 +65,8 @@ import { AvatarModule } from 'primeng/avatar';
 import { BadgeModule } from 'primeng/badge';
 import * as i4$a from 'primeng/menubar';
 import { MenubarModule } from 'primeng/menubar';
+import * as i14 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
 import * as i10 from 'primeng/table';
 import { TableModule } from 'primeng/table';
 import * as i2$2 from 'primeng/confirmdialog';
@@ -3952,6 +3954,15 @@ class SpiderlyDataTableComponent {
         this.hasLazyLoad = true;
         /** 'session' persists across refresh only; 'local' persists indefinitely. */
         this.stateStorage = 'session';
+        /** Direction for `defaultSortField`: 1 ascending (default), -1 descending. */
+        this.defaultSortOrder = 1;
+        this.initialMultiSortMeta = null;
+        /** Columns currently rendered — `cols` minus the hidden ones. Actions columns always render. */
+        this.visibleCols = [];
+        /** Cached count of visible data columns, so template bindings don't re-derive it per CD cycle. */
+        this.visibleDataColsCount = 0;
+        /** Data columns offered in the column chooser (actions columns are excluded). */
+        this.chooserCols = [];
         this.resolvedStateKey = null;
         this.selectedItemIds = []; // Pass only when hasLazyLoad === false, it's enough if the M2M association hasn't additional fields
         this.selectedItems = []; // Pass only when hasLazyLoad === false
@@ -3963,13 +3974,27 @@ class SpiderlyDataTableComponent {
          * Default is false.
          */
         this.navigateOnRowClick = false;
+        //#region Column visibility
+        /**
+         * User visibility choices (field → visible), holding only fields the user explicitly
+         * toggled away from their declared default — so a page changing a column's declared
+         * default later flows through to every user who never touched that column.
+         */
+        this.columnVisibilityOverrides = {};
+        /**
+         * Columns revealed by the load-time reconciliation. Kept apart from
+         * `columnVisibilityOverrides` so persisting a later unrelated toggle can't promote a
+         * transient safety reveal into a durable choice.
+         */
+        this.revealedByConstraint = new Set();
         this.clientFilterCount = 0;
     }
     ngAfterViewInit() {
         this.setupRemovableSort();
     }
     // PrimeNG v19 removed the removableSort property. This overrides the table's
-    // sort() method to add tri-state cycling: ascending → descending → unsorted.
+    // sort() method to add tri-state cycling: ascending → descending → unsorted
+    // (or back to the declared default sort when one is set).
     setupRemovableSort() {
         const originalSort = this.table.sort.bind(this.table);
         this.table.sort = (event) => {
@@ -3977,11 +4002,16 @@ class SpiderlyDataTableComponent {
             if (sortMeta && sortMeta.order === -1) {
                 const mouseEvent = event.originalEvent;
                 const isMultiSortClick = mouseEvent.metaKey || mouseEvent.ctrlKey;
+                // Un-sorting substitutes the declared default (when there is one) right here,
+                // so sortMultiple() broadcasts and emits the final meta in one shot.
                 if (isMultiSortClick) {
-                    this.table._multiSortMeta = this.table._multiSortMeta.filter((m) => m.field !== event.field);
+                    const remaining = this.table._multiSortMeta.filter((m) => m.field !== event.field);
+                    this.table._multiSortMeta = remaining.length
+                        ? remaining
+                        : (this.defaultMultiSortMeta() ?? remaining);
                 }
                 else {
-                    this.table._multiSortMeta = [];
+                    this.table._multiSortMeta = this.defaultMultiSortMeta() ?? [];
                     if (this.table.resetPageOnSort) {
                         this.table._first = 0;
                         this.table.firstChange.emit(0);
@@ -4041,8 +4071,208 @@ class SpiderlyDataTableComponent {
         else {
             this.clientLoad();
         }
+        this.restoreColumnVisibility();
+        this.reconcileVisibilityWithPersistedConstraints();
+        this.chooserCols = this.cols.filter(SpiderlyDataTableComponent.isDataColumn);
+        this.refreshVisibleCols();
+        // Bound to p-table's [multiSortMeta] so the FIRST request already carries the right
+        // sort. Persisted user sort wins over the declared default; we read it ourselves
+        // because PrimeNG's restoreState() runs on the first [value] change — after the
+        // initial lazy emit has already left.
+        this.initialMultiSortMeta =
+            this.persistedMultiSortMeta() ?? this.defaultMultiSortMeta();
+    }
+    /** A data column shows values for a `field`; anything else (the actions column) always renders. */
+    static isDataColumn(col) {
+        return !!col.field;
+    }
+    /**
+     * Storage slot for the visibility overrides. Deliberately ALWAYS localStorage, even when
+     * `stateStorage` is 'session': the column layout is a durable preference, while filters
+     * are a transient working set — different natural lifetimes.
+     */
+    get columnsStateKey() {
+        return this.resolvedStateKey ? `${this.resolvedStateKey}:columns` : null;
+    }
+    /** Actions columns always render; data columns follow reveal/override, then declared default. */
+    isColumnVisible(col) {
+        if (!SpiderlyDataTableComponent.isDataColumn(col))
+            return true;
+        if (col.lockVisible)
+            return true; // pinned — wins over any (possibly stale) override
+        if (this.revealedByConstraint.has(col.field))
+            return true;
+        return this.columnVisibilityOverrides[col.field] ?? col.visible !== false;
+    }
+    refreshVisibleCols() {
+        this.visibleCols = this.cols.filter((col) => this.isColumnVisible(col));
+        this.visibleDataColsCount = this.visibleCols.filter(SpiderlyDataTableComponent.isDataColumn).length;
+    }
+    /**
+     * Locked columns can't be toggled; the last visible data column can't be hidden — the
+     * table must never collapse to just an actions column. Revealing is always allowed.
+     */
+    canToggleColumn(col) {
+        if (col.lockVisible)
+            return false;
+        if (!this.isColumnVisible(col))
+            return true;
+        return this.visibleDataColsCount > 1;
+    }
+    toggleColumn(col, visible) {
+        this.revealedByConstraint.delete(col.field); // an explicit choice supersedes a safety reveal
+        if (visible === (col.visible !== false)) {
+            delete this.columnVisibilityOverrides[col.field]; // back at the declared default
+        }
+        else {
+            this.columnVisibilityOverrides[col.field] = visible;
+        }
+        this.persistColumnVisibility();
+        this.refreshVisibleCols();
+        if (!visible)
+            this.clearHiddenColumnConstraints([col]);
+    }
+    /** Restores every column to its declared default and forgets the stored override. */
+    resetColumnVisibility() {
+        const wasVisible = this.visibleCols.filter(SpiderlyDataTableComponent.isDataColumn);
+        this.revealedByConstraint.clear();
+        this.columnVisibilityOverrides = {};
+        this.persistColumnVisibility();
+        this.refreshVisibleCols();
+        // Columns the reset just hid follow the same rule as a manual hide.
+        this.clearHiddenColumnConstraints(wasVisible.filter((col) => !this.isColumnVisible(col)));
+    }
+    /**
+     * A hidden column contributes nothing to filtering or sorting: the header is the only
+     * filter surface, so a kept constraint would restrict the data invisibly. Reloads (once)
+     * only when a constraint was actually cleared — plain hides don't need a server round-trip.
+     */
+    clearHiddenColumnConstraints(cols) {
+        if (!this.table)
+            return;
+        let cleared = false;
+        for (const col of cols) {
+            const filterKey = col.filterField ?? col.field;
+            if (SpiderlyDataTableComponent.isActiveFilterMeta(this.table.filters?.[filterKey])) {
+                delete this.table.filters[filterKey];
+                cleared = true;
+            }
+            if (this.table._multiSortMeta?.some((m) => m.field === col.field)) {
+                this.table._multiSortMeta = this.table._multiSortMeta.filter((m) => m.field !== col.field);
+                this.table.tableService.onSort(this.table._multiSortMeta);
+                cleared = true;
+            }
+        }
+        if (cleared)
+            this.table._filter(); // re-emits the lazy load and saves the cleaned state
+    }
+    /** Whether filter metadata (single or array) carries a real constraint, not just an empty slot. */
+    static isActiveFilterMeta(meta) {
+        return (Array.isArray(meta) ? meta : [meta]).some((m) => m?.value != null &&
+            m.value !== '' &&
+            (!Array.isArray(m.value) || m.value.length > 0));
+    }
+    persistColumnVisibility() {
+        if (!this.columnsStateKey)
+            return;
+        if (Object.keys(this.columnVisibilityOverrides).length === 0) {
+            localStorage.removeItem(this.columnsStateKey);
+        }
+        else {
+            localStorage.setItem(this.columnsStateKey, JSON.stringify(this.columnVisibilityOverrides));
+        }
+    }
+    restoreColumnVisibility() {
+        if (!this.columnsStateKey)
+            return;
+        this.columnVisibilityOverrides =
+            SpiderlyDataTableComponent.readStoredJson(localStorage, this.columnsStateKey) ?? {};
+    }
+    /** Parses a JSON entry from web storage; missing or corrupted entries read as null. */
+    static readStoredJson(storage, key) {
+        try {
+            return JSON.parse(storage.getItem(key) ?? 'null');
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * PrimeNG's persisted table state (filters/sort/pagination), read directly from storage
+     * because we need it before PrimeNG's restoreState() runs on the first [value] change.
+     */
+    persistedTableState() {
+        if (!this.resolvedStateKey)
+            return null;
+        return SpiderlyDataTableComponent.readStoredJson(this.stateStorage === 'local' ? localStorage : sessionStorage, this.resolvedStateKey);
+    }
+    /**
+     * Guards the "hidden contributes nothing" invariant against state this component didn't
+     * write (older blobs, hand-edited storage): a hidden column the persisted table state
+     * still filters or sorts by is revealed rather than constraining the data invisibly.
+     * In-memory only — once the constraint is gone, the user's stored choice reapplies.
+     */
+    reconcileVisibilityWithPersistedConstraints() {
+        const state = this.persistedTableState();
+        if (!state)
+            return;
+        const constrained = new Set();
+        for (const [field, meta] of Object.entries(state.filters ?? {})) {
+            if (SpiderlyDataTableComponent.isActiveFilterMeta(meta))
+                constrained.add(field);
+        }
+        for (const sortMeta of state.multiSortMeta ?? []) {
+            if (sortMeta?.field)
+                constrained.add(sortMeta.field);
+        }
+        for (const col of this.cols) {
+            if (!SpiderlyDataTableComponent.isDataColumn(col))
+                continue;
+            if (this.isColumnVisible(col))
+                continue;
+            if (constrained.has(col.field) || constrained.has(col.filterField)) {
+                this.revealedByConstraint.add(col.field);
+            }
+        }
+    }
+    //#endregion
+    /**
+     * The declared default as PrimeNG sort meta, or null when none is declared — or when its
+     * column is hidden ("hidden contributes nothing"): the table then falls back to the
+     * backend's implicit Id DESC, exactly as if no default were declared.
+     */
+    defaultMultiSortMeta() {
+        if (!this.defaultSortField)
+            return null;
+        const defaultSortCol = this.cols?.find((col) => col.field === this.defaultSortField);
+        if (defaultSortCol && !this.isColumnVisible(defaultSortCol))
+            return null;
+        return [{ field: this.defaultSortField, order: this.defaultSortOrder }];
+    }
+    persistedMultiSortMeta() {
+        const state = this.persistedTableState();
+        return state?.multiSortMeta?.length ? state.multiSortMeta : null;
+    }
+    // Safety net: any lazy load still leaving unsorted (Clear filters — PrimeNG's clear()
+    // nulls the sort and emits in one call — or stale persisted state) falls back to the
+    // declared default. Patching the event before it becomes the backend Filter avoids a
+    // second fetch; clear() broadcasts sort state to the header icons before emitting,
+    // hence the explicit re-broadcast. The tri-state un-sort path never gets here — it
+    // substitutes the default at its source in setupRemovableSort().
+    applyDefaultSortIfUnsorted(event) {
+        if (event.multiSortMeta?.length)
+            return;
+        const defaultSort = this.defaultMultiSortMeta();
+        if (defaultSort == null)
+            return;
+        event.multiSortMeta = defaultSort;
+        if (this.table) {
+            this.table._multiSortMeta = defaultSort;
+            this.table.tableService.onSort(defaultSort);
+        }
     }
     lazyLoad(event) {
+        this.applyDefaultSortIfUnsorted(event);
         this.lastLazyLoadEvent = event;
         let tableFilter = event;
         tableFilter.additionalFilterIdLong = this.additionalFilterIdLong;
@@ -4482,7 +4712,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", 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 }], 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      [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              [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 cols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"col.sortable === false || !col.field\"\n              [style]=\"getColHeaderWidth(col.filterType)\"\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=\"col.sortable !== false && col.field\"\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        <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 cols; 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 *ngIf=\"col.filterType === 'blob'\">\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\" />\n              </ng-container>\n              <ng-container *ngIf=\"col.filterType !== 'blob'\">\n                {{ getRowData(rowData, col) }}\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              cols?.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              cols?.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  </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}}: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: 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", 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 }], 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]=\"col.sortable === false || !col.field\"\n              [style]=\"getColHeaderWidth(col.filterType)\"\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=\"col.sortable !== false && col.field\"\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        <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 *ngIf=\"col.filterType === 'blob'\">\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\" />\n              </ng-container>\n              <ng-container *ngIf=\"col.filterType !== 'blob'\">\n                {{ getRowData(rowData, col) }}\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}}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host .column-chooser{display:flex;flex-direction:column;gap:8px}:host .column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}:host .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}:host .column-chooser-reset: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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
             type: Component,
@@ -4494,10 +4724,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         TableModule,
                         ButtonModule,
                         MultiSelectModule,
+                        PopoverModule,
                         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      [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              [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 cols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"col.sortable === false || !col.field\"\n              [style]=\"getColHeaderWidth(col.filterType)\"\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=\"col.sortable !== false && col.field\"\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        <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 cols; 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 *ngIf=\"col.filterType === 'blob'\">\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\" />\n              </ng-container>\n              <ng-container *ngIf=\"col.filterType !== 'blob'\">\n                {{ getRowData(rowData, col) }}\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              cols?.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              cols?.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  </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}}: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      [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]=\"col.sortable === false || !col.field\"\n              [style]=\"getColHeaderWidth(col.filterType)\"\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=\"col.sortable !== false && col.field\"\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        <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 *ngIf=\"col.filterType === 'blob'\">\n                <img width=\"45\" [src]=\"getRowData(rowData, col)\" alt=\"\" />\n              </ng-container>\n              <ng-container *ngIf=\"col.filterType !== 'blob'\">\n                {{ getRowData(rowData, col) }}\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}}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host .column-chooser{display:flex;flex-direction:column;gap:8px}:host .column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}:host .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}:host .column-chooser-reset: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"] }]
         }], 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]
@@ -4563,6 +4794,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], stateStorage: [{
                 type: Input
+            }], defaultSortField: [{
+                type: Input
+            }], defaultSortOrder: [{
+                type: Input
             }], getAlreadySelectedItemIds: [{
                 type: Input
             }], getAlreadySelectedItems: [{
@@ -4591,7 +4826,7 @@ class Action {
     }
 }
 class Column {
-    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, onCellClick, } = {}) {
+    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, onCellClick, } = {}) {
         this.name = name;
         this.field = field;
         this.filterField = filterField;
@@ -4605,6 +4840,8 @@ class Column {
         this.showTime = showTime;
         this.decimalPlaces = decimalPlaces;
         this.sortable = sortable;
+        this.visible = visible;
+        this.lockVisible = lockVisible;
         this.onCellClick = onCellClick;
     }
 }