shirkasoft-ui-components 1.3.8 → 1.3.9

package/fesm2022/shirkasoft-ui-components-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, DestroyRef, input, output, signal, linkedSignal, computed, effect, untracked, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, ChangeDetectorRef, DestroyRef, input, model, output, signal, linkedSignal, computed, afterEveryRender, effect, untracked, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -18,6 +18,8 @@ import { getIcon } from 'shirkasoft-ui-components/utils';
  * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
  * Belongs to Shirkasoft.
  */
+/** Counter used to generate unique element ids per table instance. */
+let nextTableId = 0;
 /**
  * Data table with sorting, column filters, global search, pagination,
  * row/header actions, tag cells and optional server-side mode.
@@ -28,6 +30,8 @@ class TableComponent {
         return col.width || this.DEFAULT_COLUMN_WIDTH;
     }
     constructor() {
+        /** Unique id prefix so several tables on the same page don't share element ids. */
+        this.uid = `shk-table-${nextTableId++}`;
         this.fb = inject(FormBuilder);
         this.cdr = inject(ChangeDetectorRef);
         this.transloco = inject(TranslocoService);
@@ -89,6 +93,19 @@ class TableComponent {
         this.filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
         /** Currently active filter chip value. */
         this.activeFilter = input('', ...(ngDevMode ? [{ debugName: "activeFilter" }] : /* istanbul ignore next */ []));
+        /** Whether to render the leading checkbox column for multi-row selection. */
+        this.selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+        /**
+         * Field used to identify rows in the selection (keeps it stable across
+         * pages and data reloads). Falls back to the row reference when missing.
+         */
+        this.dataKey = input('id', ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
+        /** Optional predicate to disable the checkbox of specific rows. */
+        this.isRowSelectable = input(undefined, ...(ngDevMode ? [{ debugName: "isRowSelectable" }] : /* istanbul ignore next */ []));
+        /** Actions shown in the header while at least one row is selected. */
+        this.bulkActions = input([], ...(ngDevMode ? [{ debugName: "bulkActions" }] : /* istanbul ignore next */ []));
+        /** Selected rows. Supports two-way binding via `[(selection)]`. */
+        this.selection = model([], ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
         /** Emits when the user clicks the refresh button. */
         this.refresh = output();
         /** Emits page changes (server-side mode) with first/rows/page info. */
@@ -167,6 +184,31 @@ class TableComponent {
             }
             return [...columnsArray];
         }, ...(ngDevMode ? [{ debugName: "columnsWithActions" }] : /* istanbul ignore next */ []));
+        /** Keys of the selected rows, for O(1) lookups in the template. */
+        this.selectedKeys = computed(() => new Set(this.selection().map((row) => this.getSelectionKey(row))), ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+        /** Whether non-empty data has been received (see the selection pruning effect). */
+        this.hasReceivedData = false;
+        /** Selectable rows of the current page. */
+        this.selectablePageRows = computed(() => this.effectiveDisplayedData().filter((row) => this.canSelectRow(row)), ...(ngDevMode ? [{ debugName: "selectablePageRows" }] : /* istanbul ignore next */ []));
+        /** Whether every selectable row of the current page is selected. */
+        this.allPageSelected = computed(() => {
+            const rows = this.selectablePageRows();
+            const keys = this.selectedKeys();
+            return rows.length > 0 && rows.every((row) => keys.has(this.getSelectionKey(row)));
+        }, ...(ngDevMode ? [{ debugName: "allPageSelected" }] : /* istanbul ignore next */ []));
+        /** Whether only part of the current page is selected (header checkbox indeterminate). */
+        this.somePageSelected = computed(() => {
+            const keys = this.selectedKeys();
+            return (!this.allPageSelected() &&
+                this.selectablePageRows().some((row) => keys.has(this.getSelectionKey(row))));
+        }, ...(ngDevMode ? [{ debugName: "somePageSelected" }] : /* istanbul ignore next */ []));
+        /** Visible bulk actions for the current selection. */
+        this.visibleBulkActions = computed(() => {
+            const selected = this.selection();
+            return this.bulkActions().filter((a) => (a.isVisible ? a.isVisible(selected) : true));
+        }, ...(ngDevMode ? [{ debugName: "visibleBulkActions" }] : /* istanbul ignore next */ []));
+        /** Number of rendered columns, including the selection column. */
+        this.totalColspan = computed(() => this.columnsWithActions().length + (this.selectable() ? 1 : 0), ...(ngDevMode ? [{ debugName: "totalColspan" }] : /* istanbul ignore next */ []));
         /** Total records: server-provided in server mode, locally computed otherwise. */
         this.effectiveTotalRecords = computed(() => {
             return this.serverSide() ? this.totalRecords() : this.localTotalRecords();
@@ -197,6 +239,13 @@ class TableComponent {
             const to = Math.min(this.first() + this.rowsPerPageLocal(), total);
             return this.transloco.translate('table.pageReport', { from, to, total });
         }, ...(ngDevMode ? [{ debugName: "pageReport" }] : /* istanbul ignore next */ []));
+        /** Width (px) of the column filter popup, used to keep it inside the viewport. */
+        this.FILTER_POPUP_WIDTH = 200;
+        /** Viewport position of the open column filter popup. */
+        this.filterPopupPosition = signal({ top: 0, left: 0 }, ...(ngDevMode ? [{ debugName: "filterPopupPosition" }] : /* istanbul ignore next */ []));
+        /** Filter button the open popup is anchored to, and its scroll/resize listener cleanup. */
+        this.filterAnchor = null;
+        this.filterListenersCleanup = null;
         /** Maximum number of row actions shown directly before collapsing into a dropdown. */
         this.MAX_VISIBLE_ACTIONS = 4;
         /** Tracks which row's "more actions" dropdown is currently open (keyed by row identity). */
@@ -204,6 +253,15 @@ class TableComponent {
         /** Computes the fixed position of the dropdown so it's not clipped by overflow. */
         this.dropdownPosition = signal({ top: 0, left: 0 }, ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : /* istanbul ignore next */ []));
         this.columnFiltersForm = this.fb.group({});
+        this.destroyRef.onDestroy(() => this.filterListenersCleanup?.());
+        // Close the filter popup if its header cell was removed (e.g. the column
+        // disappeared). Re-renders of the same columns keep the cell (tracked by
+        // field), so new `columns` references alone don't close it.
+        afterEveryRender(() => {
+            if (this.filterAnchor && !this.filterAnchor.isConnected) {
+                this.closeFilters();
+            }
+        });
         // Debounced column-filter changes (server-side mode only).
         this.filterSubject
             .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
@@ -229,6 +287,21 @@ class TableComponent {
                 }
             });
         });
+        // Drop selected rows that disappeared from the data (client mode). Skipped
+        // while loading and until the first non-empty data arrives, so a temporary
+        // `[]` (initial value, async load, reload) doesn't wipe the selection.
+        effect(() => {
+            const newData = this.data();
+            const loading = this.loading();
+            untracked(() => {
+                if (this.serverSide() || loading)
+                    return;
+                if (newData.length > 0)
+                    this.hasReceivedData = true;
+                if (this.hasReceivedData)
+                    this.pruneSelection(newData);
+            });
+        });
         // Rebuild the column filter form whenever the columns change.
         effect(() => {
             const cols = this.columns();
@@ -366,11 +439,11 @@ class TableComponent {
                     }
                     else if (col.filterType === 'exact') {
                         const searchTerm = String(filterValue).toLowerCase();
-                        filtered = filtered.filter((item) => String(item[col.field]).toLowerCase() === searchTerm);
+                        filtered = filtered.filter((item) => String(item[col.field] ?? '').toLowerCase() === searchTerm);
                     }
                     else {
                         const searchTerm = String(filterValue).toLowerCase();
-                        filtered = filtered.filter((item) => String(item[col.field]).toLowerCase().includes(searchTerm));
+                        filtered = filtered.filter((item) => String(item[col.field] ?? '').toLowerCase().includes(searchTerm));
                     }
                 }
             }
@@ -388,6 +461,71 @@ class TableComponent {
         const displayed = filtered.slice(firstIndex, firstIndex + rows);
         this.displayedData.set(displayed);
     }
+    /** Identity used for a row inside the selection. */
+    getSelectionKey(row) {
+        const key = this.dataKey();
+        return key && row?.[key] !== undefined ? row[key] : row;
+    }
+    /** Whether the row's checkbox is enabled. */
+    canSelectRow(row) {
+        const predicate = this.isRowSelectable();
+        return predicate ? predicate(row) : true;
+    }
+    /** Whether the row is currently selected. */
+    isRowSelected(row) {
+        return this.selectedKeys().has(this.getSelectionKey(row));
+    }
+    /** Selects/deselects a single row. */
+    toggleRowSelection(row) {
+        if (!this.canSelectRow(row))
+            return;
+        const key = this.getSelectionKey(row);
+        if (this.isRowSelected(row)) {
+            this.selection.set(this.selection().filter((r) => this.getSelectionKey(r) !== key));
+        }
+        else {
+            this.selection.set([...this.selection(), row]);
+        }
+    }
+    /**
+     * Header checkbox: selects every selectable row of the current page or,
+     * when all of them are already selected, removes them from the selection.
+     * Rows selected on other pages are kept.
+     */
+    toggleSelectAllPage() {
+        const pageRows = this.selectablePageRows();
+        const pageKeys = new Set(pageRows.map((row) => this.getSelectionKey(row)));
+        const rest = this.selection().filter((r) => !pageKeys.has(this.getSelectionKey(r)));
+        this.selection.set(this.allPageSelected() ? rest : [...rest, ...pageRows]);
+    }
+    /** Clears the whole selection. */
+    clearSelection() {
+        this.selection.set([]);
+    }
+    /** Runs a bulk action with the current selection. */
+    runBulkAction(action) {
+        action.onClick([...this.selection()]);
+    }
+    /** Whether a bulk action is disabled for the current selection. */
+    isBulkActionDisabled(action) {
+        return action.isDisabled ? action.isDisabled(this.selection()) : false;
+    }
+    /**
+     * Drops selected rows that no longer exist in the data (client mode, e.g.
+     * after a bulk delete) and refreshes kept rows with their new references.
+     */
+    pruneSelection(data) {
+        const current = this.selection();
+        if (current.length === 0)
+            return;
+        const byKey = new Map(data.map((row) => [this.getSelectionKey(row), row]));
+        const next = current
+            .map((row) => byKey.get(this.getSelectionKey(row)))
+            .filter((row) => row !== undefined);
+        if (next.length !== current.length || next.some((row, i) => row !== current[i])) {
+            this.selection.set(next);
+        }
+    }
     /** Emits the filter chip clicked in the template. */
     onFilterClick(value) {
         this.filterClick.emit(value);
@@ -447,15 +585,52 @@ class TableComponent {
         const column = this.columns().find((col) => col.field === field);
         const value = column?.filterType === 'select' ? null : '';
         this.columnFiltersForm.get(field)?.setValue(value);
-        const visibility = this.showFilterInput();
-        this.showFilterInput.set({ ...visibility, [field]: false });
+        this.closeFilters();
+    }
+    /**
+     * Toggles a column filter popup. Only one popup is open at a time. The
+     * popup uses `position: fixed` anchored to the filter button, so the
+     * header cell (`overflow: hidden`) and the scroll wrapper can't clip it.
+     */
+    toggleFilter(field, event) {
+        const wasOpen = !!this.showFilterInput()[field];
+        this.closeFilters();
+        if (wasOpen)
+            return;
+        this.filterAnchor = event?.currentTarget ?? null;
+        this.updateFilterPopupPosition();
+        this.showFilterInput.set({ ...this.showFilterInput(), [field]: true });
+        const reposition = () => this.updateFilterPopupPosition();
+        window.addEventListener('scroll', reposition, true);
+        window.addEventListener('resize', reposition);
+        this.filterListenersCleanup = () => {
+            window.removeEventListener('scroll', reposition, true);
+            window.removeEventListener('resize', reposition);
+        };
+        setTimeout(() => document.getElementById(`${this.uid}-filter-${field}`)?.focus());
         this.cdr.markForCheck();
     }
-    /** Toggles the visibility of a column filter input. */
-    toggleFilter(field) {
+    /** Closes every column filter popup (values are kept). */
+    closeFilters() {
+        this.filterListenersCleanup?.();
+        this.filterListenersCleanup = null;
+        this.filterAnchor = null;
         const visibility = this.showFilterInput();
-        this.showFilterInput.set({ ...visibility, [field]: !visibility[field] });
-        this.cdr.markForCheck();
+        if (Object.values(visibility).some((v) => v)) {
+            const closed = {};
+            Object.keys(visibility).forEach((key) => (closed[key] = false));
+            this.showFilterInput.set(closed);
+            this.cdr.markForCheck();
+        }
+    }
+    /** Places the filter popup under its button, clamped to the viewport. */
+    updateFilterPopupPosition() {
+        if (!this.filterAnchor)
+            return;
+        const rect = this.filterAnchor.getBoundingClientRect();
+        const maxLeft = window.innerWidth - this.FILTER_POPUP_WIDTH - 8;
+        const left = Math.max(8, Math.min(rect.right - this.FILTER_POPUP_WIDTH, maxLeft));
+        this.filterPopupPosition.set({ top: rect.bottom + 6, left });
     }
     /**
      * Whether a column filter is non-empty. Avoids treating the number 0 as
@@ -672,6 +847,9 @@ class TableComponent {
     onHeaderKeydown(event, col) {
         if (col.field === 'actions' || !col.sortable)
             return;
+        // Ignore keys typed inside the filter popup (e.g. spaces in the input).
+        if (event.target !== event.currentTarget)
+            return;
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             this.toggleSort(col.field);
@@ -742,9 +920,14 @@ class TableComponent {
         if (hasOpen) {
             this.actionsDropdownOpen.set({});
         }
+        this.closeFilters();
+    }
+    /** Closes the column filter popup with Escape. */
+    onEscape() {
+        this.closeFilters();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: TableComponent, isStandalone: true, selector: "shk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showActionRow: { classPropertyName: "showActionRow", publicName: "showActionRow", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, defaultSortField: { classPropertyName: "defaultSortField", publicName: "defaultSortField", isSignal: true, isRequired: false, transformFunction: null }, defaultSortOrder: { classPropertyName: "defaultSortOrder", publicName: "defaultSortOrder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { refresh: "refresh", pageChange: "pageChange", filterChange: "filterChange", searchChange: "searchChange", filterClick: "filterClick" }, host: { listeners: { "document:click": "onDocumentClick()" } }, ngImport: i0, template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n  @if (showSearch() || filters().length > 0 || headerActions().length > 0) {\n    <div class=\"card p-2 min-[1440px]:p-2.5 flex flex-row items-center justify-between gap-2\">\n      <div class=\"flex items-center gap-2 min-[1440px]:gap-3 flex-1 min-w-0\">\n        @if (showSearch()) {\n          <div class=\"relative w-full md:w-52 min-[1440px]:w-56\">\n            <label [for]=\"'shk-table-search'\" class=\"sr-only\">{{\n              searchPlaceholder() || ('common.search_placeholder' | transloco)\n            }}</label>\n            <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n              <svg\n                [lucideIcon]=\"getIcon('search')\"\n                class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n              ></svg>\n            </div>\n            <input\n              id=\"shk-table-search\"\n              type=\"text\"\n              [value]=\"searchQuery()\"\n              (input)=\"onSearchInput($any($event.target).value)\"\n              [placeholder]=\"searchPlaceholder() || ('common.search_placeholder' | transloco)\"\n              class=\"block w-full pl-8 pr-3 py-1.5 text-xs border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md leading-5 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\"\n            />\n          </div>\n        }\n        @if (filters().length > 0) {\n          <div\n            class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] p-0.5 rounded-md ml-auto\"\n            role=\"group\"\n          >\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                [attr.aria-pressed]=\"f.value === activeFilter()\"\n                class=\"px-2.5 min-[1440px]:px-3 py-1 text-xs font-medium rounded _shk-text-surface-700 dark:[color:var(--shk-surface-700)] transition-all\"\n                [class]=\"\n                  f.value === activeFilter()\n                    ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]'\n                    : ''\n                \"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n      @if (headerActions().length > 0) {\n        <div class=\"flex items-center gap-1.5 shrink-0\">\n          @for (action of headerActions(); track $index) {\n            @if (isHeaderActionVisible(action)) {\n              <button\n                type=\"button\"\n                [class]=\"\n                  'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed ' +\n                  (action.class || '')\n                \"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                [attr.aria-label]=\"action.label\"\n                (click)=\"action.onClick()\"\n              >\n                @if (action.icon) {\n                  <svg [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n                }\n                {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <div class=\"card p-0 overflow-hidden table-card\" [class.shadow-lg]=\"hasShadow()\">\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table>\n        <thead>\n          <tr>\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                scope=\"col\"\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                (keydown)=\"onHeaderKeydown($event, col)\"\n                [tabindex]=\"col.field !== 'actions' && col.sortable ? 0 : -1\"\n                [attr.role]=\"col.field !== 'actions' && col.sortable ? 'button' : null\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.field === 'actions' ? col.width : null\"\n                [style.min-width]=\"col.field === 'actions' ? col.width : null\"\n                [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                class=\"relative px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-left text-[10px] min-[1440px]:text-xs font-bold _shk-text-surface-500 dark:[color:var(--shk-surface-400)] uppercase tracking-wider _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] focus:outline-none focus-visible:ring-1 focus-visible:[--tw-ring-color:var(--shk-primary-500)]\"\n              >\n                @if (col.field !== 'actions') {\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span>{{ col.header }}</span>\n                    <div class=\"flex items-center gap-1\">\n                      @if (col.sortable) {\n                        <shk-tooltip [text]=\"'table.tooltips.sort' | transloco\">\n                          @if (sortField() === col.field) {\n                            <svg\n                              [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-primary\"\n                            ></svg>\n                          } @else {\n                            <svg\n                              [lucideIcon]=\"getIcon('arrow-up-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                            ></svg>\n                          }\n                        </shk-tooltip>\n                      }\n                      @if (col.filter) {\n                        <shk-tooltip [text]=\"'table.tooltips.filter' | transloco\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field)\"\n                            [attr.aria-label]=\"'table.tooltips.filter' | transloco\"\n                            [attr.aria-expanded]=\"showFilterInput()[col.field] || false\"\n                            class=\"_shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n                          >\n                            <svg\n                              [lucideIcon]=\"getIcon('filter')\"\n                              class=\"w-3.5 h-3.5\"\n                              [class._shk-text-primary]=\"hasFilterValue(col.field)\"\n                            ></svg>\n                          </button>\n                        </shk-tooltip>\n                      }\n                    </div>\n                  </div>\n                  @if (col.filter && showFilterInput()[col.field]) {\n                    <div\n                      class=\"absolute left-0 top-full z-50 mt-1 p-2 min-w-[200px] bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-lg shadow-lg\"\n                      [formGroup]=\"columnFiltersForm\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <div class=\"relative\">\n                        @if (col.filterType !== 'select') {\n                          <label [for]=\"'shk-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <input\n                            [id]=\"'shk-filter-' + col.field\"\n                            type=\"text\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-3 py-1.5 text-sm rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"\n                              col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                            \"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <label [for]=\"'shk-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <select\n                            [id]=\"'shk-filter-' + col.field\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-2 py-1 text-xs rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] appearance-none\"\n                          >\n                            <option [ngValue]=\"null\">{{ 'table.filterAll' | transloco }}</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (hasFilterValue(col.field) && col.filterType !== 'select') {\n                          <button\n                            type=\"button\"\n                            class=\"absolute right-2 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)]\"\n                            (click)=\"clearFilter(col.field)\"\n                          >\n                            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center justify-center\">\n                    <span>{{ col.header }}</span>\n                  </div>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        @if (loading()) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div\n                  class=\"flex items-center justify-center\"\n                  role=\"status\"\n                  [attr.aria-label]=\"'common.loading' | transloco\"\n                >\n                  <svg\n                    [lucideIcon]=\"getIcon('loader')\"\n                    class=\"w-6 h-6 animate-spin _shk-text-primary\"\n                  ></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else if (effectiveDisplayedData().length === 0) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex flex-col items-center\">\n                  <div\n                    class=\"w-16 h-16 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center mb-4\"\n                  >\n                    <svg\n                      [lucideIcon]=\"getIcon('inbox')\"\n                      class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                    ></svg>\n                  </div>\n                  <p\n                    class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n                  >\n                    {{ emptyMessage() || ('common.no_records' | transloco) }}\n                  </p>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else {\n          <tbody>\n            @for (rowData of effectiveDisplayedData(); track trackByRow(rowData, $index)) {\n              <tr\n                class=\"hover:[background-color:color-mix(in srgb,var(--shk-primary-50)30%,transparent)] dark:hover:[background-color:color-mix(in srgb,var(--shk-primary-900)10%,transparent)] transition-colors duration-200 border-b _shk-border dark:[border-color:var(--shk-surface-100)]\"\n              >\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                    [class]=\"\n                      'px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)] ' +\n                      (col.field === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words')\n                    \"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'visible'\"\n                    [style.text-overflow]=\"'clip'\"\n                    [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <shk-tag\n                          [value]=\"getTagValue(col, rowData)\"\n                          [severity]=\"getTagSeverity(col, rowData)\"\n                          [rounded]=\"getTagRounded(col, rowData)\"\n                          [icon]=\"getTagIcon(col, rowData)\"\n                          [style]=\"getTagStyle(col, rowData)\"\n                        />\n                      } @else if (col.format) {\n                        <span>{{ col.format(rowData) }}</span>\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customTemplates()[col.field] || defaultTemplate;\n                            context: { $implicit: rowData, field: col.field }\n                          \"\n                        ></ng-container>\n                      }\n                    } @else {\n                      <div class=\"flex items-center justify-start gap-px\">\n                        @for (action of getVisibleRowActions(rowData); track $index) {\n                          @if (isRowActionVisible(action, rowData)) {\n                            <div class=\"relative group\">\n                              <shk-tooltip\n                                [text]=\"getRowActionLabel(action, rowData)\"\n                                position=\"top\"\n                              >\n                                <button\n                                  type=\"button\"\n                                  (click)=\"action.onClick(rowData)\"\n                                  [class]=\"\n                                    'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md ' +\n                                    getRowActionClass(action, rowData)\n                                  \"\n                                  [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                  [attr.aria-label]=\"getRowActionLabel(action, rowData)\"\n                                >\n                                  <svg\n                                    [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                    class=\"w-4 h-4\"\n                                  ></svg>\n                                </button>\n                              </shk-tooltip>\n                            </div>\n                          }\n                        }\n                        @if (getHiddenRowActions(rowData).length > 0) {\n                          <div class=\"relative\">\n                            <shk-tooltip\n                              [text]=\"'common.more_options' | transloco\"\n                              position=\"top\"\n                            >\n                              <button\n                                type=\"button\"\n                                (click)=\"$event.stopPropagation(); toggleActionsDropdown(rowData, $event)\"\n                                class=\"table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md\"\n                                [attr.aria-label]=\"'common.more_options' | transloco\"\n                                [attr.aria-expanded]=\"isActionsDropdownOpen(rowData)\"\n                              >\n                                <svg\n                                  [lucideIcon]=\"getIcon('ellipsis-vertical')\"\n                                  class=\"w-4 h-4\"\n                                ></svg>\n                              </button>\n                            </shk-tooltip>\n                            @if (isActionsDropdownOpen(rowData)) {\n                              <div\n                                class=\"fixed z-[9999] min-w-[160px] bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md shadow-lg py-1\"\n                                [style.top]=\"dropdownPosition().top + 'px'\"\n                                [style.left]=\"dropdownPosition().left + 'px'\"\n                              >\n                                @for (action of getHiddenRowActions(rowData); track $index) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"action.onClick(rowData); toggleActionsDropdown(rowData)\"\n                                    [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                    [class]=\"\n                                      'w-full flex items-center gap-2 px-3 py-2 text-xs text-left _shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors ' +\n                                      getRowActionClass(action, rowData)\n                                    \"\n                                  >\n                                    <svg\n                                      [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                      class=\"w-3.5 h-3.5 shrink-0\"\n                                    ></svg>\n                                    <span>{{ getRowActionLabel(action, rowData) }}</span>\n                                  </button>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ rowData[field] }}\n      </ng-template>\n    </div>\n    <div\n      class=\"table-pagination flex items-center justify-between gap-4 px-2 min-[1440px]:px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-100)]\"\n    >\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        {{ pageReport() }}\n      </div>\n      <div\n        class=\"flex items-center gap-0.5\"\n        role=\"navigation\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"goToFirst()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <span\n          class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          >{{ currentPage() }} / {{ totalPages() }}</span\n        >\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n      <div\n        class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\"\n      >\n        <label [for]=\"'shk-rows-per-page'\">{{ 'table.rows' | transloco }}</label>\n        <select\n          id=\"shk-rows-per-page\"\n          [value]=\"rowsPerPageLocal()\"\n          (change)=\"onRowsPerPageChange($any($event.target).value)\"\n          class=\"border _shk-border dark:[border-color:var(--shk-surface-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:[border-color:var(--shk-primary-500)]\"\n        >\n          @for (opt of rowsPerPageOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table td{white-space:normal;word-break:break-word}td button svg{width:1.125rem!important;height:1.125rem!important}td button:disabled{opacity:.4;cursor:not-allowed}.table-action-btn svg{width:1rem!important;height:1rem!important;min-width:1rem!important;min-height:1rem!important}.table-action-btn{padding:.5rem!important;min-width:2rem!important;min-height:2rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.table-scroll-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;border-radius:inherit;-webkit-overflow-scrolling:touch;container-type:inline-size}.table-card,.table-pagination{container-type:inline-size}@container (max-width: 640px){.table-pagination{flex-direction:column;align-items:center;gap:.5rem}.table-pagination>div{justify-content:center}}.table-scroll-wrapper table{table-layout:fixed;width:100%}@container (max-width: 768px){.table-scroll-wrapper{scroll-snap-type:x mandatory}.table-scroll-wrapper table{table-layout:auto;width:100%}.table-scroll-wrapper th:not([data-shk-actions]),.table-scroll-wrapper td:not([data-shk-actions]){min-width:var(--shk-col-width, 140px);max-width:var(--shk-col-width, 140px)}.table-scroll-wrapper th,.table-scroll-wrapper td{scroll-snap-align:start}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: TagComponent, selector: "shk-tag", inputs: ["value", "severity", "rounded", "icon", "style", "styleClass"] }, { kind: "component", type: TooltipComponent, selector: "shk-tooltip", inputs: ["text", "position", "mode", "offset"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: TableComponent, isStandalone: true, selector: "shk-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showActionRow: { classPropertyName: "showActionRow", publicName: "showActionRow", isSignal: true, isRequired: false, transformFunction: null }, customTemplates: { classPropertyName: "customTemplates", publicName: "customTemplates", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, hasShadow: { classPropertyName: "hasShadow", publicName: "hasShadow", isSignal: true, isRequired: false, transformFunction: null }, defaultSortField: { classPropertyName: "defaultSortField", publicName: "defaultSortField", isSignal: true, isRequired: false, transformFunction: null }, defaultSortOrder: { classPropertyName: "defaultSortOrder", publicName: "defaultSortOrder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, activeFilter: { classPropertyName: "activeFilter", publicName: "activeFilter", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, bulkActions: { classPropertyName: "bulkActions", publicName: "bulkActions", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", refresh: "refresh", pageChange: "pageChange", filterChange: "filterChange", searchChange: "searchChange", filterClick: "filterClick" }, host: { listeners: { "document:click": "onDocumentClick()", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n  @if (\n    showSearch() ||\n    filters().length > 0 ||\n    headerActions().length > 0 ||\n    (selectable() && bulkActions().length > 0 && selection().length > 0)\n  ) {\n    <div class=\"card p-2 min-[1440px]:p-2.5 flex flex-row items-center justify-between gap-2\">\n      <div class=\"flex items-center gap-2 min-[1440px]:gap-3 flex-1 min-w-0\">\n        @if (showSearch()) {\n          <div class=\"relative w-full md:w-52 min-[1440px]:w-56\">\n            <label [for]=\"uid + '-search'\" class=\"sr-only\">{{\n              searchPlaceholder() || ('common.search_placeholder' | transloco)\n            }}</label>\n            <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n              <svg\n                [lucideIcon]=\"getIcon('search')\"\n                class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n              ></svg>\n            </div>\n            <input\n              [id]=\"uid + '-search'\"\n              type=\"text\"\n              [value]=\"searchQuery()\"\n              (input)=\"onSearchInput($any($event.target).value)\"\n              [placeholder]=\"searchPlaceholder() || ('common.search_placeholder' | transloco)\"\n              class=\"block w-full pl-8 pr-3 py-1.5 text-xs border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md leading-5 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\"\n            />\n          </div>\n        }\n        @if (filters().length > 0) {\n          <div\n            class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] p-0.5 rounded-md ml-auto\"\n            role=\"group\"\n          >\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                [attr.aria-pressed]=\"f.value === activeFilter()\"\n                class=\"px-2.5 min-[1440px]:px-3 py-1 text-xs font-medium rounded _shk-text-surface-700 dark:[color:var(--shk-surface-700)] transition-all\"\n                [class]=\"\n                  f.value === activeFilter()\n                    ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]'\n                    : ''\n                \"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n      @if (selectable() && selection().length > 0 && bulkActions().length > 0) {\n        <div\n          class=\"flex items-center gap-1.5 shrink-0\"\n          role=\"toolbar\"\n          [attr.aria-label]=\"'table.selected' | transloco: { count: selection().length }\"\n        >\n          <span\n            class=\"text-xs font-medium _shk-text-surface-600 dark:[color:var(--shk-surface-400)] whitespace-nowrap\"\n            aria-live=\"polite\"\n            >{{ 'table.selected' | transloco: { count: selection().length } }}</span\n          >\n          <button\n            type=\"button\"\n            (click)=\"clearSelection()\"\n            [attr.aria-label]=\"'table.clearSelection' | transloco\"\n            class=\"table-action-btn rounded-md _shk-text-surface-500 dark:[color:var(--shk-surface-400)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n          </button>\n          @for (action of visibleBulkActions(); track $index) {\n            <button\n              type=\"button\"\n              [class]=\"\n                'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed ' +\n                (action.class || '')\n              \"\n              [disabled]=\"isBulkActionDisabled(action)\"\n              [attr.aria-label]=\"action.label\"\n              (click)=\"runBulkAction(action)\"\n            >\n              @if (action.icon) {\n                <svg [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n              }\n              {{ action.label }}\n            </button>\n          }\n        </div>\n      }\n      @if (headerActions().length > 0) {\n        <div class=\"flex items-center gap-1.5 shrink-0\">\n          @for (action of headerActions(); track $index) {\n            @if (isHeaderActionVisible(action)) {\n              <button\n                type=\"button\"\n                [class]=\"\n                  'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed ' +\n                  (action.class || '')\n                \"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                [attr.aria-label]=\"action.label\"\n                (click)=\"action.onClick()\"\n              >\n                @if (action.icon) {\n                  <svg [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n                }\n                {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <div class=\"card p-0 overflow-hidden table-card\" [class.shadow-lg]=\"hasShadow()\">\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table>\n        <thead>\n          <tr>\n            @if (selectable()) {\n              <th\n                scope=\"col\"\n                data-shk-select\n                class=\"w-10 px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-center _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)]\"\n              >\n                <input\n                  type=\"checkbox\"\n                  class=\"shk-table-checkbox\"\n                  [checked]=\"allPageSelected()\"\n                  [indeterminate]=\"somePageSelected()\"\n                  [disabled]=\"loading() || selectablePageRows().length === 0\"\n                  (change)=\"toggleSelectAllPage()\"\n                  [attr.aria-label]=\"'table.selectAll' | transloco\"\n                />\n              </th>\n            }\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                scope=\"col\"\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                (keydown)=\"onHeaderKeydown($event, col)\"\n                [tabindex]=\"col.field !== 'actions' && col.sortable ? 0 : -1\"\n                [attr.role]=\"col.field !== 'actions' && col.sortable ? 'button' : null\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.field === 'actions' ? col.width : null\"\n                [style.min-width]=\"col.field === 'actions' ? col.width : null\"\n                [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                class=\"relative px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-left text-[10px] min-[1440px]:text-xs font-bold _shk-text-surface-500 dark:[color:var(--shk-surface-400)] uppercase tracking-wider _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] focus:outline-none focus-visible:ring-1 focus-visible:[--tw-ring-color:var(--shk-primary-500)]\"\n              >\n                @if (col.field !== 'actions') {\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span>{{ col.header }}</span>\n                    <div class=\"flex items-center gap-1 shrink-0\">\n                      @if (col.sortable) {\n                        <shk-tooltip [text]=\"'table.tooltips.sort' | transloco\">\n                          @if (sortField() === col.field) {\n                            <svg\n                              [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-primary\"\n                            ></svg>\n                          } @else {\n                            <svg\n                              [lucideIcon]=\"getIcon('arrow-up-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                            ></svg>\n                          }\n                        </shk-tooltip>\n                      }\n                      @if (col.filter) {\n                        <shk-tooltip [text]=\"'table.tooltips.filter' | transloco\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field, $event)\"\n                            [attr.aria-label]=\"'table.tooltips.filter' | transloco\"\n                            [attr.aria-expanded]=\"showFilterInput()[col.field] || false\"\n                            class=\"_shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n                          >\n                            <svg\n                              [lucideIcon]=\"getIcon('filter')\"\n                              class=\"w-3.5 h-3.5\"\n                              [class._shk-text-primary]=\"hasFilterValue(col.field)\"\n                            ></svg>\n                          </button>\n                        </shk-tooltip>\n                      }\n                    </div>\n                  </div>\n                  @if (col.filter && showFilterInput()[col.field]) {\n                    <div\n                      class=\"fixed z-[9999] p-2 w-[200px] normal-case tracking-normal font-normal bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-lg shadow-lg\"\n                      [style.top]=\"filterPopupPosition().top + 'px'\"\n                      [style.left]=\"filterPopupPosition().left + 'px'\"\n                      [formGroup]=\"columnFiltersForm\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"$event.stopPropagation()\"\n                      (keydown.escape)=\"closeFilters()\"\n                    >\n                      <div class=\"relative\">\n                        @if (col.filterType !== 'select') {\n                          <label [for]=\"uid + '-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <input\n                            [id]=\"uid + '-filter-' + col.field\"\n                            type=\"text\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-3 py-1.5 text-sm rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"\n                              col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                            \"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <label [for]=\"uid + '-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <select\n                            [id]=\"uid + '-filter-' + col.field\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-2 py-1 text-xs rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] appearance-none\"\n                          >\n                            <option [ngValue]=\"null\">{{ 'table.filterAll' | transloco }}</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (hasFilterValue(col.field) && col.filterType !== 'select') {\n                          <button\n                            type=\"button\"\n                            class=\"absolute right-2 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)]\"\n                            (click)=\"clearFilter(col.field)\"\n                          >\n                            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center justify-center\">\n                    <span>{{ col.header }}</span>\n                  </div>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        @if (loading()) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"totalColspan()\" class=\"text-center py-12\">\n                <div\n                  class=\"flex items-center justify-center\"\n                  role=\"status\"\n                  [attr.aria-label]=\"'common.loading' | transloco\"\n                >\n                  <svg\n                    [lucideIcon]=\"getIcon('loader')\"\n                    class=\"w-6 h-6 animate-spin _shk-text-primary\"\n                  ></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else if (effectiveDisplayedData().length === 0) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"totalColspan()\" class=\"text-center py-12\">\n                <div class=\"flex flex-col items-center\">\n                  <div\n                    class=\"w-16 h-16 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center mb-4\"\n                  >\n                    <svg\n                      [lucideIcon]=\"getIcon('inbox')\"\n                      class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                    ></svg>\n                  </div>\n                  <p\n                    class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n                  >\n                    {{ emptyMessage() || ('common.no_records' | transloco) }}\n                  </p>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else {\n          <tbody>\n            @for (rowData of effectiveDisplayedData(); track trackByRow(rowData, $index)) {\n              <tr\n                [attr.aria-selected]=\"selectable() ? isRowSelected(rowData) : null\"\n                [class.shk-row-selected]=\"selectable() && isRowSelected(rowData)\"\n                class=\"hover:[background-color:color-mix(in srgb,var(--shk-primary-50)30%,transparent)] dark:hover:[background-color:color-mix(in srgb,var(--shk-primary-900)10%,transparent)] transition-colors duration-200 border-b _shk-border dark:[border-color:var(--shk-surface-100)]\"\n              >\n                @if (selectable()) {\n                  <td data-shk-select class=\"w-10 px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-center\">\n                    <input\n                      type=\"checkbox\"\n                      class=\"shk-table-checkbox\"\n                      [checked]=\"isRowSelected(rowData)\"\n                      [disabled]=\"!canSelectRow(rowData)\"\n                      (change)=\"toggleRowSelection(rowData)\"\n                      [attr.aria-label]=\"'table.selectRow' | transloco: { index: first() + $index + 1 }\"\n                    />\n                  </td>\n                }\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                    [class]=\"\n                      'px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)] ' +\n                      (col.field === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words')\n                    \"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'visible'\"\n                    [style.text-overflow]=\"'clip'\"\n                    [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <shk-tag\n                          [value]=\"getTagValue(col, rowData)\"\n                          [severity]=\"getTagSeverity(col, rowData)\"\n                          [rounded]=\"getTagRounded(col, rowData)\"\n                          [icon]=\"getTagIcon(col, rowData)\"\n                          [style]=\"getTagStyle(col, rowData)\"\n                        />\n                      } @else if (col.format) {\n                        <span>{{ col.format(rowData) }}</span>\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customTemplates()[col.field] || defaultTemplate;\n                            context: { $implicit: rowData, field: col.field }\n                          \"\n                        ></ng-container>\n                      }\n                    } @else {\n                      <div class=\"flex items-center justify-start gap-px\">\n                        @for (action of getVisibleRowActions(rowData); track $index) {\n                          @if (isRowActionVisible(action, rowData)) {\n                            <div class=\"relative group\">\n                              <shk-tooltip\n                                [text]=\"getRowActionLabel(action, rowData)\"\n                                position=\"top\"\n                              >\n                                <button\n                                  type=\"button\"\n                                  (click)=\"action.onClick(rowData)\"\n                                  [class]=\"\n                                    'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md ' +\n                                    getRowActionClass(action, rowData)\n                                  \"\n                                  [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                  [attr.aria-label]=\"getRowActionLabel(action, rowData)\"\n                                >\n                                  <svg\n                                    [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                    class=\"w-4 h-4\"\n                                  ></svg>\n                                </button>\n                              </shk-tooltip>\n                            </div>\n                          }\n                        }\n                        @if (getHiddenRowActions(rowData).length > 0) {\n                          <div class=\"relative\">\n                            <shk-tooltip\n                              [text]=\"'common.more_options' | transloco\"\n                              position=\"top\"\n                            >\n                              <button\n                                type=\"button\"\n                                (click)=\"$event.stopPropagation(); toggleActionsDropdown(rowData, $event)\"\n                                class=\"table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md\"\n                                [attr.aria-label]=\"'common.more_options' | transloco\"\n                                [attr.aria-expanded]=\"isActionsDropdownOpen(rowData)\"\n                              >\n                                <svg\n                                  [lucideIcon]=\"getIcon('ellipsis-vertical')\"\n                                  class=\"w-4 h-4\"\n                                ></svg>\n                              </button>\n                            </shk-tooltip>\n                            @if (isActionsDropdownOpen(rowData)) {\n                              <div\n                                class=\"fixed z-[9999] min-w-[160px] bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md shadow-lg py-1\"\n                                [style.top]=\"dropdownPosition().top + 'px'\"\n                                [style.left]=\"dropdownPosition().left + 'px'\"\n                              >\n                                @for (action of getHiddenRowActions(rowData); track $index) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"action.onClick(rowData); toggleActionsDropdown(rowData)\"\n                                    [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                    [class]=\"\n                                      'w-full flex items-center gap-2 px-3 py-2 text-xs text-left _shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors ' +\n                                      getRowActionClass(action, rowData)\n                                    \"\n                                  >\n                                    <svg\n                                      [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                      class=\"w-3.5 h-3.5 shrink-0\"\n                                    ></svg>\n                                    <span>{{ getRowActionLabel(action, rowData) }}</span>\n                                  </button>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ rowData[field] }}\n      </ng-template>\n    </div>\n    <div\n      class=\"table-pagination flex items-center justify-between gap-4 px-2 min-[1440px]:px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-100)]\"\n    >\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        {{ pageReport() }}\n      </div>\n      <div\n        class=\"flex items-center gap-0.5\"\n        role=\"navigation\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"goToFirst()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"shk-page-btn p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"shk-page-btn p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <span\n          class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          >{{ currentPage() }} / {{ totalPages() }}</span\n        >\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"shk-page-btn p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"shk-page-btn p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n      <div\n        class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\"\n      >\n        <label [for]=\"uid + '-rows-per-page'\">{{ 'table.rows' | transloco }}</label>\n        <select\n          [id]=\"uid + '-rows-per-page'\"\n          [value]=\"rowsPerPageLocal()\"\n          (change)=\"onRowsPerPageChange($any($event.target).value)\"\n          class=\"border _shk-border dark:[border-color:var(--shk-surface-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:[border-color:var(--shk-primary-500)]\"\n        >\n          @for (opt of rowsPerPageOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th{white-space:nowrap}table td{white-space:normal;overflow-wrap:break-word}.shk-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.375rem;transition:background-color .15s ease,color .15s ease}.shk-page-btn:hover:not(:disabled){background-color:var(--shk-surface-100)}:host-context(.dark) .shk-page-btn:hover:not(:disabled){background-color:var(--shk-surface-200)}.shk-page-btn:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--shk-primary-500) 45%,transparent)}td button svg{width:1.125rem!important;height:1.125rem!important}td button:disabled{opacity:.4;cursor:not-allowed}.table-action-btn svg{width:1rem!important;height:1rem!important;min-width:1rem!important;min-height:1rem!important}.table-action-btn{padding:.5rem!important;min-width:2rem!important;min-height:2rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.table-scroll-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;border-radius:inherit;-webkit-overflow-scrolling:touch;container-type:inline-size}.table-card,.table-pagination{container-type:inline-size}@container (max-width: 640px){.table-pagination{flex-direction:column;align-items:center;gap:.5rem}.table-pagination>div{justify-content:center}}.table-scroll-wrapper table{table-layout:auto;width:100%}@container (max-width: 768px){.table-scroll-wrapper{scroll-snap-type:x mandatory}.table-scroll-wrapper table{table-layout:auto;width:100%}.table-scroll-wrapper th:not([data-shk-actions]):not([data-shk-select]){min-width:var(--shk-col-width, 140px)}.table-scroll-wrapper td:not([data-shk-actions]):not([data-shk-select]){min-width:var(--shk-col-width, 140px);max-width:var(--shk-col-width, 140px)}.table-scroll-wrapper th,.table-scroll-wrapper td{scroll-snap-align:start}}th[data-shk-select],td[data-shk-select]{width:2.5rem;min-width:2.5rem}.shk-table-checkbox{width:.875rem;height:.875rem;cursor:pointer;vertical-align:middle;accent-color:var(--shk-primary-500)}.shk-table-checkbox:disabled{opacity:.4;cursor:not-allowed}tr.shk-row-selected{background-color:color-mix(in srgb,var(--shk-primary-50) 60%,transparent)}tr.shk-row-selected:hover{background-color:color-mix(in srgb,var(--shk-primary-50) 90%,transparent)}:host-context(.dark) tr.shk-row-selected{background-color:color-mix(in srgb,var(--shk-primary-900) 20%,transparent)}:host-context(.dark) tr.shk-row-selected:hover{background-color:color-mix(in srgb,var(--shk-primary-900) 30%,transparent)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: TagComponent, selector: "shk-tag", inputs: ["value", "severity", "rounded", "icon", "style", "styleClass"] }, { kind: "component", type: TooltipComponent, selector: "shk-tooltip", inputs: ["text", "position", "mode", "offset"] }, { kind: "pipe", type: i3.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -755,10 +938,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         LucideDynamicIcon,
                         TagComponent,
                         TooltipComponent,
-                    ], template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n  @if (showSearch() || filters().length > 0 || headerActions().length > 0) {\n    <div class=\"card p-2 min-[1440px]:p-2.5 flex flex-row items-center justify-between gap-2\">\n      <div class=\"flex items-center gap-2 min-[1440px]:gap-3 flex-1 min-w-0\">\n        @if (showSearch()) {\n          <div class=\"relative w-full md:w-52 min-[1440px]:w-56\">\n            <label [for]=\"'shk-table-search'\" class=\"sr-only\">{{\n              searchPlaceholder() || ('common.search_placeholder' | transloco)\n            }}</label>\n            <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n              <svg\n                [lucideIcon]=\"getIcon('search')\"\n                class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n              ></svg>\n            </div>\n            <input\n              id=\"shk-table-search\"\n              type=\"text\"\n              [value]=\"searchQuery()\"\n              (input)=\"onSearchInput($any($event.target).value)\"\n              [placeholder]=\"searchPlaceholder() || ('common.search_placeholder' | transloco)\"\n              class=\"block w-full pl-8 pr-3 py-1.5 text-xs border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md leading-5 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\"\n            />\n          </div>\n        }\n        @if (filters().length > 0) {\n          <div\n            class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] p-0.5 rounded-md ml-auto\"\n            role=\"group\"\n          >\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                [attr.aria-pressed]=\"f.value === activeFilter()\"\n                class=\"px-2.5 min-[1440px]:px-3 py-1 text-xs font-medium rounded _shk-text-surface-700 dark:[color:var(--shk-surface-700)] transition-all\"\n                [class]=\"\n                  f.value === activeFilter()\n                    ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]'\n                    : ''\n                \"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n      @if (headerActions().length > 0) {\n        <div class=\"flex items-center gap-1.5 shrink-0\">\n          @for (action of headerActions(); track $index) {\n            @if (isHeaderActionVisible(action)) {\n              <button\n                type=\"button\"\n                [class]=\"\n                  'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed ' +\n                  (action.class || '')\n                \"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                [attr.aria-label]=\"action.label\"\n                (click)=\"action.onClick()\"\n              >\n                @if (action.icon) {\n                  <svg [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n                }\n                {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <div class=\"card p-0 overflow-hidden table-card\" [class.shadow-lg]=\"hasShadow()\">\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table>\n        <thead>\n          <tr>\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                scope=\"col\"\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                (keydown)=\"onHeaderKeydown($event, col)\"\n                [tabindex]=\"col.field !== 'actions' && col.sortable ? 0 : -1\"\n                [attr.role]=\"col.field !== 'actions' && col.sortable ? 'button' : null\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.field === 'actions' ? col.width : null\"\n                [style.min-width]=\"col.field === 'actions' ? col.width : null\"\n                [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                class=\"relative px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-left text-[10px] min-[1440px]:text-xs font-bold _shk-text-surface-500 dark:[color:var(--shk-surface-400)] uppercase tracking-wider _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] focus:outline-none focus-visible:ring-1 focus-visible:[--tw-ring-color:var(--shk-primary-500)]\"\n              >\n                @if (col.field !== 'actions') {\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span>{{ col.header }}</span>\n                    <div class=\"flex items-center gap-1\">\n                      @if (col.sortable) {\n                        <shk-tooltip [text]=\"'table.tooltips.sort' | transloco\">\n                          @if (sortField() === col.field) {\n                            <svg\n                              [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-primary\"\n                            ></svg>\n                          } @else {\n                            <svg\n                              [lucideIcon]=\"getIcon('arrow-up-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                            ></svg>\n                          }\n                        </shk-tooltip>\n                      }\n                      @if (col.filter) {\n                        <shk-tooltip [text]=\"'table.tooltips.filter' | transloco\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field)\"\n                            [attr.aria-label]=\"'table.tooltips.filter' | transloco\"\n                            [attr.aria-expanded]=\"showFilterInput()[col.field] || false\"\n                            class=\"_shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n                          >\n                            <svg\n                              [lucideIcon]=\"getIcon('filter')\"\n                              class=\"w-3.5 h-3.5\"\n                              [class._shk-text-primary]=\"hasFilterValue(col.field)\"\n                            ></svg>\n                          </button>\n                        </shk-tooltip>\n                      }\n                    </div>\n                  </div>\n                  @if (col.filter && showFilterInput()[col.field]) {\n                    <div\n                      class=\"absolute left-0 top-full z-50 mt-1 p-2 min-w-[200px] bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-lg shadow-lg\"\n                      [formGroup]=\"columnFiltersForm\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <div class=\"relative\">\n                        @if (col.filterType !== 'select') {\n                          <label [for]=\"'shk-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <input\n                            [id]=\"'shk-filter-' + col.field\"\n                            type=\"text\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-3 py-1.5 text-sm rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"\n                              col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                            \"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <label [for]=\"'shk-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <select\n                            [id]=\"'shk-filter-' + col.field\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-2 py-1 text-xs rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] appearance-none\"\n                          >\n                            <option [ngValue]=\"null\">{{ 'table.filterAll' | transloco }}</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (hasFilterValue(col.field) && col.filterType !== 'select') {\n                          <button\n                            type=\"button\"\n                            class=\"absolute right-2 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)]\"\n                            (click)=\"clearFilter(col.field)\"\n                          >\n                            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center justify-center\">\n                    <span>{{ col.header }}</span>\n                  </div>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        @if (loading()) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div\n                  class=\"flex items-center justify-center\"\n                  role=\"status\"\n                  [attr.aria-label]=\"'common.loading' | transloco\"\n                >\n                  <svg\n                    [lucideIcon]=\"getIcon('loader')\"\n                    class=\"w-6 h-6 animate-spin _shk-text-primary\"\n                  ></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else if (effectiveDisplayedData().length === 0) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"columnsWithActions().length\" class=\"text-center py-12\">\n                <div class=\"flex flex-col items-center\">\n                  <div\n                    class=\"w-16 h-16 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center mb-4\"\n                  >\n                    <svg\n                      [lucideIcon]=\"getIcon('inbox')\"\n                      class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                    ></svg>\n                  </div>\n                  <p\n                    class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n                  >\n                    {{ emptyMessage() || ('common.no_records' | transloco) }}\n                  </p>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else {\n          <tbody>\n            @for (rowData of effectiveDisplayedData(); track trackByRow(rowData, $index)) {\n              <tr\n                class=\"hover:[background-color:color-mix(in srgb,var(--shk-primary-50)30%,transparent)] dark:hover:[background-color:color-mix(in srgb,var(--shk-primary-900)10%,transparent)] transition-colors duration-200 border-b _shk-border dark:[border-color:var(--shk-surface-100)]\"\n              >\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                    [class]=\"\n                      'px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)] ' +\n                      (col.field === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words')\n                    \"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'visible'\"\n                    [style.text-overflow]=\"'clip'\"\n                    [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <shk-tag\n                          [value]=\"getTagValue(col, rowData)\"\n                          [severity]=\"getTagSeverity(col, rowData)\"\n                          [rounded]=\"getTagRounded(col, rowData)\"\n                          [icon]=\"getTagIcon(col, rowData)\"\n                          [style]=\"getTagStyle(col, rowData)\"\n                        />\n                      } @else if (col.format) {\n                        <span>{{ col.format(rowData) }}</span>\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customTemplates()[col.field] || defaultTemplate;\n                            context: { $implicit: rowData, field: col.field }\n                          \"\n                        ></ng-container>\n                      }\n                    } @else {\n                      <div class=\"flex items-center justify-start gap-px\">\n                        @for (action of getVisibleRowActions(rowData); track $index) {\n                          @if (isRowActionVisible(action, rowData)) {\n                            <div class=\"relative group\">\n                              <shk-tooltip\n                                [text]=\"getRowActionLabel(action, rowData)\"\n                                position=\"top\"\n                              >\n                                <button\n                                  type=\"button\"\n                                  (click)=\"action.onClick(rowData)\"\n                                  [class]=\"\n                                    'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md ' +\n                                    getRowActionClass(action, rowData)\n                                  \"\n                                  [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                  [attr.aria-label]=\"getRowActionLabel(action, rowData)\"\n                                >\n                                  <svg\n                                    [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                    class=\"w-4 h-4\"\n                                  ></svg>\n                                </button>\n                              </shk-tooltip>\n                            </div>\n                          }\n                        }\n                        @if (getHiddenRowActions(rowData).length > 0) {\n                          <div class=\"relative\">\n                            <shk-tooltip\n                              [text]=\"'common.more_options' | transloco\"\n                              position=\"top\"\n                            >\n                              <button\n                                type=\"button\"\n                                (click)=\"$event.stopPropagation(); toggleActionsDropdown(rowData, $event)\"\n                                class=\"table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md\"\n                                [attr.aria-label]=\"'common.more_options' | transloco\"\n                                [attr.aria-expanded]=\"isActionsDropdownOpen(rowData)\"\n                              >\n                                <svg\n                                  [lucideIcon]=\"getIcon('ellipsis-vertical')\"\n                                  class=\"w-4 h-4\"\n                                ></svg>\n                              </button>\n                            </shk-tooltip>\n                            @if (isActionsDropdownOpen(rowData)) {\n                              <div\n                                class=\"fixed z-[9999] min-w-[160px] bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md shadow-lg py-1\"\n                                [style.top]=\"dropdownPosition().top + 'px'\"\n                                [style.left]=\"dropdownPosition().left + 'px'\"\n                              >\n                                @for (action of getHiddenRowActions(rowData); track $index) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"action.onClick(rowData); toggleActionsDropdown(rowData)\"\n                                    [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                    [class]=\"\n                                      'w-full flex items-center gap-2 px-3 py-2 text-xs text-left _shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors ' +\n                                      getRowActionClass(action, rowData)\n                                    \"\n                                  >\n                                    <svg\n                                      [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                      class=\"w-3.5 h-3.5 shrink-0\"\n                                    ></svg>\n                                    <span>{{ getRowActionLabel(action, rowData) }}</span>\n                                  </button>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ rowData[field] }}\n      </ng-template>\n    </div>\n    <div\n      class=\"table-pagination flex items-center justify-between gap-4 px-2 min-[1440px]:px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-100)]\"\n    >\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        {{ pageReport() }}\n      </div>\n      <div\n        class=\"flex items-center gap-0.5\"\n        role=\"navigation\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"goToFirst()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <span\n          class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          >{{ currentPage() }} / {{ totalPages() }}</span\n        >\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n      <div\n        class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\"\n      >\n        <label [for]=\"'shk-rows-per-page'\">{{ 'table.rows' | transloco }}</label>\n        <select\n          id=\"shk-rows-per-page\"\n          [value]=\"rowsPerPageLocal()\"\n          (change)=\"onRowsPerPageChange($any($event.target).value)\"\n          class=\"border _shk-border dark:[border-color:var(--shk-surface-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:[border-color:var(--shk-primary-500)]\"\n        >\n          @for (opt of rowsPerPageOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table td{white-space:normal;word-break:break-word}td button svg{width:1.125rem!important;height:1.125rem!important}td button:disabled{opacity:.4;cursor:not-allowed}.table-action-btn svg{width:1rem!important;height:1rem!important;min-width:1rem!important;min-height:1rem!important}.table-action-btn{padding:.5rem!important;min-width:2rem!important;min-height:2rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.table-scroll-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;border-radius:inherit;-webkit-overflow-scrolling:touch;container-type:inline-size}.table-card,.table-pagination{container-type:inline-size}@container (max-width: 640px){.table-pagination{flex-direction:column;align-items:center;gap:.5rem}.table-pagination>div{justify-content:center}}.table-scroll-wrapper table{table-layout:fixed;width:100%}@container (max-width: 768px){.table-scroll-wrapper{scroll-snap-type:x mandatory}.table-scroll-wrapper table{table-layout:auto;width:100%}.table-scroll-wrapper th:not([data-shk-actions]),.table-scroll-wrapper td:not([data-shk-actions]){min-width:var(--shk-col-width, 140px);max-width:var(--shk-col-width, 140px)}.table-scroll-wrapper th,.table-scroll-wrapper td{scroll-snap-align:start}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPage", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showActionRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionRow", required: false }] }], customTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplates", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], hasShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShadow", required: false }] }], defaultSortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSortField", required: false }] }], defaultSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSortOrder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], activeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFilter", required: false }] }], refresh: [{ type: i0.Output, args: ["refresh"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], filterClick: [{ type: i0.Output, args: ["filterClick"] }], onDocumentClick: [{
+                    ], template: "<div class=\"space-y-2 min-[1440px]:space-y-3 mt-2 min-[1440px]:mt-3 animate-fade-in pb-8\">\n  @if (\n    showSearch() ||\n    filters().length > 0 ||\n    headerActions().length > 0 ||\n    (selectable() && bulkActions().length > 0 && selection().length > 0)\n  ) {\n    <div class=\"card p-2 min-[1440px]:p-2.5 flex flex-row items-center justify-between gap-2\">\n      <div class=\"flex items-center gap-2 min-[1440px]:gap-3 flex-1 min-w-0\">\n        @if (showSearch()) {\n          <div class=\"relative w-full md:w-52 min-[1440px]:w-56\">\n            <label [for]=\"uid + '-search'\" class=\"sr-only\">{{\n              searchPlaceholder() || ('common.search_placeholder' | transloco)\n            }}</label>\n            <div class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center pointer-events-none\">\n              <svg\n                [lucideIcon]=\"getIcon('search')\"\n                class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n              ></svg>\n            </div>\n            <input\n              [id]=\"uid + '-search'\"\n              type=\"text\"\n              [value]=\"searchQuery()\"\n              (input)=\"onSearchInput($any($event.target).value)\"\n              [placeholder]=\"searchPlaceholder() || ('common.search_placeholder' | transloco)\"\n              class=\"block w-full pl-8 pr-3 py-1.5 text-xs border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md leading-5 _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:bg-white dark:focus:[background-color:var(--shk-surface-800)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)]\"\n            />\n          </div>\n        }\n        @if (filters().length > 0) {\n          <div\n            class=\"flex _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] p-0.5 rounded-md ml-auto\"\n            role=\"group\"\n          >\n            @for (f of filters(); track f.value) {\n              <button\n                type=\"button\"\n                (click)=\"onFilterClick(f.value)\"\n                [attr.aria-pressed]=\"f.value === activeFilter()\"\n                class=\"px-2.5 min-[1440px]:px-3 py-1 text-xs font-medium rounded _shk-text-surface-700 dark:[color:var(--shk-surface-700)] transition-all\"\n                [class]=\"\n                  f.value === activeFilter()\n                    ? 'bg-white shadow-sm dark:[background-color:var(--shk-surface-700)]'\n                    : ''\n                \"\n              >\n                {{ f.label }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n      @if (selectable() && selection().length > 0 && bulkActions().length > 0) {\n        <div\n          class=\"flex items-center gap-1.5 shrink-0\"\n          role=\"toolbar\"\n          [attr.aria-label]=\"'table.selected' | transloco: { count: selection().length }\"\n        >\n          <span\n            class=\"text-xs font-medium _shk-text-surface-600 dark:[color:var(--shk-surface-400)] whitespace-nowrap\"\n            aria-live=\"polite\"\n            >{{ 'table.selected' | transloco: { count: selection().length } }}</span\n          >\n          <button\n            type=\"button\"\n            (click)=\"clearSelection()\"\n            [attr.aria-label]=\"'table.clearSelection' | transloco\"\n            class=\"table-action-btn rounded-md _shk-text-surface-500 dark:[color:var(--shk-surface-400)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)]\"\n          >\n            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n          </button>\n          @for (action of visibleBulkActions(); track $index) {\n            <button\n              type=\"button\"\n              [class]=\"\n                'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed ' +\n                (action.class || '')\n              \"\n              [disabled]=\"isBulkActionDisabled(action)\"\n              [attr.aria-label]=\"action.label\"\n              (click)=\"runBulkAction(action)\"\n            >\n              @if (action.icon) {\n                <svg [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n              }\n              {{ action.label }}\n            </button>\n          }\n        </div>\n      }\n      @if (headerActions().length > 0) {\n        <div class=\"flex items-center gap-1.5 shrink-0\">\n          @for (action of headerActions(); track $index) {\n            @if (isHeaderActionVisible(action)) {\n              <button\n                type=\"button\"\n                [class]=\"\n                  'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md _shk-bg-primary text-white hover:[background-color:var(--shk-primary-700)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed ' +\n                  (action.class || '')\n                \"\n                [disabled]=\"isHeaderActionDisabled(action)\"\n                [attr.aria-label]=\"action.label\"\n                (click)=\"action.onClick()\"\n              >\n                @if (action.icon) {\n                  <svg [lucideIcon]=\"getIcon(action.icon)\" class=\"w-3.5 h-3.5\"></svg>\n                }\n                {{ action.label }}\n              </button>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  <div class=\"card p-0 overflow-hidden table-card\" [class.shadow-lg]=\"hasShadow()\">\n    <div class=\"table-scroll-wrapper _shk-scrollbar\">\n      <table>\n        <thead>\n          <tr>\n            @if (selectable()) {\n              <th\n                scope=\"col\"\n                data-shk-select\n                class=\"w-10 px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-center _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)]\"\n              >\n                <input\n                  type=\"checkbox\"\n                  class=\"shk-table-checkbox\"\n                  [checked]=\"allPageSelected()\"\n                  [indeterminate]=\"somePageSelected()\"\n                  [disabled]=\"loading() || selectablePageRows().length === 0\"\n                  (change)=\"toggleSelectAllPage()\"\n                  [attr.aria-label]=\"'table.selectAll' | transloco\"\n                />\n              </th>\n            }\n            @for (col of columnsWithActions(); track col.field) {\n              <th\n                scope=\"col\"\n                (click)=\"col.field !== 'actions' && col.sortable && toggleSort(col.field)\"\n                (keydown)=\"onHeaderKeydown($event, col)\"\n                [tabindex]=\"col.field !== 'actions' && col.sortable ? 0 : -1\"\n                [attr.role]=\"col.field !== 'actions' && col.sortable ? 'button' : null\"\n                [attr.aria-sort]=\"getAriaSort(col)\"\n                [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                [style.cursor]=\"col.field !== 'actions' && col.sortable ? 'pointer' : 'default'\"\n                [style.width]=\"col.field === 'actions' ? col.width : null\"\n                [style.min-width]=\"col.field === 'actions' ? col.width : null\"\n                [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                class=\"relative px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-left text-[10px] min-[1440px]:text-xs font-bold _shk-text-surface-500 dark:[color:var(--shk-surface-400)] uppercase tracking-wider _shk-bg-surface-50 dark:[background-color:var(--shk-surface-100)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] focus:outline-none focus-visible:ring-1 focus-visible:[--tw-ring-color:var(--shk-primary-500)]\"\n              >\n                @if (col.field !== 'actions') {\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span>{{ col.header }}</span>\n                    <div class=\"flex items-center gap-1 shrink-0\">\n                      @if (col.sortable) {\n                        <shk-tooltip [text]=\"'table.tooltips.sort' | transloco\">\n                          @if (sortField() === col.field) {\n                            <svg\n                              [lucideIcon]=\"getIcon(sortOrder() === 1 ? 'arrow-up' : 'arrow-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-primary\"\n                            ></svg>\n                          } @else {\n                            <svg\n                              [lucideIcon]=\"getIcon('arrow-up-down')\"\n                              class=\"w-3.5 h-3.5 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                            ></svg>\n                          }\n                        </shk-tooltip>\n                      }\n                      @if (col.filter) {\n                        <shk-tooltip [text]=\"'table.tooltips.filter' | transloco\">\n                          <button\n                            type=\"button\"\n                            (click)=\"$event.stopPropagation(); toggleFilter(col.field, $event)\"\n                            [attr.aria-label]=\"'table.tooltips.filter' | transloco\"\n                            [attr.aria-expanded]=\"showFilterInput()[col.field] || false\"\n                            class=\"_shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)] transition-colors\"\n                          >\n                            <svg\n                              [lucideIcon]=\"getIcon('filter')\"\n                              class=\"w-3.5 h-3.5\"\n                              [class._shk-text-primary]=\"hasFilterValue(col.field)\"\n                            ></svg>\n                          </button>\n                        </shk-tooltip>\n                      }\n                    </div>\n                  </div>\n                  @if (col.filter && showFilterInput()[col.field]) {\n                    <div\n                      class=\"fixed z-[9999] p-2 w-[200px] normal-case tracking-normal font-normal bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-lg shadow-lg\"\n                      [style.top]=\"filterPopupPosition().top + 'px'\"\n                      [style.left]=\"filterPopupPosition().left + 'px'\"\n                      [formGroup]=\"columnFiltersForm\"\n                      (click)=\"$event.stopPropagation()\"\n                      (keydown)=\"$event.stopPropagation()\"\n                      (keydown.escape)=\"closeFilters()\"\n                    >\n                      <div class=\"relative\">\n                        @if (col.filterType !== 'select') {\n                          <label [for]=\"uid + '-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <input\n                            [id]=\"uid + '-filter-' + col.field\"\n                            type=\"text\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-3 py-1.5 text-sm rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] placeholder:[color:var(--shk-surface-400)] dark:placeholder:[color:var(--shk-surface-500)]\"\n                            [placeholder]=\"\n                              col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                            \"\n                          />\n                        }\n                        @if (col.filterType === 'select') {\n                          <label [for]=\"uid + '-filter-' + col.field\" class=\"sr-only\">{{\n                            col.filterPlaceholder || ('common.search_placeholder' | transloco)\n                          }}</label>\n                          <select\n                            [id]=\"uid + '-filter-' + col.field\"\n                            [formControlName]=\"col.field\"\n                            class=\"w-full px-2 py-1 text-xs rounded-md border _shk-border dark:[border-color:var(--shk-surface-200)] bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:[border-color:var(--shk-primary-500)] focus:ring-1 focus:[--tw-ring-color:var(--shk-primary-500)] appearance-none\"\n                          >\n                            <option [ngValue]=\"null\">{{ 'table.filterAll' | transloco }}</option>\n                            @for (opt of col.filterOptions || []; track opt.value) {\n                              <option [ngValue]=\"opt.value\">{{ opt.label }}</option>\n                            }\n                          </select>\n                        }\n                        @if (hasFilterValue(col.field) && col.filterType !== 'select') {\n                          <button\n                            type=\"button\"\n                            class=\"absolute right-2 top-1/2 -translate-y-1/2 _shk-text-surface-400 dark:[color:var(--shk-surface-500)] hover:[color:var(--shk-surface-600)] dark:hover:[color:var(--shk-surface-300)]\"\n                            (click)=\"clearFilter(col.field)\"\n                          >\n                            <svg [lucideIcon]=\"getIcon('x')\" class=\"w-3.5 h-3.5\"></svg>\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  <div class=\"flex items-center justify-center\">\n                    <span>{{ col.header }}</span>\n                  </div>\n                }\n              </th>\n            }\n          </tr>\n        </thead>\n        @if (loading()) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"totalColspan()\" class=\"text-center py-12\">\n                <div\n                  class=\"flex items-center justify-center\"\n                  role=\"status\"\n                  [attr.aria-label]=\"'common.loading' | transloco\"\n                >\n                  <svg\n                    [lucideIcon]=\"getIcon('loader')\"\n                    class=\"w-6 h-6 animate-spin _shk-text-primary\"\n                  ></svg>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else if (effectiveDisplayedData().length === 0) {\n          <tbody class=\"border-b _shk-border dark:[border-color:var(--shk-surface-100)]\">\n            <tr>\n              <td [attr.colspan]=\"totalColspan()\" class=\"text-center py-12\">\n                <div class=\"flex flex-col items-center\">\n                  <div\n                    class=\"w-16 h-16 _shk-bg-surface-100 dark:[background-color:var(--shk-surface-100)] rounded-full flex items-center justify-center mb-4\"\n                  >\n                    <svg\n                      [lucideIcon]=\"getIcon('inbox')\"\n                      class=\"w-8 h-8 _shk-text-surface-400 dark:[color:var(--shk-surface-500)]\"\n                    ></svg>\n                  </div>\n                  <p\n                    class=\"text-lg font-semibold _shk-text-surface-600 dark:[color:var(--shk-surface-300)]\"\n                  >\n                    {{ emptyMessage() || ('common.no_records' | transloco) }}\n                  </p>\n                </div>\n              </td>\n            </tr>\n          </tbody>\n        } @else {\n          <tbody>\n            @for (rowData of effectiveDisplayedData(); track trackByRow(rowData, $index)) {\n              <tr\n                [attr.aria-selected]=\"selectable() ? isRowSelected(rowData) : null\"\n                [class.shk-row-selected]=\"selectable() && isRowSelected(rowData)\"\n                class=\"hover:[background-color:color-mix(in srgb,var(--shk-primary-50)30%,transparent)] dark:hover:[background-color:color-mix(in srgb,var(--shk-primary-900)10%,transparent)] transition-colors duration-200 border-b _shk-border dark:[border-color:var(--shk-surface-100)]\"\n              >\n                @if (selectable()) {\n                  <td data-shk-select class=\"w-10 px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-center\">\n                    <input\n                      type=\"checkbox\"\n                      class=\"shk-table-checkbox\"\n                      [checked]=\"isRowSelected(rowData)\"\n                      [disabled]=\"!canSelectRow(rowData)\"\n                      (change)=\"toggleRowSelection(rowData)\"\n                      [attr.aria-label]=\"'table.selectRow' | transloco: { index: first() + $index + 1 }\"\n                    />\n                  </td>\n                }\n                @for (col of columnsWithActions(); track col.field) {\n                  <td\n                    [attr.data-shk-actions]=\"col.field === 'actions' ? '' : null\"\n                    [class]=\"\n                      'px-2 min-[1440px]:px-3 py-2 min-[1440px]:py-2.5 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)] ' +\n                      (col.field === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words')\n                    \"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'visible'\"\n                    [style.text-overflow]=\"'clip'\"\n                    [style.--shk-col-width]=\"col.field !== 'actions' ? getColumnWidth(col) : null\"\n                  >\n                    @if (col.field !== 'actions') {\n                      @if (col.template === 'tag') {\n                        <shk-tag\n                          [value]=\"getTagValue(col, rowData)\"\n                          [severity]=\"getTagSeverity(col, rowData)\"\n                          [rounded]=\"getTagRounded(col, rowData)\"\n                          [icon]=\"getTagIcon(col, rowData)\"\n                          [style]=\"getTagStyle(col, rowData)\"\n                        />\n                      } @else if (col.format) {\n                        <span>{{ col.format(rowData) }}</span>\n                      } @else {\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            customTemplates()[col.field] || defaultTemplate;\n                            context: { $implicit: rowData, field: col.field }\n                          \"\n                        ></ng-container>\n                      }\n                    } @else {\n                      <div class=\"flex items-center justify-start gap-px\">\n                        @for (action of getVisibleRowActions(rowData); track $index) {\n                          @if (isRowActionVisible(action, rowData)) {\n                            <div class=\"relative group\">\n                              <shk-tooltip\n                                [text]=\"getRowActionLabel(action, rowData)\"\n                                position=\"top\"\n                              >\n                                <button\n                                  type=\"button\"\n                                  (click)=\"action.onClick(rowData)\"\n                                  [class]=\"\n                                    'table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md ' +\n                                    getRowActionClass(action, rowData)\n                                  \"\n                                  [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                  [attr.aria-label]=\"getRowActionLabel(action, rowData)\"\n                                >\n                                  <svg\n                                    [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                    class=\"w-4 h-4\"\n                                  ></svg>\n                                </button>\n                              </shk-tooltip>\n                            </div>\n                          }\n                        }\n                        @if (getHiddenRowActions(rowData).length > 0) {\n                          <div class=\"relative\">\n                            <shk-tooltip\n                              [text]=\"'common.more_options' | transloco\"\n                              position=\"top\"\n                            >\n                              <button\n                                type=\"button\"\n                                (click)=\"$event.stopPropagation(); toggleActionsDropdown(rowData, $event)\"\n                                class=\"table-action-btn hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] rounded-md\"\n                                [attr.aria-label]=\"'common.more_options' | transloco\"\n                                [attr.aria-expanded]=\"isActionsDropdownOpen(rowData)\"\n                              >\n                                <svg\n                                  [lucideIcon]=\"getIcon('ellipsis-vertical')\"\n                                  class=\"w-4 h-4\"\n                                ></svg>\n                              </button>\n                            </shk-tooltip>\n                            @if (isActionsDropdownOpen(rowData)) {\n                              <div\n                                class=\"fixed z-[9999] min-w-[160px] bg-white dark:[background-color:var(--shk-surface-100)] border _shk-border dark:[border-color:var(--shk-surface-200)] rounded-md shadow-lg py-1\"\n                                [style.top]=\"dropdownPosition().top + 'px'\"\n                                [style.left]=\"dropdownPosition().left + 'px'\"\n                              >\n                                @for (action of getHiddenRowActions(rowData); track $index) {\n                                  <button\n                                    type=\"button\"\n                                    (click)=\"action.onClick(rowData); toggleActionsDropdown(rowData)\"\n                                    [disabled]=\"isRowActionDisabled(action, rowData) || false\"\n                                    [class]=\"\n                                      'w-full flex items-center gap-2 px-3 py-2 text-xs text-left _shk-text-surface-700 dark:[color:var(--shk-surface-700)] hover:[background-color:var(--shk-surface-100)] dark:hover:[background-color:var(--shk-surface-200)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors ' +\n                                      getRowActionClass(action, rowData)\n                                    \"\n                                  >\n                                    <svg\n                                      [lucideIcon]=\"getIcon(getRowActionIconName(action, rowData))\"\n                                      class=\"w-3.5 h-3.5 shrink-0\"\n                                    ></svg>\n                                    <span>{{ getRowActionLabel(action, rowData) }}</span>\n                                  </button>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ rowData[field] }}\n      </ng-template>\n    </div>\n    <div\n      class=\"table-pagination flex items-center justify-between gap-4 px-2 min-[1440px]:px-3 py-2 border-t _shk-border dark:[border-color:var(--shk-surface-100)]\"\n    >\n      <div class=\"text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\">\n        {{ pageReport() }}\n      </div>\n      <div\n        class=\"flex items-center gap-0.5\"\n        role=\"navigation\"\n      >\n        <button\n          type=\"button\"\n          (click)=\"goToFirst()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"shk-page-btn p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"prev()\"\n          [disabled]=\"isFirstPage()\"\n          class=\"shk-page-btn p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-left')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <span\n          class=\"px-2 text-xs font-medium _shk-text-surface-700 dark:[color:var(--shk-surface-700)]\"\n          >{{ currentPage() }} / {{ totalPages() }}</span\n        >\n        <button\n          type=\"button\"\n          (click)=\"next()\"\n          [disabled]=\"isLastPage()\"\n          class=\"shk-page-btn p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevron-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"goToLast()\"\n          [disabled]=\"isLastPage()\"\n          class=\"shk-page-btn p-1 _shk-text-surface-500 hover:[color:var(--shk-surface-700)] dark:[color:var(--shk-surface-400)] dark:hover:[color:var(--shk-surface-200)] disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors\"\n        >\n          <svg [lucideIcon]=\"getIcon('chevrons-right')\" class=\"w-4 h-4\"></svg>\n        </button>\n      </div>\n      <div\n        class=\"flex items-center gap-1.5 text-xs _shk-text-surface-600 dark:[color:var(--shk-surface-400)]\"\n      >\n        <label [for]=\"uid + '-rows-per-page'\">{{ 'table.rows' | transloco }}</label>\n        <select\n          [id]=\"uid + '-rows-per-page'\"\n          [value]=\"rowsPerPageLocal()\"\n          (change)=\"onRowsPerPageChange($any($event.target).value)\"\n          class=\"border _shk-border dark:[border-color:var(--shk-surface-200)] rounded px-2 py-1 text-xs bg-white dark:[background-color:var(--shk-surface-100)] _shk-text-surface-700 dark:[color:var(--shk-surface-700)] focus:outline-none focus:[border-color:var(--shk-primary-500)]\"\n        >\n          @for (opt of rowsPerPageOptions(); track opt) {\n            <option [value]=\"opt\">{{ opt }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["input:focus{outline:none}input[type=text]{font-weight:400!important}table th{white-space:nowrap}table td{white-space:normal;overflow-wrap:break-word}.shk-page-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:.375rem;transition:background-color .15s ease,color .15s ease}.shk-page-btn:hover:not(:disabled){background-color:var(--shk-surface-100)}:host-context(.dark) .shk-page-btn:hover:not(:disabled){background-color:var(--shk-surface-200)}.shk-page-btn:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--shk-primary-500) 45%,transparent)}td button svg{width:1.125rem!important;height:1.125rem!important}td button:disabled{opacity:.4;cursor:not-allowed}.table-action-btn svg{width:1rem!important;height:1rem!important;min-width:1rem!important;min-height:1rem!important}.table-action-btn{padding:.5rem!important;min-width:2rem!important;min-height:2rem!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.table-scroll-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;border-radius:inherit;-webkit-overflow-scrolling:touch;container-type:inline-size}.table-card,.table-pagination{container-type:inline-size}@container (max-width: 640px){.table-pagination{flex-direction:column;align-items:center;gap:.5rem}.table-pagination>div{justify-content:center}}.table-scroll-wrapper table{table-layout:auto;width:100%}@container (max-width: 768px){.table-scroll-wrapper{scroll-snap-type:x mandatory}.table-scroll-wrapper table{table-layout:auto;width:100%}.table-scroll-wrapper th:not([data-shk-actions]):not([data-shk-select]){min-width:var(--shk-col-width, 140px)}.table-scroll-wrapper td:not([data-shk-actions]):not([data-shk-select]){min-width:var(--shk-col-width, 140px);max-width:var(--shk-col-width, 140px)}.table-scroll-wrapper th,.table-scroll-wrapper td{scroll-snap-align:start}}th[data-shk-select],td[data-shk-select]{width:2.5rem;min-width:2.5rem}.shk-table-checkbox{width:.875rem;height:.875rem;cursor:pointer;vertical-align:middle;accent-color:var(--shk-primary-500)}.shk-table-checkbox:disabled{opacity:.4;cursor:not-allowed}tr.shk-row-selected{background-color:color-mix(in srgb,var(--shk-primary-50) 60%,transparent)}tr.shk-row-selected:hover{background-color:color-mix(in srgb,var(--shk-primary-50) 90%,transparent)}:host-context(.dark) tr.shk-row-selected{background-color:color-mix(in srgb,var(--shk-primary-900) 20%,transparent)}:host-context(.dark) tr.shk-row-selected:hover{background-color:color-mix(in srgb,var(--shk-primary-900) 30%,transparent)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPage", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showActionRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionRow", required: false }] }], customTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplates", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], hasShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasShadow", required: false }] }], defaultSortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSortField", required: false }] }], defaultSortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSortOrder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], activeFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeFilter", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], isRowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSelectable", required: false }] }], bulkActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkActions", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], filterClick: [{ type: i0.Output, args: ["filterClick"] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
 /**