shirkasoft-ui-components 1.2.0 → 1.3.0

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

@@ -0,0 +1,689 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, DestroyRef, input, output, signal, linkedSignal, computed, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@jsverse/transloco';
+import { TranslocoService, TranslocoModule } from '@jsverse/transloco';
+import { Subject, debounceTime } from 'rxjs';
+import { LucidePlus, LucideDynamicIcon } from '@lucide/angular';
+import { TagComponent } from 'shirkasoft-ui-components/tag';
+import { TooltipComponent } from 'shirkasoft-ui-components/tooltip';
+import { getIcon } from 'shirkasoft-ui-components/utils';
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Data table with sorting, column filters, global search, pagination,
+ * row/header actions, tag cells and optional server-side mode.
+ */
+class TableComponent {
+    /** Returns the effective CSS width for a column ('actions' included). */
+    getColumnWidth(col) {
+        return col.width || this.DEFAULT_COLUMN_WIDTH;
+    }
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.cdr = inject(ChangeDetectorRef);
+        this.transloco = inject(TranslocoService);
+        this.destroyRef = inject(DestroyRef);
+        /** Maps icon names to lucide components, falling back to a plus icon. */
+        this.getIcon = (name) => getIcon(name, LucidePlus);
+        /**
+         * Minimum width applied to each column (except `actions`, which keeps its
+         * own computed width) only on narrow screens. On wide screens columns
+         * stretch normally to fill the container width. Can be overridden per
+         * column via `col.width`.
+         */
+        this.DEFAULT_COLUMN_WIDTH = '140px';
+        /** Signal with the translated "Actions" header label. */
+        this.actionsHeaderLabel = toSignal(this.transloco.selectTranslate('common.actions'), {
+            initialValue: 'Acciones',
+        });
+        /** Signal reacting to language changes so imperative translations are recomputed. */
+        this.currentLang = toSignal(this.transloco.langChanges$, {
+            initialValue: this.transloco.getActiveLang(),
+        });
+        /** Reactive signal of loaded translations so pageReport is not stuck with raw keys. */
+        this.translations = toSignal(this.transloco.selectTranslation());
+        /** Full dataset. In server-side mode only the current page rows. */
+        this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Column definitions (field, header, filterable, tag cell options, etc.). */
+        this.columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Number of rows displayed per page. */
+        this.rowsPerPage = input(10, ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : /* istanbul ignore next */ []));
+        /** Options shown in the rows-per-page selector. */
+        this.rowsPerPageOptions = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : /* istanbul ignore next */ []));
+        /** Whether the table is in loading state (shows the overlay/skeleton). */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Whether to render the row actions column. */
+        this.showActionRow = input(true, ...(ngDevMode ? [{ debugName: "showActionRow" }] : /* istanbul ignore next */ []));
+        /** Custom cell/header templates keyed by column field. */
+        this.customTemplates = input({}, ...(ngDevMode ? [{ debugName: "customTemplates" }] : /* istanbul ignore next */ []));
+        /** Actions rendered in the table header. */
+        this.headerActions = input([], ...(ngDevMode ? [{ debugName: "headerActions" }] : /* istanbul ignore next */ []));
+        /** Actions rendered per row (icon, label, class, visibility/disabled). */
+        this.rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+        /** Whether the table container renders a drop shadow. */
+        this.hasShadow = input(true, ...(ngDevMode ? [{ debugName: "hasShadow" }] : /* istanbul ignore next */ []));
+        /** Field used as the default initial sort. */
+        this.defaultSortField = input('', ...(ngDevMode ? [{ debugName: "defaultSortField" }] : /* istanbul ignore next */ []));
+        /** Order used by the default initial sort (1 asc, -1 desc). */
+        this.defaultSortOrder = input(1, ...(ngDevMode ? [{ debugName: "defaultSortOrder" }] : /* istanbul ignore next */ []));
+        /** Whether the global search input is shown. */
+        this.showSearch = input(true, ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+        /** Placeholder for the global search input. */
+        this.searchPlaceholder = input('', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        /** Message shown when there are no rows. */
+        this.emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Enables server-side pagination/filtering/sorting mode. */
+        this.serverSide = input(false, ...(ngDevMode ? [{ debugName: "serverSide" }] : /* istanbul ignore next */ []));
+        /** Total number of records in server-side mode (for pagination math). */
+        this.totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+        /** Optional prebuilt filter chips (label + value) shown above the table. */
+        this.filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+        /** Currently active filter chip value. */
+        this.activeFilter = input('', ...(ngDevMode ? [{ debugName: "activeFilter" }] : /* 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. */
+        this.pageChange = output();
+        /** Emits the active column filters. */
+        this.filterChange = output();
+        /** Emits the debounced global search term. */
+        this.searchChange = output();
+        /** Emits when a filter chip is clicked. */
+        this.filterClick = output();
+        /** Internal copy of the input data used as the base for search/filter. */
+        this.originalData = signal([], ...(ngDevMode ? [{ debugName: "originalData" }] : /* istanbul ignore next */ []));
+        /** Rows after the global search is applied. */
+        this.searchedData = signal([], ...(ngDevMode ? [{ debugName: "searchedData" }] : /* istanbul ignore next */ []));
+        /** Rows after column filters are applied. */
+        this.filteredData = signal([], ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+        /** Rows belonging to the current page (after slicing). */
+        this.displayedData = signal([], ...(ngDevMode ? [{ debugName: "displayedData" }] : /* istanbul ignore next */ []));
+        /** Local total records after filtering (client mode). */
+        this.localTotalRecords = signal(0, ...(ngDevMode ? [{ debugName: "localTotalRecords" }] : /* istanbul ignore next */ []));
+        /** Index of the first row of the current page. */
+        this.first = signal(0, ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
+        /** Visibility map for each column filter input. */
+        this.showFilterInput = signal({}, ...(ngDevMode ? [{ debugName: "showFilterInput" }] : /* istanbul ignore next */ []));
+        /** Current global search term. */
+        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+        /** Currently sorted field. */
+        this.sortField = signal('', ...(ngDevMode ? [{ debugName: "sortField" }] : /* istanbul ignore next */ []));
+        /** Current sort direction (1 asc, -1 desc). */
+        this.sortOrder = signal(1, ...(ngDevMode ? [{ debugName: "sortOrder" }] : /* istanbul ignore next */ []));
+        /** Local rows per page, kept in sync with the `rowsPerPage` input. */
+        this.rowsPerPageLocal = linkedSignal(() => this.rowsPerPage(), ...(ngDevMode ? [{ debugName: "rowsPerPageLocal" }] : /* istanbul ignore next */ []));
+        /** Total number of pages based on the effective record count. */
+        this.totalPages = computed(() => Math.max(1, Math.ceil(this.effectiveTotalRecords() / this.rowsPerPageLocal())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+        /** Current page number (1-based). */
+        this.currentPage = computed(() => Math.floor(this.first() / this.rowsPerPageLocal()) + 1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+        /** Subjects used to debounce column filters (server mode) and search. */
+        this.filterSubject = new Subject();
+        this.searchSubject = new Subject();
+        /**
+         * Signature of the last built set of filterable fields (+filter type) to
+         * avoid rebuilding the form (and losing user input) on reference changes.
+         */
+        this.lastFilterFieldsSignature = '';
+        this.columnFilterSubscriptions = [];
+        /** Columns array with the leading `actions` column when row actions exist. */
+        this.columnsWithActions = computed(() => {
+            const columnsArray = this.columns();
+            const showAction = this.showActionRow();
+            const rowActionsArray = this.rowActions();
+            const translatedHeader = this.actionsHeaderLabel();
+            if (showAction && rowActionsArray.length > 0) {
+                const actionsWidth = rowActionsArray.length <= 2 ? '110px' : rowActionsArray.length <= 3 ? '130px' : '170px';
+                return [
+                    {
+                        field: 'actions',
+                        header: translatedHeader || 'Acciones',
+                        width: actionsWidth,
+                        defaultSort: true,
+                    },
+                    ...columnsArray,
+                ];
+            }
+            return [...columnsArray];
+        }, ...(ngDevMode ? [{ debugName: "columnsWithActions" }] : /* istanbul ignore next */ []));
+        /** Total records: server-provided in server mode, locally computed otherwise. */
+        this.effectiveTotalRecords = computed(() => {
+            return this.serverSide() ? this.totalRecords() : this.localTotalRecords();
+        }, ...(ngDevMode ? [{ debugName: "effectiveTotalRecords" }] : /* istanbul ignore next */ []));
+        /**
+         * Rows rendered by the template: the input data in server-side mode or the
+         * locally sliced/page current rows otherwise.
+         */
+        this.effectiveDisplayedData = computed(() => {
+            return this.serverSide() ? this.data() : this.displayedData();
+        }, ...(ngDevMode ? [{ debugName: "effectiveDisplayedData" }] : /* istanbul ignore next */ []));
+        /**
+         * Reactive "X to Y of Z" report. Depends on loaded translations and the
+         * active language so it always reflects the translated template.
+         */
+        this.pageReport = computed(() => {
+            this.translations(); // forces recomputation when translations finish loading
+            this.currentLang(); // forces recomputation when the language changes
+            const total = this.effectiveTotalRecords();
+            if (total === 0) {
+                return this.transloco.translate('table.pageReport', {
+                    from: 0,
+                    to: 0,
+                    total: 0,
+                });
+            }
+            const from = this.first() + 1;
+            const to = Math.min(this.first() + this.rowsPerPageLocal(), total);
+            return this.transloco.translate('table.pageReport', { from, to, total });
+        }, ...(ngDevMode ? [{ debugName: "pageReport" }] : /* istanbul ignore next */ []));
+        this.columnFiltersForm = this.fb.group({});
+        // Debounced column-filter changes (server-side mode only).
+        this.filterSubject
+            .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (this.serverSide()) {
+                this.emitFilterChange();
+            }
+        });
+        // Debounced global search changes (server-side mode only).
+        this.searchSubject
+            .pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.searchChange.emit(value);
+        });
+        // When input data changes, refresh the internal copy and re-apply filters
+        // unless the server already handles the filtering.
+        effect(() => {
+            const newData = this.data();
+            untracked(() => {
+                this.originalData.set([...newData]);
+                if (!this.serverSide()) {
+                    this.applyFilters();
+                }
+            });
+        });
+        // Rebuild the column filter form whenever the columns change.
+        effect(() => {
+            const cols = this.columns();
+            untracked(() => {
+                this.setupColumnFilters(cols);
+            });
+        });
+        // Apply the default sort once when the default fields are provided.
+        effect(() => {
+            const field = this.defaultSortField();
+            const order = this.defaultSortOrder();
+            if (field) {
+                untracked(() => {
+                    this.sortField.set(field);
+                    this.sortOrder.set(order);
+                    if (!this.serverSide()) {
+                        this.applySort();
+                        this.updateDisplayedData();
+                    }
+                });
+            }
+        });
+        // Apply the global search locally whenever the term changes.
+        effect(() => {
+            const query = this.searchQuery();
+            untracked(() => {
+                if (!this.serverSide()) {
+                    this.applySearch();
+                }
+            });
+        });
+    }
+    /**
+     * Builds (or keeps) the reactive form with one control per filterable
+     * column. The form is only rebuilt when the set of filterable
+     * fields/filter types changes, preserving the values already typed by the
+     * user otherwise. Previous subscriptions are unsubscribed to avoid leaks.
+     */
+    setupColumnFilters(cols) {
+        const filterableCols = cols.filter((c) => c.filter);
+        const signature = filterableCols.map((c) => `${c.field}:${c.filterType ?? 'text'}`).join('|');
+        if (signature === this.lastFilterFieldsSignature && this.columnFiltersForm) {
+            return;
+        }
+        this.lastFilterFieldsSignature = signature;
+        // Clean up previous subscriptions before rebuilding.
+        this.columnFilterSubscriptions.forEach((sub) => sub.unsubscribe());
+        this.columnFilterSubscriptions = [];
+        const previousValues = {};
+        if (this.columnFiltersForm) {
+            Object.keys(this.columnFiltersForm.controls).forEach((field) => {
+                previousValues[field] = this.columnFiltersForm.get(field)?.value;
+            });
+        }
+        const filterControls = {};
+        const filterVisibility = { ...this.showFilterInput() };
+        filterableCols.forEach((col) => {
+            const defaultValue = col.filterType === 'select' ? null : '';
+            const preserved = previousValues.hasOwnProperty(col.field)
+                ? previousValues[col.field]
+                : defaultValue;
+            filterControls[col.field] = [preserved];
+            if (!(col.field in filterVisibility)) {
+                filterVisibility[col.field] = false;
+            }
+        });
+        this.columnFiltersForm = this.fb.group(filterControls);
+        this.showFilterInput.set(filterVisibility);
+        Object.keys(this.columnFiltersForm.controls).forEach((field) => {
+            const sub = this.columnFiltersForm
+                .get(field)
+                ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => {
+                this.first.set(0);
+                if (this.serverSide()) {
+                    this.filterSubject.next();
+                }
+                else {
+                    this.applyFilters();
+                }
+                this.cdr.markForCheck();
+            });
+            if (sub) {
+                this.columnFilterSubscriptions.push(sub);
+            }
+        });
+    }
+    /** Collects the non-empty column filter values and emits them. */
+    emitFilterChange() {
+        const filters = {};
+        Object.keys(this.columnFiltersForm.controls).forEach((field) => {
+            const value = this.columnFiltersForm.get(field)?.value;
+            if (value !== null && value !== undefined && value !== '') {
+                filters[field] = value;
+            }
+        });
+        this.filterChange.emit({ filters });
+    }
+    /** Applies the global search over the original data (client mode). */
+    applySearch() {
+        const original = this.originalData();
+        const query = this.searchQuery().toLowerCase();
+        if (!query) {
+            this.searchedData.set([...original]);
+        }
+        else {
+            const filtered = original.filter((item) => {
+                return Object.values(item).some((val) => {
+                    if (val === null || val === undefined)
+                        return false;
+                    return String(val).toLowerCase().includes(query);
+                });
+            });
+            this.searchedData.set(filtered);
+        }
+        this.applyColumnFilters();
+    }
+    /** Entry point that applies search (which cascades into column filters). */
+    applyFilters() {
+        this.applySearch();
+    }
+    /**
+     * Applies every column filter on top of the searched data using each
+     * column's `filterType` ('select', 'exact' or text contains).
+     */
+    applyColumnFilters() {
+        const data = this.searchedData();
+        let filtered = [...data];
+        this.columns().forEach((col) => {
+            if (col.filter) {
+                const filterValue = this.columnFiltersForm.get(col.field)?.value;
+                if (filterValue !== null && filterValue !== undefined && filterValue !== '') {
+                    if (col.filterType === 'select') {
+                        filtered = filtered.filter((item) => item[col.field] == filterValue);
+                    }
+                    else if (col.filterType === 'exact') {
+                        const searchTerm = String(filterValue).toLowerCase();
+                        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));
+                    }
+                }
+            }
+        });
+        this.filteredData.set(filtered);
+        this.localTotalRecords.set(filtered.length);
+        this.applySort();
+        this.updateDisplayedData();
+    }
+    /** Slices the filtered rows for the current page. */
+    updateDisplayedData() {
+        const filtered = this.filteredData();
+        const firstIndex = this.first();
+        const rows = this.rowsPerPageLocal();
+        const displayed = filtered.slice(firstIndex, firstIndex + rows);
+        this.displayedData.set(displayed);
+    }
+    /** Emits the filter chip clicked in the template. */
+    onFilterClick(value) {
+        this.filterClick.emit(value);
+    }
+    /** Toggles the sort direction of a column (first click sorts ascending). */
+    toggleSort(field) {
+        if (this.sortField() === field) {
+            this.sortOrder.set(this.sortOrder() * -1);
+        }
+        else {
+            this.sortField.set(field);
+            this.sortOrder.set(1);
+        }
+        this.first.set(0);
+        if (!this.serverSide()) {
+            this.applySort();
+            this.updateDisplayedData();
+        }
+    }
+    /**
+     * Sorts the filtered rows by the current field. Rows with null/undefined
+     * values are always kept at the end regardless of sort direction.
+     */
+    applySort() {
+        const field = this.sortField();
+        const order = this.sortOrder();
+        if (!field)
+            return;
+        const data = [...this.filteredData()];
+        data.sort((a, b) => {
+            const va = a[field];
+            const vb = b[field];
+            if (va == null && vb == null)
+                return 0;
+            if (va == null)
+                return 1; // nulls always at the end
+            if (vb == null)
+                return -1;
+            if (va < vb)
+                return -1 * order;
+            if (va > vb)
+                return 1 * order;
+            return 0;
+        });
+        this.filteredData.set(data);
+    }
+    /** Handles the global search input (updates query, resets page, debounces server mode). */
+    onSearchInput(value) {
+        this.searchQuery.set(value);
+        this.first.set(0);
+        if (this.serverSide()) {
+            this.searchSubject.next(value);
+        }
+    }
+    /** Clears a column filter value and hides its input. */
+    clearFilter(field) {
+        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.cdr.markForCheck();
+    }
+    /** Toggles the visibility of a column filter input. */
+    toggleFilter(field) {
+        const visibility = this.showFilterInput();
+        this.showFilterInput.set({ ...visibility, [field]: !visibility[field] });
+        this.cdr.markForCheck();
+    }
+    /**
+     * Whether a column filter is non-empty. Avoids treating the number 0 as
+     * "no value".
+     */
+    hasFilterValue(field) {
+        const value = this.columnFiltersForm.get(field)?.value;
+        return value !== null && value !== undefined && value !== '';
+    }
+    /** Returns the reactive page report string (template helper). */
+    getPageReport() {
+        return this.pageReport();
+    }
+    /** Goes to the first page (emits pageChange in server-side mode). */
+    goToFirst() {
+        const rows = this.rowsPerPageLocal();
+        this.first.set(0);
+        if (this.serverSide()) {
+            this.pageChange.emit({
+                first: 0,
+                rows,
+                page: 0,
+                pageCount: Math.ceil(this.totalRecords() / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    /** Goes to the last page (emits pageChange in server-side mode). */
+    goToLast() {
+        const total = this.serverSide() ? this.totalRecords() : this.filteredData().length;
+        const rows = this.rowsPerPageLocal();
+        const lastFirst = Math.max(0, Math.ceil(total / rows) * rows - rows);
+        this.first.set(lastFirst);
+        if (this.serverSide()) {
+            const page = Math.floor(lastFirst / rows);
+            this.pageChange.emit({
+                first: lastFirst,
+                rows,
+                page,
+                pageCount: Math.ceil(total / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    /** Updates rows-per-page and resets to the first page. */
+    onRowsPerPageChange(rows) {
+        rows = Number(rows);
+        this.rowsPerPageLocal.set(rows);
+        this.first.set(0);
+        if (this.serverSide()) {
+            this.pageChange.emit({
+                first: 0,
+                rows,
+                page: 0,
+                pageCount: Math.ceil(this.totalRecords() / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    /** Emits the refresh output. */
+    refreshData() {
+        this.refresh.emit();
+    }
+    /** Whether the current page is the first one. */
+    isFirstPage() {
+        return this.first() === 0;
+    }
+    /** Whether the current page is the last one. */
+    isLastPage() {
+        const total = this.effectiveTotalRecords();
+        return this.first() + this.rowsPerPageLocal() >= total;
+    }
+    /** Moves to the next page (emits pageChange in server-side mode). */
+    next() {
+        const total = this.serverSide() ? this.totalRecords() : this.filteredData().length;
+        const rows = this.rowsPerPageLocal();
+        let first = this.first() + rows;
+        if (first >= total) {
+            first = total - rows;
+        }
+        this.first.set(first);
+        if (this.serverSide()) {
+            const page = Math.floor(first / rows);
+            this.pageChange.emit({
+                first,
+                rows,
+                page,
+                pageCount: Math.ceil(total / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    /** Moves to the previous page (emits pageChange in server mode). */
+    prev() {
+        const rows = this.rowsPerPageLocal();
+        let first = this.first() - rows;
+        const total = this.serverSide() ? this.totalRecords() : this.filteredData().length;
+        if (first < 0) {
+            first = 0;
+        }
+        this.first.set(first);
+        if (this.serverSide()) {
+            const page = Math.floor(first / rows);
+            this.pageChange.emit({
+                first,
+                rows,
+                page,
+                pageCount: Math.ceil(total / rows),
+            });
+        }
+        else {
+            this.updateDisplayedData();
+        }
+    }
+    /** Resets the table to the first page. */
+    reset() {
+        this.goToFirst();
+    }
+    /** Resolves the row action label, static or per-row function. */
+    getRowActionLabel(action, rowData) {
+        return typeof action.label === 'function' ? action.label(rowData) : action.label;
+    }
+    /**
+     * Resolves the row action icon: a lucide component, a function returning
+     * the icon name, or a raw string resolved by the central icon map.
+     */
+    getRowActionIconName(action, rowData) {
+        const icon = action.icon;
+        if (typeof icon === 'function') {
+            if (icon.prototype === undefined) {
+                return icon(rowData);
+            }
+            return icon;
+        }
+        return icon;
+    }
+    /** Resolves the CSS class of a row action, static or per-row function. */
+    getRowActionClass(action, rowData) {
+        if (!action.class)
+            return '';
+        return typeof action.class === 'function' ? action.class(rowData) : action.class;
+    }
+    /** Whether a header action is disabled. */
+    isHeaderActionDisabled(action) {
+        return action.isDisabled ? action.isDisabled() : false;
+    }
+    /** Whether a header action is visible. */
+    isHeaderActionVisible(action) {
+        return action.isVisible ? action.isVisible() : true;
+    }
+    /** Whether a row action is disabled for the given row. */
+    isRowActionDisabled(action, rowData) {
+        return action.isDisabled ? action.isDisabled(rowData) : false;
+    }
+    /** Whether a row action is visible for the given row. */
+    isRowActionVisible(action, rowData) {
+        return action.isVisible ? action.isVisible(rowData) : true;
+    }
+    /** Truncates a value with an ellipsis past the given character limit. */
+    truncate(value, limit = 30) {
+        if (value === null || value === undefined)
+            return '';
+        const str = String(value);
+        return str.length > limit ? str.slice(0, limit) + '\u2026' : str;
+    }
+    /** Resolves the value displayed inside a tag cell, static or per-row function. */
+    getTagValue(col, rowData) {
+        return col.tagValue ? col.tagValue(rowData) : String(rowData[col.field] ?? '');
+    }
+    /** Resolves and validates the tag severity, falling back to 'secondary'. */
+    getTagSeverity(col, rowData) {
+        const raw = col.tagSeverity ? col.tagSeverity(rowData) : 'secondary';
+        const allowed = [
+            'secondary',
+            'success',
+            'info',
+            'warning',
+            'danger',
+            'contrast',
+        ];
+        return allowed.includes(raw) ? raw : 'secondary';
+    }
+    /** Resolves whether the tag in a cell is rounded, static or per-row function. */
+    getTagRounded(col, rowData) {
+        if (typeof col.tagRounded === 'function')
+            return col.tagRounded(rowData);
+        return col.tagRounded ?? false;
+    }
+    /** Resolves the icon shown inside a tag cell, static or per-row function. */
+    getTagIcon(col, rowData) {
+        if (typeof col.tagIcon === 'function')
+            return col.tagIcon(rowData);
+        return col.tagIcon ?? '';
+    }
+    /** Resolves the CSS styles of a tag cell, static or per-row function. */
+    getTagStyle(col, rowData) {
+        return col.tagStyle ? col.tagStyle(rowData) || {} : {};
+    }
+    /**
+     * trackBy for row identity: prefers `id`/`_id` and falls back to the index.
+     */
+    trackByRow(row, index) {
+        return row?.id ?? row?._id ?? index;
+    }
+    /** Keyboard support (Enter/Space) for sorting a column header. */
+    onHeaderKeydown(event, col) {
+        if (col.field === 'actions' || !col.sortable)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleSort(col.field);
+        }
+    }
+    /** Accessible aria-sort value for a given column header. */
+    getAriaSort(col) {
+        if (col.field === 'actions' || !col.sortable)
+            return 'none';
+        if (this.sortField() !== col.field)
+            return 'none';
+        return this.sortOrder() === 1 ? 'ascending' : 'descending';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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" }, 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\" [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=\"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=\"mt-2\"\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=\"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)] whitespace-nowrap\"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'hidden'\"\n                    [style.text-overflow]=\"col.field === 'actions' ? 'clip' : 'ellipsis'\"\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 rowActions(); 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                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ truncate(rowData[field], 30) }}\n      </ng-template>\n    </div>\n    <div\n      class=\"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,table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}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-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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslocoModule,
+                        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\" [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=\"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=\"mt-2\"\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=\"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)] whitespace-nowrap\"\n                    [style.overflow]=\"col.field === 'actions' ? 'visible' : 'hidden'\"\n                    [style.text-overflow]=\"col.field === 'actions' ? 'clip' : 'ellipsis'\"\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 rowActions(); 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                      </div>\n                    }\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        }\n      </table>\n      <ng-template #defaultTemplate let-rowData let-field=\"field\">\n        {{ truncate(rowData[field], 30) }}\n      </ng-template>\n    </div>\n    <div\n      class=\"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,table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}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-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"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TableComponent };
+//# sourceMappingURL=shirkasoft-ui-components-table.mjs.map