@lesterarte/sefin-ui 0.0.20-dev.13 → 0.0.20-dev.15

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -5382,6 +5382,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Molecules index
  */
 
+/**
+ * SVG icon paths for sort indicators
+ */
+const SORT_ICONS = {
+    unsorted: 'M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5',
+    ascending: 'M3 7.5L6 4.5L9 7.5',
+    descending: 'M3 4.5L6 7.5L9 4.5',
+};
 /**
  * Helper function to build displayed columns array including selection and actions
  */
@@ -5451,6 +5459,7 @@ class TableComponent {
     currentPageSize = signal(this.pageSize, ...(ngDevMode ? [{ debugName: "currentPageSize" }] : []));
     // Computed sorted and paginated data
     sortedData = computed(() => {
+        // Early returns for performance
         if (!this.sort || !this.currentSortColumn() || this.serverSide) {
             return this.data;
         }
@@ -5462,22 +5471,43 @@ class TableComponent {
         if (!direction) {
             return this.data;
         }
+        // Early return if no data to sort
+        if (!this.data || this.data.length === 0) {
+            return this.data;
+        }
+        // Create a copy to avoid mutating original data
         const sorted = [...this.data].sort((a, b) => {
             const aValue = this.getCellValue(a, column);
             const bValue = this.getCellValue(b, column);
+            // Handle null/undefined values - place them at the end
+            if (aValue === null || aValue === undefined) {
+                return 1;
+            }
+            if (bValue === null || bValue === undefined) {
+                return -1;
+            }
             let comparison = 0;
             if (column.type === 'number') {
-                comparison = (aValue || 0) - (bValue || 0);
+                const aNum = typeof aValue === 'number' ? aValue : Number(aValue);
+                const bNum = typeof bValue === 'number' ? bValue : Number(bValue);
+                comparison = (isNaN(aNum) ? 0 : aNum) - (isNaN(bNum) ? 0 : bNum);
             }
             else if (column.type === 'date') {
                 const aDate = this.parseDate(aValue);
                 const bDate = this.parseDate(bValue);
-                comparison = aDate.getTime() - bDate.getTime();
+                // Handle invalid dates
+                const aTime = isNaN(aDate.getTime()) ? 0 : aDate.getTime();
+                const bTime = isNaN(bDate.getTime()) ? 0 : bDate.getTime();
+                comparison = aTime - bTime;
             }
             else {
-                const aStr = String(aValue || '').toLowerCase();
-                const bStr = String(bValue || '').toLowerCase();
-                comparison = aStr.localeCompare(bStr);
+                // Use locale-aware string comparison for better internationalization
+                const aStr = String(aValue || '').trim();
+                const bStr = String(bValue || '').trim();
+                comparison = aStr.localeCompare(bStr, undefined, {
+                    sensitivity: 'base',
+                    numeric: true,
+                });
             }
             return direction === 'asc' ? comparison : -comparison;
         });
@@ -5492,6 +5522,7 @@ class TableComponent {
         return this.sortedData().slice(startIndex, endIndex);
     }, ...(ngDevMode ? [{ debugName: "paginatedData" }] : []));
     displayedData = computed(() => {
+        // Directly return paginated data (no need for intermediate computation)
         return this.paginatedData();
     }, ...(ngDevMode ? [{ debugName: "displayedData" }] : []));
     totalPages = computed(() => {
@@ -5516,76 +5547,180 @@ class TableComponent {
             return false;
         }
         const currentPageData = this.displayedData();
+        if (currentPageData.length === 0) {
+            return false;
+        }
         const currentPageIds = new Set(currentPageData.map((row) => this.getItemId(row)));
-        const selectedInPage = this.selectedItems().filter((item) => currentPageIds.has(this.getItemId(item)));
-        return (currentPageData.length > 0 &&
-            selectedInPage.length === currentPageData.length);
+        const selectedItems = this.selectedItems();
+        const selectedInPage = selectedItems.filter((item) => currentPageIds.has(this.getItemId(item)));
+        return selectedInPage.length === currentPageData.length;
     }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
     isIndeterminate = computed(() => {
         if (!this.selectable || this.selectionMode === 'single') {
             return false;
         }
         const currentPageData = this.displayedData();
+        if (currentPageData.length === 0) {
+            return false;
+        }
         const currentPageIds = new Set(currentPageData.map((row) => this.getItemId(row)));
-        const selectedInPage = this.selectedItems().filter((item) => currentPageIds.has(this.getItemId(item)));
+        const selectedItems = this.selectedItems();
+        const selectedInPage = selectedItems.filter((item) => currentPageIds.has(this.getItemId(item)));
         return (selectedInPage.length > 0 &&
             selectedInPage.length < currentPageData.length);
     }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
+    // Expose sort icons to template
+    sortIcons = SORT_ICONS;
     constructor(cdr) {
         this.cdr = cdr;
     }
     ngOnInit() {
         this.currentPageSize.set(this.pageSize);
+        this.validateInputs();
     }
     ngOnChanges(changes) {
         if (changes['pageSize']) {
-            this.currentPageSize.set(this.pageSize);
+            const newPageSize = changes['pageSize'].currentValue;
+            if (newPageSize && newPageSize > 0) {
+                this.currentPageSize.set(newPageSize);
+            }
         }
         if (changes['data'] && this.serverSide) {
             this.cdr.markForCheck();
         }
+        if (changes['columns'] || changes['data']) {
+            this.validateInputs();
+        }
+    }
+    /**
+     * Validates component inputs and logs warnings for invalid configurations
+     * @private
+     */
+    validateInputs() {
+        if (this.columns && this.columns.length > 0) {
+            // Check for duplicate column keys
+            const keys = this.columns.map((col) => col.key);
+            const duplicates = keys.filter((key, index) => keys.indexOf(key) !== index);
+            if (duplicates.length > 0) {
+                console.warn(`[sefin-table] Duplicate column keys detected: ${duplicates.join(', ')}`);
+            }
+            // Check for columns with sortable=true but sort=false
+            const sortableColumns = this.columns.filter((col) => col.sortable);
+            if (sortableColumns.length > 0 && !this.sort) {
+                console.warn(`[sefin-table] Columns with sortable=true found but sort input is false. Sorting will be disabled.`);
+            }
+        }
+        if (this.selectable && this.selectionMode === 'multiple' && !this.trackByKey) {
+            console.warn(`[sefin-table] selectable is true but trackByKey is not set. Row selection may not work correctly.`);
+        }
+        if (this.pagination && this.pageSize <= 0) {
+            console.warn(`[sefin-table] pagination is enabled but pageSize is ${this.pageSize}. Using default value of 10.`);
+        }
     }
     trackByFn(index, item) {
         return item[this.trackByKey] !== undefined ? item[this.trackByKey] : index;
     }
+    /**
+     * Gets the cell value from a row, supporting nested property paths (e.g., 'user.name')
+     * @param row - The row data object
+     * @param column - The column definition
+     * @returns The cell value or undefined if not found
+     */
     getCellValue(row, column) {
-        return row[column.key];
+        if (!row || !column?.key) {
+            return undefined;
+        }
+        // Support nested property paths (e.g., 'user.name' or 'address.street')
+        const keys = column.key.split('.');
+        let value = row;
+        for (const key of keys) {
+            if (value === null || value === undefined) {
+                return undefined;
+            }
+            value = value[key];
+        }
+        return value;
     }
-    formatCellValue(value, type) {
+    /**
+     * Formats a cell value based on its type
+     * @param value - The value to format
+     * @param type - The column type
+     * @param column - Optional column definition for additional formatting options
+     * @returns Formatted string representation
+     */
+    formatCellValue(value, type, column) {
         if (value === null || value === undefined) {
             return '';
         }
         if (type === 'number') {
-            return typeof value === 'number' ? value.toLocaleString() : String(value);
+            if (typeof value === 'number') {
+                // Use locale-aware number formatting
+                return value.toLocaleString(undefined, {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 2,
+                });
+            }
+            // Try to parse string numbers
+            const numValue = Number(value);
+            return !isNaN(numValue) ? numValue.toLocaleString() : String(value);
         }
         if (type === 'date') {
-            if (value instanceof Date) {
-                return value.toLocaleDateString();
-            }
-            if (typeof value === 'string') {
-                const date = this.parseDate(value);
-                if (!isNaN(date.getTime())) {
-                    return date.toLocaleDateString();
-                }
+            const date = this.parseDate(value);
+            if (!isNaN(date.getTime())) {
+                // Use locale-aware date formatting
+                return date.toLocaleDateString(undefined, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                });
             }
+            // If date parsing fails, return original value as string
+            return String(value);
         }
         return String(value);
     }
+    /**
+     * Parses a value into a Date object
+     * @param value - The value to parse (Date, string, or number timestamp)
+     * @returns A Date object
+     */
     parseDate(value) {
         if (value instanceof Date) {
             return value;
         }
         if (typeof value === 'string') {
+            const date = new Date(value);
+            // Check if it's a valid date
+            if (!isNaN(date.getTime())) {
+                return date;
+            }
+        }
+        if (typeof value === 'number') {
+            // Assume it's a timestamp
             return new Date(value);
         }
-        return new Date();
+        // Return invalid date as fallback
+        return new Date(NaN);
     }
     onRowClick(row) {
         if (!this.loading) {
             this.rowClicked.emit(row);
         }
     }
-    onSort(column) {
+    /**
+     * Handles column sorting when header is clicked
+     * @param column - The column to sort by
+     * @param event - Optional keyboard event for accessibility
+     */
+    onSort(column, event) {
+        // Handle keyboard events (Enter or Space)
+        if (event && event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         if (!this.sort || !column.sortable || this.loading) {
             return;
         }
@@ -5630,57 +5765,91 @@ class TableComponent {
     isSelected(row) {
         return this.selectedItems().some((item) => this.getItemId(item) === this.getItemId(row));
     }
+    /**
+     * Toggles the selection state of a row
+     * @param checked - Whether the row should be selected
+     * @param row - The row to toggle selection for
+     */
     toggleRowSelection(checked, row) {
         if (row === undefined) {
             return;
         }
         if (this.selectionMode === 'single') {
-            if (checked) {
-                this.selectedItems.set([row]);
-            }
-            else {
-                this.selectedItems.set([]);
-            }
+            // Single selection mode: replace selection
+            this.selectedItems.set(checked ? [row] : []);
         }
         else {
+            // Multiple selection mode: add/remove from selection
             const current = this.selectedItems();
             const itemId = this.getItemId(row);
             if (checked) {
-                const index = current.findIndex((item) => this.getItemId(item) === itemId);
-                if (index < 0) {
+                // Only add if not already selected
+                const isAlreadySelected = current.some((item) => this.getItemId(item) === itemId);
+                if (!isAlreadySelected) {
                     this.selectedItems.set([...current, row]);
                 }
             }
             else {
+                // Remove from selection
                 const updated = current.filter((item) => this.getItemId(item) !== itemId);
                 this.selectedItems.set(updated);
             }
         }
+        // Emit the updated selection
         this.selectionChanged.emit([...this.selectedItems()]);
         this.cdr.markForCheck();
     }
+    /**
+     * Toggles selection for all rows on the current page
+     * @param checked - Whether all rows should be selected
+     */
     toggleSelectAll(checked) {
         if (this.selectionMode === 'single') {
             return;
         }
         const currentPageData = this.displayedData();
+        if (currentPageData.length === 0) {
+            return;
+        }
+        const selectedItems = this.selectedItems();
+        const selectedIds = new Set(selectedItems.map((item) => this.getItemId(item)));
         if (checked) {
-            const currentIds = new Set(this.selectedItems().map((item) => this.getItemId(item)));
-            const newItems = currentPageData.filter((row) => !currentIds.has(this.getItemId(row)));
-            this.selectedItems.set([...this.selectedItems(), ...newItems]);
+            // Add all page items that aren't already selected
+            const newItems = currentPageData.filter((row) => !selectedIds.has(this.getItemId(row)));
+            if (newItems.length > 0) {
+                this.selectedItems.set([...selectedItems, ...newItems]);
+            }
         }
         else {
+            // Remove all page items from selection
             const currentPageIds = new Set(currentPageData.map((row) => this.getItemId(row)));
-            const updated = this.selectedItems().filter((item) => !currentPageIds.has(this.getItemId(item)));
+            const updated = selectedItems.filter((item) => !currentPageIds.has(this.getItemId(item)));
             this.selectedItems.set(updated);
         }
         this.selectionChanged.emit([...this.selectedItems()]);
         this.cdr.markForCheck();
     }
+    /**
+     * Gets the unique identifier for an item using the trackByKey
+     * @param item - The item to get the ID for
+     * @returns The item's ID or the item itself if no ID property exists
+     * @private
+     */
     getItemId(item) {
+        if (!item) {
+            return item;
+        }
         return item[this.trackByKey] !== undefined ? item[this.trackByKey] : item;
     }
+    /**
+     * Gets CSS classes for a column cell
+     * @param column - The column definition
+     * @returns Space-separated string of CSS classes
+     */
     getColumnClass(column) {
+        if (!column) {
+            return '';
+        }
         const classes = [];
         if (column.align) {
             classes.push(`sefin-table__cell--align-${column.align}`);
@@ -5693,6 +5862,10 @@ class TableComponent {
         }
         return classes.join(' ');
     }
+    /**
+     * Gets CSS classes for the table element
+     * @returns Space-separated string of CSS classes
+     */
     getTableClasses() {
         const classes = ['sefin-table'];
         if (this.density === 'compact') {
@@ -5709,9 +5882,113 @@ class TableComponent {
         }
         return classes.join(' ');
     }
+    /**
+     * Gets the width CSS value for a column
+     * @param column - The column definition
+     * @returns The width value or undefined
+     */
     getColumnWidth(column) {
-        return column.width;
+        return column?.width;
     }
+    /**
+     * Gets the appropriate sort icon path for a column
+     * @param column - The column to get the icon for
+     * @returns The SVG path string for the sort icon
+     */
+    getSortIconPath(column) {
+        if (!column.sortable || !this.sort) {
+            return '';
+        }
+        const currentColumn = this.currentSortColumn();
+        const currentDirection = this.currentSortDirection();
+        if (currentColumn === column.key) {
+            if (currentDirection === 'asc') {
+                return SORT_ICONS.ascending;
+            }
+            else if (currentDirection === 'desc') {
+                return SORT_ICONS.descending;
+            }
+        }
+        return SORT_ICONS.unsorted;
+    }
+    /**
+     * Determines if a column should show the unsorted icon
+     * @param column - The column to check
+     * @returns True if unsorted icon should be shown
+     */
+    showUnsortedIcon(column) {
+        if (!column.sortable || !this.sort) {
+            return false;
+        }
+        const currentColumn = this.currentSortColumn();
+        const currentDirection = this.currentSortDirection();
+        return currentColumn !== column.key || currentDirection === '';
+    }
+    /**
+     * Determines if a column should show the ascending icon
+     * @param column - The column to check
+     * @returns True if ascending icon should be shown
+     */
+    showAscendingIcon(column) {
+        if (!column.sortable || !this.sort) {
+            return false;
+        }
+        return (this.currentSortColumn() === column.key &&
+            this.currentSortDirection() === 'asc');
+    }
+    /**
+     * Determines if a column should show the descending icon
+     * @param column - The column to check
+     * @returns True if descending icon should be shown
+     */
+    showDescendingIcon(column) {
+        if (!column.sortable || !this.sort) {
+            return false;
+        }
+        return (this.currentSortColumn() === column.key &&
+            this.currentSortDirection() === 'desc');
+    }
+    /**
+     * Gets the ARIA sort state for a column
+     * @param column - The column to get the sort state for
+     * @returns The ARIA sort value ('ascending', 'descending', or 'none')
+     */
+    getAriaSort(column) {
+        if (!column.sortable || !this.sort) {
+            return 'none';
+        }
+        if (this.currentSortColumn() === column.key) {
+            const direction = this.currentSortDirection();
+            return direction === 'asc' ? 'ascending' : direction === 'desc' ? 'descending' : 'none';
+        }
+        return 'none';
+    }
+    /**
+     * Gets the ARIA label for a sortable column header
+     * @param column - The column to get the label for
+     * @returns The ARIA label string or null if not sortable
+     */
+    getSortAriaLabel(column) {
+        if (!column.sortable || !this.sort) {
+            return null;
+        }
+        let currentState = 'not sorted';
+        if (this.currentSortColumn() === column.key) {
+            const direction = this.currentSortDirection();
+            if (direction === 'asc') {
+                currentState = 'ascending';
+            }
+            else if (direction === 'desc') {
+                currentState = 'descending';
+            }
+        }
+        return `Sort by ${column.header}. Currently ${currentState}`;
+    }
+    /**
+     * Generates page numbers array for pagination display
+     * This method is currently not used in the template but kept for potential future use
+     * @returns Array of page numbers and ellipsis strings
+     */
     getPageNumbers() {
         const current = this.currentPage();
         const total = this.totalPages();
@@ -5748,14 +6025,12 @@ class TableComponent {
         }
         return pages;
     }
-    // Expose Math to template
-    Math = Math;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", loading: "loading", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sefin-table__container\">\n  <!-- Header Actions Slot -->\n  <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n    <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n  </div>\n\n  <!-- Loading Overlay -->\n  <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n    <div class=\"sefin-table__loading-bar\"></div>\n    <div class=\"sefin-table__loading-rows\">\n      <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n        <div\n          class=\"sefin-table__skeleton-cell\"\n          *ngFor=\"let col of columns\"\n        ></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Table -->\n  <div\n    class=\"sefin-table__wrapper\"\n    [class.sefin-table__wrapper--loading]=\"loading\"\n  >\n    <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n      <!-- Table Header -->\n      <thead\n        class=\"sefin-table__header\"\n        [class.sefin-table__header--sticky]=\"stickyHeader\"\n      >\n        <tr class=\"sefin-table__header-row\">\n          <!-- Selection Column Header -->\n          <th\n            *ngIf=\"selectable\"\n            class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n          >\n            <sefin-checkbox\n              *ngIf=\"selectionMode === 'multiple'\"\n              [value]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (checkedChange)=\"toggleSelectAll($event)\"\n              [attr.aria-label]=\"'Select all rows'\"\n              size=\"sm\"\n            ></sefin-checkbox>\n          </th>\n\n          <!-- Data Column Headers -->\n          <th\n            *ngFor=\"let column of columns\"\n            [class]=\"getColumnClass(column)\"\n            [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n            [class.sefin-table__header-cell--sorted]=\"\n              currentSortColumn() === column.key\n            \"\n            [class.sefin-table__header-cell--sort-asc]=\"\n              currentSortColumn() === column.key &&\n              currentSortDirection() === 'asc'\n            \"\n            [class.sefin-table__header-cell--sort-desc]=\"\n              currentSortColumn() === column.key &&\n              currentSortDirection() === 'desc'\n            \"\n            [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n            [class.sefin-table__header-cell--sticky-end]=\"\n              column.sticky && column.stickyEnd\n            \"\n            [style.width]=\"getColumnWidth(column)\"\n            class=\"sefin-table__header-cell\"\n            (click)=\"column.sortable && sort ? onSort(column) : null\"\n            [attr.aria-sort]=\"\n              currentSortColumn() === column.key\n                ? currentSortDirection() === 'asc'\n                  ? 'ascending'\n                  : currentSortDirection() === 'desc'\n                  ? 'descending'\n                  : 'none'\n                : null\n            \"\n            role=\"columnheader\"\n            [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n          >\n            <span class=\"sefin-table__header-content\">\n              {{ column.header }}\n              <span\n                *ngIf=\"column.sortable && sort\"\n                class=\"sefin-table__sort-icon\"\n              >\n                <svg\n                  *ngIf=\"\n                    currentSortColumn() !== column.key ||\n                    currentSortDirection() === ''\n                  \"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n                <svg\n                  *ngIf=\"\n                    currentSortColumn() === column.key &&\n                    currentSortDirection() === 'asc'\n                  \"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M3 7.5L6 4.5L9 7.5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n                <svg\n                  *ngIf=\"\n                    currentSortColumn() === column.key &&\n                    currentSortDirection() === 'desc'\n                  \"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M3 4.5L6 7.5L9 4.5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </span>\n          </th>\n\n          <th\n            *ngIf=\"hasActionsColumn()\"\n            class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n          ></th>\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"sefin-table__body\">\n        <!-- Data Rows -->\n        <tr\n          *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n          class=\"sefin-table__row sefin-table__row--clickable\"\n          (click)=\"onRowClick(row)\"\n        >\n          <!-- Selection Column Cell -->\n          <td\n            *ngIf=\"selectable\"\n            class=\"sefin-table__cell sefin-table__cell--select\"\n          >\n            <sefin-checkbox\n              [value]=\"isSelected(row)\"\n              (checkedChange)=\"toggleRowSelection($event, row)\"\n              [attr.aria-label]=\"'Select row'\"\n              size=\"sm\"\n            ></sefin-checkbox>\n          </td>\n\n          <!-- Data Column Cells -->\n          <td\n            *ngFor=\"let column of columns\"\n            [class]=\"getColumnClass(column)\"\n            [class.sefin-table__cell--sticky]=\"column.sticky\"\n            [class.sefin-table__cell--sticky-end]=\"\n              column.sticky && column.stickyEnd\n            \"\n            class=\"sefin-table__cell\"\n          >\n            <!-- Custom Template -->\n            <ng-container *ngIf=\"column.cellTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  column.cellTemplate;\n                  context: {\n                    $implicit: row,\n                    column: column,\n                    value: getCellValue(row, column)\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n\n            <!-- Badge Type -->\n            <ng-container\n              *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n            >\n              <sefin-badge\n                [value]=\"getCellValue(row, column)\"\n                variant=\"primary\"\n                size=\"sm\"\n              ></sefin-badge>\n            </ng-container>\n\n            <!-- Actions Type -->\n            <ng-container\n              *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n            >\n              <div class=\"sefin-table__actions\">\n                <ng-content select=\"[actions]\"></ng-content>\n              </div>\n            </ng-container>\n\n            <!-- Default/Text/Number/Date Type -->\n            <ng-container\n              *ngIf=\"\n                !column.cellTemplate &&\n                column.type !== 'badge' &&\n                column.type !== 'actions'\n              \"\n            >\n              <span class=\"sefin-table__cell-content\">\n                {{ formatCellValue(getCellValue(row, column), column.type) }}\n              </span>\n            </ng-container>\n          </td>\n\n          <!-- Actions Column Cell -->\n          <td\n            *ngIf=\"hasActionsColumn()\"\n            class=\"sefin-table__cell sefin-table__cell--actions\"\n          >\n            <div class=\"sefin-table__actions\">\n              <ng-content select=\"[actions]\"></ng-content>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Empty Row -->\n        <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n          <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n            <div class=\"sefin-table__empty-state\">\n              <ng-container *ngIf=\"emptyIconTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"emptyIconTemplate\"\n                ></ng-container>\n              </ng-container>\n              <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <sefin-pagination\n    *ngIf=\"pagination && !isEmpty()\"\n    [currentPage]=\"currentPage()\"\n    [totalPages]=\"totalPages()\"\n    [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n    [itemsPerPage]=\"currentPageSize()\"\n    (pageChange)=\"onPageChange($event)\"\n    class=\"sefin-table__paginator\"\n    size=\"sm\"\n  ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "sefin-pagination", inputs: ["currentPage", "totalPages", "totalItems", "itemsPerPage", "siblingCount", "showFirstLast", "showPrevNext", "size", "variant", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", loading: "loading", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sefin-table__container\">\n  <!-- Header Actions Slot -->\n  <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n    <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n  </div>\n\n  <!-- Loading Overlay -->\n  <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n    <div class=\"sefin-table__loading-bar\"></div>\n    <div class=\"sefin-table__loading-rows\">\n      <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n        <div\n          class=\"sefin-table__skeleton-cell\"\n          *ngFor=\"let col of columns\"\n        ></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Table -->\n  <div\n    class=\"sefin-table__wrapper\"\n    [class.sefin-table__wrapper--loading]=\"loading\"\n  >\n    <table\n      [class]=\"getTableClasses()\"\n      class=\"sefin-table__native-table\"\n      role=\"table\"\n      [attr.aria-label]=\"'Data table with ' + columns.length + ' columns'\"\n      [attr.aria-rowcount]=\"serverSide && total !== undefined ? total : sortedData().length\"\n      [attr.aria-colcount]=\"totalColspan()\"\n    >\n      <!-- Table Header -->\n      <thead\n        class=\"sefin-table__header\"\n        [class.sefin-table__header--sticky]=\"stickyHeader\"\n      >\n        <tr class=\"sefin-table__header-row\">\n          <!-- Selection Column Header -->\n          <th\n            *ngIf=\"selectable\"\n            class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n          >\n            <sefin-checkbox\n              *ngIf=\"selectionMode === 'multiple'\"\n              [value]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (checkedChange)=\"toggleSelectAll($event)\"\n              [attr.aria-label]=\"'Select all rows'\"\n              size=\"sm\"\n            ></sefin-checkbox>\n          </th>\n\n          <!-- Data Column Headers -->\n          <th\n            *ngFor=\"let column of columns\"\n            [class]=\"getColumnClass(column)\"\n            [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n            [class.sefin-table__header-cell--sorted]=\"\n              currentSortColumn() === column.key\n            \"\n            [class.sefin-table__header-cell--sort-asc]=\"\n              currentSortColumn() === column.key &&\n              currentSortDirection() === 'asc'\n            \"\n            [class.sefin-table__header-cell--sort-desc]=\"\n              currentSortColumn() === column.key &&\n              currentSortDirection() === 'desc'\n            \"\n            [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n            [class.sefin-table__header-cell--sticky-end]=\"\n              column.sticky && column.stickyEnd\n            \"\n            [style.width]=\"getColumnWidth(column)\"\n            class=\"sefin-table__header-cell\"\n            (click)=\"column.sortable && sort ? onSort(column) : null\"\n            (keydown)=\"column.sortable && sort ? onSort(column, $event) : null\"\n            [attr.aria-sort]=\"getAriaSort(column)\"\n            [attr.aria-label]=\"getSortAriaLabel(column)\"\n            role=\"columnheader\"\n            [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n          >\n            <span class=\"sefin-table__header-content\">\n              {{ column.header }}\n              <span\n                *ngIf=\"column.sortable && sort\"\n                class=\"sefin-table__sort-icon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <svg\n                  *ngIf=\"showUnsortedIcon(column)\"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                >\n                  <path\n                    [attr.d]=\"sortIcons.unsorted\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n                <svg\n                  *ngIf=\"showAscendingIcon(column)\"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                >\n                  <path\n                    [attr.d]=\"sortIcons.ascending\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n                <svg\n                  *ngIf=\"showDescendingIcon(column)\"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                >\n                  <path\n                    [attr.d]=\"sortIcons.descending\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </span>\n          </th>\n\n          <th\n            *ngIf=\"hasActionsColumn()\"\n            class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n          ></th>\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"sefin-table__body\" role=\"rowgroup\">\n        <!-- Data Rows -->\n        <tr\n          *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n          class=\"sefin-table__row sefin-table__row--clickable\"\n          (click)=\"onRowClick(row)\"\n          [attr.aria-selected]=\"selectable ? isSelected(row) : null\"\n          [attr.aria-label]=\"'Row ' + (trackByFn(0, row) || '')\"\n          role=\"row\"\n        >\n          <!-- Selection Column Cell -->\n          <td\n            *ngIf=\"selectable\"\n            class=\"sefin-table__cell sefin-table__cell--select\"\n          >\n            <sefin-checkbox\n              [value]=\"isSelected(row)\"\n              (checkedChange)=\"toggleRowSelection($event, row)\"\n              [attr.aria-label]=\"'Select row'\"\n              size=\"sm\"\n            ></sefin-checkbox>\n          </td>\n\n          <!-- Data Column Cells -->\n          <td\n            *ngFor=\"let column of columns\"\n            [class]=\"getColumnClass(column)\"\n            [class.sefin-table__cell--sticky]=\"column.sticky\"\n            [class.sefin-table__cell--sticky-end]=\"\n              column.sticky && column.stickyEnd\n            \"\n            class=\"sefin-table__cell\"\n          >\n            <!-- Custom Template -->\n            <ng-container *ngIf=\"column.cellTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  column.cellTemplate;\n                  context: {\n                    $implicit: row,\n                    column: column,\n                    value: getCellValue(row, column)\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n\n            <!-- Badge Type -->\n            <ng-container\n              *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n            >\n              <sefin-badge\n                [value]=\"getCellValue(row, column)\"\n                variant=\"primary\"\n                size=\"sm\"\n              ></sefin-badge>\n            </ng-container>\n\n            <!-- Actions Type -->\n            <ng-container\n              *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n            >\n              <div class=\"sefin-table__actions\">\n                <ng-content select=\"[actions]\"></ng-content>\n              </div>\n            </ng-container>\n\n            <!-- Default/Text/Number/Date Type -->\n            <ng-container\n              *ngIf=\"\n                !column.cellTemplate &&\n                column.type !== 'badge' &&\n                column.type !== 'actions'\n              \"\n            >\n              <span class=\"sefin-table__cell-content\">\n                {{ formatCellValue(getCellValue(row, column), column.type, column) }}\n              </span>\n            </ng-container>\n          </td>\n\n          <!-- Actions Column Cell -->\n          <td\n            *ngIf=\"hasActionsColumn()\"\n            class=\"sefin-table__cell sefin-table__cell--actions\"\n          >\n            <div class=\"sefin-table__actions\">\n              <ng-content select=\"[actions]\"></ng-content>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Empty Row -->\n        <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n          <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n            <div class=\"sefin-table__empty-state\">\n              <ng-container *ngIf=\"emptyIconTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"emptyIconTemplate\"\n                ></ng-container>\n              </ng-container>\n              <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <sefin-pagination\n    *ngIf=\"pagination && !isEmpty()\"\n    [currentPage]=\"currentPage()\"\n    [totalPages]=\"totalPages()\"\n    [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n    [itemsPerPage]=\"currentPageSize()\"\n    (pageChange)=\"onPageChange($event)\"\n    class=\"sefin-table__paginator\"\n    size=\"sm\"\n  ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-lg, 12px);overflow:hidden;box-shadow:0 2px 8px #0000000a,0 1px 2px #00000005;transition:box-shadow .3s ease-in-out,border-color .3s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:auto;min-width:100%}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table--density-compact .sefin-table__header-cell--select,.sefin-table--density-compact .sefin-table__cell--select{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table--density-compact .sefin-table__header-cell--actions,.sefin-table--density-compact .sefin-table__cell--actions{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table__header{background:linear-gradient(to bottom,#fff,#fafafa);border-bottom:1px solid rgba(0,0,0,.08);position:relative}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent 0%,rgba(0,0,0,.06) 50%,transparent 100%)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a}.sefin-table__header-row{background:transparent}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-text-secondary, #6b7280);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:transparent;-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d80f;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8);transform:scale(1.1)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81a}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background:linear-gradient(to bottom,#55c3d814,#55c3d80a)}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;min-width:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.5;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%;transition:transform .2s ease-out}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;transform:scale(1.1)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon svg{transform:scale(1.05)}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid rgba(0,0,0,.04);transition:background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease-out;background-color:var(--sefin-color-surface, #ffffff);position:relative}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80a;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d80f;transform:translateY(0);box-shadow:none}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80f}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px);z-index:1}.sefin-table__row:last-child{border-bottom:none}.sefin-table__row[data-animate]{animation:fadeInRow .3s ease-in-out}@keyframes fadeInRow{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #1f2937);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1}.sefin-table__cell-content{display:block;line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text, #1f2937);font-weight:var(--sefin-font-weight-normal, 400);word-wrap:break-word;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d80f!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 16px #00000014,0 2px 4px #0000000a}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-lg, 12px) var(--sefin-radius-lg, 12px);display:flex;justify-content:flex-end;align-items:center}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "sefin-pagination", inputs: ["currentPage", "totalPages", "totalItems", "itemsPerPage", "siblingCount", "showFirstLast", "showPrevNext", "size", "variant", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sefin-table', standalone: true, imports: [CommonModule, PaginationComponent, CheckboxComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sefin-table__container\">\n  <!-- Header Actions Slot -->\n  <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n    <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n  </div>\n\n  <!-- Loading Overlay -->\n  <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n    <div class=\"sefin-table__loading-bar\"></div>\n    <div class=\"sefin-table__loading-rows\">\n      <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n        <div\n          class=\"sefin-table__skeleton-cell\"\n          *ngFor=\"let col of columns\"\n        ></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Table -->\n  <div\n    class=\"sefin-table__wrapper\"\n    [class.sefin-table__wrapper--loading]=\"loading\"\n  >\n    <table [class]=\"getTableClasses()\" class=\"sefin-table__native-table\">\n      <!-- Table Header -->\n      <thead\n        class=\"sefin-table__header\"\n        [class.sefin-table__header--sticky]=\"stickyHeader\"\n      >\n        <tr class=\"sefin-table__header-row\">\n          <!-- Selection Column Header -->\n          <th\n            *ngIf=\"selectable\"\n            class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n          >\n            <sefin-checkbox\n              *ngIf=\"selectionMode === 'multiple'\"\n              [value]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (checkedChange)=\"toggleSelectAll($event)\"\n              [attr.aria-label]=\"'Select all rows'\"\n              size=\"sm\"\n            ></sefin-checkbox>\n          </th>\n\n          <!-- Data Column Headers -->\n          <th\n            *ngFor=\"let column of columns\"\n            [class]=\"getColumnClass(column)\"\n            [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n            [class.sefin-table__header-cell--sorted]=\"\n              currentSortColumn() === column.key\n            \"\n            [class.sefin-table__header-cell--sort-asc]=\"\n              currentSortColumn() === column.key &&\n              currentSortDirection() === 'asc'\n            \"\n            [class.sefin-table__header-cell--sort-desc]=\"\n              currentSortColumn() === column.key &&\n              currentSortDirection() === 'desc'\n            \"\n            [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n            [class.sefin-table__header-cell--sticky-end]=\"\n              column.sticky && column.stickyEnd\n            \"\n            [style.width]=\"getColumnWidth(column)\"\n            class=\"sefin-table__header-cell\"\n            (click)=\"column.sortable && sort ? onSort(column) : null\"\n            [attr.aria-sort]=\"\n              currentSortColumn() === column.key\n                ? currentSortDirection() === 'asc'\n                  ? 'ascending'\n                  : currentSortDirection() === 'desc'\n                  ? 'descending'\n                  : 'none'\n                : null\n            \"\n            role=\"columnheader\"\n            [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n          >\n            <span class=\"sefin-table__header-content\">\n              {{ column.header }}\n              <span\n                *ngIf=\"column.sortable && sort\"\n                class=\"sefin-table__sort-icon\"\n              >\n                <svg\n                  *ngIf=\"\n                    currentSortColumn() !== column.key ||\n                    currentSortDirection() === ''\n                  \"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n                <svg\n                  *ngIf=\"\n                    currentSortColumn() === column.key &&\n                    currentSortDirection() === 'asc'\n                  \"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M3 7.5L6 4.5L9 7.5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n                <svg\n                  *ngIf=\"\n                    currentSortColumn() === column.key &&\n                    currentSortDirection() === 'desc'\n                  \"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    d=\"M3 4.5L6 7.5L9 4.5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </span>\n          </th>\n\n          <th\n            *ngIf=\"hasActionsColumn()\"\n            class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n          ></th>\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"sefin-table__body\">\n        <!-- Data Rows -->\n        <tr\n          *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n          class=\"sefin-table__row sefin-table__row--clickable\"\n          (click)=\"onRowClick(row)\"\n        >\n          <!-- Selection Column Cell -->\n          <td\n            *ngIf=\"selectable\"\n            class=\"sefin-table__cell sefin-table__cell--select\"\n          >\n            <sefin-checkbox\n              [value]=\"isSelected(row)\"\n              (checkedChange)=\"toggleRowSelection($event, row)\"\n              [attr.aria-label]=\"'Select row'\"\n              size=\"sm\"\n            ></sefin-checkbox>\n          </td>\n\n          <!-- Data Column Cells -->\n          <td\n            *ngFor=\"let column of columns\"\n            [class]=\"getColumnClass(column)\"\n            [class.sefin-table__cell--sticky]=\"column.sticky\"\n            [class.sefin-table__cell--sticky-end]=\"\n              column.sticky && column.stickyEnd\n            \"\n            class=\"sefin-table__cell\"\n          >\n            <!-- Custom Template -->\n            <ng-container *ngIf=\"column.cellTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  column.cellTemplate;\n                  context: {\n                    $implicit: row,\n                    column: column,\n                    value: getCellValue(row, column)\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n\n            <!-- Badge Type -->\n            <ng-container\n              *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n            >\n              <sefin-badge\n                [value]=\"getCellValue(row, column)\"\n                variant=\"primary\"\n                size=\"sm\"\n              ></sefin-badge>\n            </ng-container>\n\n            <!-- Actions Type -->\n            <ng-container\n              *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n            >\n              <div class=\"sefin-table__actions\">\n                <ng-content select=\"[actions]\"></ng-content>\n              </div>\n            </ng-container>\n\n            <!-- Default/Text/Number/Date Type -->\n            <ng-container\n              *ngIf=\"\n                !column.cellTemplate &&\n                column.type !== 'badge' &&\n                column.type !== 'actions'\n              \"\n            >\n              <span class=\"sefin-table__cell-content\">\n                {{ formatCellValue(getCellValue(row, column), column.type) }}\n              </span>\n            </ng-container>\n          </td>\n\n          <!-- Actions Column Cell -->\n          <td\n            *ngIf=\"hasActionsColumn()\"\n            class=\"sefin-table__cell sefin-table__cell--actions\"\n          >\n            <div class=\"sefin-table__actions\">\n              <ng-content select=\"[actions]\"></ng-content>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Empty Row -->\n        <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n          <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n            <div class=\"sefin-table__empty-state\">\n              <ng-container *ngIf=\"emptyIconTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"emptyIconTemplate\"\n                ></ng-container>\n              </ng-container>\n              <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <sefin-pagination\n    *ngIf=\"pagination && !isEmpty()\"\n    [currentPage]=\"currentPage()\"\n    [totalPages]=\"totalPages()\"\n    [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n    [itemsPerPage]=\"currentPageSize()\"\n    (pageChange)=\"onPageChange($event)\"\n    class=\"sefin-table__paginator\"\n    size=\"sm\"\n  ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid var(--sefin-color-border, #cecece);border-radius:var(--sefin-radius-md, 8px);overflow:hidden;box-shadow:var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05));transition:box-shadow .2s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--density-compact .sefin-table__header-cell,.sefin-table--density-compact .sefin-table__cell{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell{padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding:var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell{padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table__header{background-color:var(--sefin-color-background-elevated, #fafafa);border-bottom:2px solid var(--sefin-color-border, #e5e5e5)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 2px 8px #0000000f}.sefin-table__header-row{background-color:var(--sefin-color-background-elevated, #fafafa)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-sm, .875rem);color:var(--sefin-color-text, #383838);text-transform:uppercase;letter-spacing:.5px;text-align:left;white-space:nowrap;border-bottom:none;position:relative;background-color:var(--sefin-color-background-elevated, #fafafa);-webkit-user-select:none;user-select:none;transition:all .2s ease-in-out;z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d814;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81f}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background-color:#55c3d80f}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2;box-shadow:2px 0 4px #0000000a}.sefin-table__header-cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__header-cell--sticky.sefin-table__header-cell--sticky-end:after{left:0;right:auto}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.4;transition:all .2s ease-in-out;flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid var(--sefin-color-border, #e5e5e5);transition:all .2s ease-in-out;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80d;box-shadow:inset 3px 0 0 var(--sefin-color-primary, #55C3D8)}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d814;box-shadow:inset 3px 0 0 var(--sefin-color-primary-dark, #3f9bb0)}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d814}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__row:last-child{border-bottom:none}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #383838);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .2s ease-in-out,color .2s ease-in-out}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px);text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1;box-shadow:2px 0 4px #0000000a}.sefin-table__cell--sticky:after{content:\"\";position:absolute;top:0;right:0;bottom:0;width:1px;background-color:var(--sefin-color-border, #e5e5e5);opacity:.6}.sefin-table__cell--sticky.sefin-table__cell--sticky-end{right:0;box-shadow:-2px 0 4px #0000000a}.sefin-table__cell--sticky.sefin-table__cell--sticky-end:after{left:0;right:auto}.sefin-table__cell-content{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #383838)}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f8f9facc}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d814!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80d}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80d}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{border-top:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px)}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"] }]
+            args: [{ selector: 'sefin-table', standalone: true, imports: [CommonModule, PaginationComponent, CheckboxComponent, BadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sefin-table__container\">\n  <!-- Header Actions Slot -->\n  <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n    <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n  </div>\n\n  <!-- Loading Overlay -->\n  <div *ngIf=\"loading\" class=\"sefin-table__loading\">\n    <div class=\"sefin-table__loading-bar\"></div>\n    <div class=\"sefin-table__loading-rows\">\n      <div *ngFor=\"let i of [1, 2, 3, 4, 5]\" class=\"sefin-table__skeleton-row\">\n        <div\n          class=\"sefin-table__skeleton-cell\"\n          *ngFor=\"let col of columns\"\n        ></div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Table -->\n  <div\n    class=\"sefin-table__wrapper\"\n    [class.sefin-table__wrapper--loading]=\"loading\"\n  >\n    <table\n      [class]=\"getTableClasses()\"\n      class=\"sefin-table__native-table\"\n      role=\"table\"\n      [attr.aria-label]=\"'Data table with ' + columns.length + ' columns'\"\n      [attr.aria-rowcount]=\"serverSide && total !== undefined ? total : sortedData().length\"\n      [attr.aria-colcount]=\"totalColspan()\"\n    >\n      <!-- Table Header -->\n      <thead\n        class=\"sefin-table__header\"\n        [class.sefin-table__header--sticky]=\"stickyHeader\"\n      >\n        <tr class=\"sefin-table__header-row\">\n          <!-- Selection Column Header -->\n          <th\n            *ngIf=\"selectable\"\n            class=\"sefin-table__header-cell sefin-table__header-cell--select\"\n          >\n            <sefin-checkbox\n              *ngIf=\"selectionMode === 'multiple'\"\n              [value]=\"isAllSelected()\"\n              [indeterminate]=\"isIndeterminate()\"\n              (checkedChange)=\"toggleSelectAll($event)\"\n              [attr.aria-label]=\"'Select all rows'\"\n              size=\"sm\"\n            ></sefin-checkbox>\n          </th>\n\n          <!-- Data Column Headers -->\n          <th\n            *ngFor=\"let column of columns\"\n            [class]=\"getColumnClass(column)\"\n            [class.sefin-table__header-cell--sortable]=\"column.sortable && sort\"\n            [class.sefin-table__header-cell--sorted]=\"\n              currentSortColumn() === column.key\n            \"\n            [class.sefin-table__header-cell--sort-asc]=\"\n              currentSortColumn() === column.key &&\n              currentSortDirection() === 'asc'\n            \"\n            [class.sefin-table__header-cell--sort-desc]=\"\n              currentSortColumn() === column.key &&\n              currentSortDirection() === 'desc'\n            \"\n            [class.sefin-table__header-cell--sticky]=\"column.sticky\"\n            [class.sefin-table__header-cell--sticky-end]=\"\n              column.sticky && column.stickyEnd\n            \"\n            [style.width]=\"getColumnWidth(column)\"\n            class=\"sefin-table__header-cell\"\n            (click)=\"column.sortable && sort ? onSort(column) : null\"\n            (keydown)=\"column.sortable && sort ? onSort(column, $event) : null\"\n            [attr.aria-sort]=\"getAriaSort(column)\"\n            [attr.aria-label]=\"getSortAriaLabel(column)\"\n            role=\"columnheader\"\n            [attr.tabindex]=\"column.sortable && sort ? 0 : null\"\n          >\n            <span class=\"sefin-table__header-content\">\n              {{ column.header }}\n              <span\n                *ngIf=\"column.sortable && sort\"\n                class=\"sefin-table__sort-icon\"\n                [attr.aria-hidden]=\"true\"\n              >\n                <svg\n                  *ngIf=\"showUnsortedIcon(column)\"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                >\n                  <path\n                    [attr.d]=\"sortIcons.unsorted\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n                <svg\n                  *ngIf=\"showAscendingIcon(column)\"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                >\n                  <path\n                    [attr.d]=\"sortIcons.ascending\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n                <svg\n                  *ngIf=\"showDescendingIcon(column)\"\n                  width=\"12\"\n                  height=\"12\"\n                  viewBox=\"0 0 12 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  focusable=\"false\"\n                >\n                  <path\n                    [attr.d]=\"sortIcons.descending\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </span>\n          </th>\n\n          <th\n            *ngIf=\"hasActionsColumn()\"\n            class=\"sefin-table__header-cell sefin-table__header-cell--actions\"\n          ></th>\n        </tr>\n      </thead>\n\n      <!-- Table Body -->\n      <tbody class=\"sefin-table__body\" role=\"rowgroup\">\n        <!-- Data Rows -->\n        <tr\n          *ngFor=\"let row of displayedData(); trackBy: trackByFn\"\n          class=\"sefin-table__row sefin-table__row--clickable\"\n          (click)=\"onRowClick(row)\"\n          [attr.aria-selected]=\"selectable ? isSelected(row) : null\"\n          [attr.aria-label]=\"'Row ' + (trackByFn(0, row) || '')\"\n          role=\"row\"\n        >\n          <!-- Selection Column Cell -->\n          <td\n            *ngIf=\"selectable\"\n            class=\"sefin-table__cell sefin-table__cell--select\"\n          >\n            <sefin-checkbox\n              [value]=\"isSelected(row)\"\n              (checkedChange)=\"toggleRowSelection($event, row)\"\n              [attr.aria-label]=\"'Select row'\"\n              size=\"sm\"\n            ></sefin-checkbox>\n          </td>\n\n          <!-- Data Column Cells -->\n          <td\n            *ngFor=\"let column of columns\"\n            [class]=\"getColumnClass(column)\"\n            [class.sefin-table__cell--sticky]=\"column.sticky\"\n            [class.sefin-table__cell--sticky-end]=\"\n              column.sticky && column.stickyEnd\n            \"\n            class=\"sefin-table__cell\"\n          >\n            <!-- Custom Template -->\n            <ng-container *ngIf=\"column.cellTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  column.cellTemplate;\n                  context: {\n                    $implicit: row,\n                    column: column,\n                    value: getCellValue(row, column)\n                  }\n                \"\n              ></ng-container>\n            </ng-container>\n\n            <!-- Badge Type -->\n            <ng-container\n              *ngIf=\"!column.cellTemplate && column.type === 'badge'\"\n            >\n              <sefin-badge\n                [value]=\"getCellValue(row, column)\"\n                variant=\"primary\"\n                size=\"sm\"\n              ></sefin-badge>\n            </ng-container>\n\n            <!-- Actions Type -->\n            <ng-container\n              *ngIf=\"!column.cellTemplate && column.type === 'actions'\"\n            >\n              <div class=\"sefin-table__actions\">\n                <ng-content select=\"[actions]\"></ng-content>\n              </div>\n            </ng-container>\n\n            <!-- Default/Text/Number/Date Type -->\n            <ng-container\n              *ngIf=\"\n                !column.cellTemplate &&\n                column.type !== 'badge' &&\n                column.type !== 'actions'\n              \"\n            >\n              <span class=\"sefin-table__cell-content\">\n                {{ formatCellValue(getCellValue(row, column), column.type, column) }}\n              </span>\n            </ng-container>\n          </td>\n\n          <!-- Actions Column Cell -->\n          <td\n            *ngIf=\"hasActionsColumn()\"\n            class=\"sefin-table__cell sefin-table__cell--actions\"\n          >\n            <div class=\"sefin-table__actions\">\n              <ng-content select=\"[actions]\"></ng-content>\n            </div>\n          </td>\n        </tr>\n\n        <!-- Empty Row -->\n        <tr *ngIf=\"isEmpty()\" class=\"sefin-table__row sefin-table__row--empty\">\n          <td [attr.colspan]=\"totalColspan()\" class=\"sefin-table__empty-cell\">\n            <div class=\"sefin-table__empty-state\">\n              <ng-container *ngIf=\"emptyIconTemplate\">\n                <ng-container\n                  *ngTemplateOutlet=\"emptyIconTemplate\"\n                ></ng-container>\n              </ng-container>\n              <p class=\"sefin-table__empty-text\">{{ emptyText }}</p>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <!-- Pagination -->\n  <sefin-pagination\n    *ngIf=\"pagination && !isEmpty()\"\n    [currentPage]=\"currentPage()\"\n    [totalPages]=\"totalPages()\"\n    [totalItems]=\"serverSide && total !== undefined ? total : undefined\"\n    [itemsPerPage]=\"currentPageSize()\"\n    (pageChange)=\"onPageChange($event)\"\n    class=\"sefin-table__paginator\"\n    size=\"sm\"\n  ></sefin-pagination>\n</div>\n", styles: [".sefin-table{display:block;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);overflow:hidden}.sefin-table__container{display:flex;flex-direction:column;width:100%;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-lg, 12px);overflow:hidden;box-shadow:0 2px 8px #0000000a,0 1px 2px #00000005;transition:box-shadow .3s ease-in-out,border-color .3s ease-in-out}.sefin-table__header-actions{display:flex;justify-content:flex-end;align-items:center;padding:var(--sefin-spacing-md, 16px);border-bottom:1px solid var(--sefin-color-border, #e5e5e5);background-color:var(--sefin-color-background, #ffffff);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0}.sefin-table__wrapper{position:relative;overflow-x:auto;overflow-y:visible;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__wrapper--loading{opacity:.6;pointer-events:none}.sefin-table__loading{position:absolute;inset:0;z-index:10;background-color:#fffffffa;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;border-radius:var(--sefin-radius-md, 8px)}.sefin-table__loading-bar{height:3px;background:linear-gradient(90deg,transparent,var(--sefin-color-primary, #55C3D8),transparent);animation:loading-bar 1.5s ease-in-out infinite;width:100%;border-radius:0 var(--sefin-radius-lg, 12px) 0 0}@keyframes loading-bar{0%{transform:translate(-100%)}to{transform:translate(200%)}}.sefin-table__loading-rows{flex:1;display:flex;flex-direction:column;padding:var(--sefin-spacing-lg, 24px);gap:var(--sefin-spacing-md, 16px)}.sefin-table__skeleton-row{display:flex;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-sm, 8px) 0}.sefin-table__skeleton-cell{flex:1;height:20px;background:linear-gradient(90deg,var(--sefin-color-surface-hover, #f5f5f5) 0%,rgba(85,195,216,.15) 50%,var(--sefin-color-surface-hover, #f5f5f5) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--sefin-radius-sm, 4px)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.sefin-table__native-table{width:100%;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:auto;min-width:100%}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-table--density-compact .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-sm, 8px);padding-bottom:var(--sefin-spacing-sm, 8px)}.sefin-table--density-compact .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-xs, 4px);padding-bottom:var(--sefin-spacing-xs, 4px)}.sefin-table--density-compact .sefin-table__header-cell--select,.sefin-table--density-compact .sefin-table__cell--select{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table--density-compact .sefin-table__header-cell--actions,.sefin-table--density-compact .sefin-table__cell--actions{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px)!important}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions),.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell:not(.sefin-table__header-cell--select):not(.sefin-table__header-cell--actions){padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions,.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{font-size:var(--sefin-font-size-base, 1rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:var(--sefin-spacing-lg, 24px);padding-bottom:var(--sefin-spacing-lg, 24px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:var(--sefin-spacing-md, 16px);padding-bottom:var(--sefin-spacing-md, 16px)}.sefin-table__header{background:linear-gradient(to bottom,#fff,#fafafa);border-bottom:1px solid rgba(0,0,0,.08);position:relative}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent 0%,rgba(0,0,0,.06) 50%,transparent 100%)}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a}.sefin-table__header-row{background:transparent}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-text-secondary, #6b7280);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:transparent;-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1}.sefin-table__header-cell--align-left{text-align:left}.sefin-table__header-cell--align-center{text-align:center}.sefin-table__header-cell--align-right{text-align:right}.sefin-table__header-cell--select{width:56px;text-align:center}.sefin-table__header-cell--actions{width:120px;text-align:right}.sefin-table__header-cell--sortable{cursor:pointer}.sefin-table__header-cell--sortable:hover{background-color:#55c3d80f;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8);transform:scale(1.1)}.sefin-table__header-cell--sortable:active{background-color:#55c3d81a}.sefin-table__header-cell--sortable:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px)}.sefin-table__header-cell--sorted{color:var(--sefin-color-primary, #55C3D8);background:linear-gradient(to bottom,#55c3d814,#55c3d80a)}.sefin-table__header-cell--sorted .sefin-table__sort-icon{opacity:1;color:var(--sefin-color-primary, #55C3D8)}.sefin-table__header-cell--sticky{position:sticky;background-color:var(--sefin-color-background-elevated, #fafafa);z-index:2}.sefin-table__header-content{display:flex;align-items:center;justify-content:flex-start;gap:var(--sefin-spacing-xs, 4px);width:100%}.sefin-table__sort-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;min-width:14px;color:var(--sefin-color-text-secondary, #9b9b9b);opacity:.5;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-left:var(--sefin-spacing-xs, 4px)}.sefin-table__sort-icon svg{display:block;width:100%;height:100%;transition:transform .2s ease-out}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon{opacity:1;transform:scale(1.1)}.sefin-table__header-cell--sortable:hover .sefin-table__sort-icon svg{transform:scale(1.05)}.sefin-table__body{background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__row{border-bottom:1px solid rgba(0,0,0,.04);transition:background-color .25s cubic-bezier(.4,0,.2,1),transform .15s ease-out;background-color:var(--sefin-color-surface, #ffffff);position:relative}.sefin-table__row--clickable{cursor:pointer}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty){background-color:#55c3d80a;transform:translateY(-1px);box-shadow:0 2px 4px #00000005}.sefin-table__row--clickable:hover:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table__row--clickable:active:not(.sefin-table__row--empty){background-color:#55c3d80f;transform:translateY(0);box-shadow:none}.sefin-table__row--clickable:active:not(.sefin-table__row--empty) .sefin-table__cell--sticky{background-color:#55c3d80f}.sefin-table__row--empty{border-bottom:none}.sefin-table__row:focus-visible{outline:2px solid var(--sefin-color-border-focus, #55C3D8);outline-offset:-2px;border-radius:var(--sefin-radius-sm, 4px);z-index:1}.sefin-table__row:last-child{border-bottom:none}.sefin-table__row[data-animate]{animation:fadeInRow .3s ease-in-out}@keyframes fadeInRow{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sefin-table__cell{font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-normal, 400);color:var(--sefin-color-text, #1f2937);border-bottom:none;vertical-align:middle;background-color:inherit;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}.sefin-table__cell--align-left{text-align:left}.sefin-table__cell--align-center{text-align:center}.sefin-table__cell--align-right{text-align:right}.sefin-table__cell--select{width:56px;text-align:center}.sefin-table__cell--actions{text-align:right;width:120px}.sefin-table__cell--sticky{position:sticky;background-color:inherit;z-index:1}.sefin-table__cell-content{display:block;line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text, #1f2937);font-weight:var(--sefin-font-weight-normal, 400);word-wrap:break-word;word-break:break-word;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sefin-table__actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--sefin-spacing-xs, 4px);flex-wrap:wrap}.sefin-table--striped .sefin-table__row:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__row:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__cell--sticky:nth-child(2n){background-color:var(--sefin-color-surface, #ffffff)}.sefin-table--striped .sefin-table__cell--sticky:nth-child(odd){background-color:#f9fafb99}.sefin-table--striped .sefin-table__row--clickable:hover,.sefin-table--striped .sefin-table__row--clickable:hover .sefin-table__cell--sticky{background-color:#55c3d80f!important}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover{background-color:#55c3d80a}.sefin-table--hover .sefin-table__row--clickable:not(.sefin-table__row--empty):hover .sefin-table__cell--sticky{background-color:#55c3d80a}.sefin-table--sticky-header .sefin-table__header{position:sticky;top:0;z-index:3;box-shadow:0 4px 16px #00000014,0 2px 4px #0000000a}.sefin-table__empty-cell{padding:var(--sefin-spacing-4xl, 96px) var(--sefin-spacing-xl, 32px);text-align:center;border-bottom:none;background-color:var(--sefin-color-surface, #ffffff)}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-lg, 24px);padding:var(--sefin-spacing-2xl, 48px);background:linear-gradient(to bottom,rgba(248,249,250,.5),transparent);border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-lg, 24px)}.sefin-table__empty-text{font-size:var(--sefin-font-size-lg, 1.125rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #686868);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:480px;letter-spacing:.2px}.sefin-table__paginator{background-color:var(--sefin-color-background, #ffffff);padding:var(--sefin-spacing-lg, 24px) var(--sefin-spacing-md, 16px);border-radius:0 0 var(--sefin-radius-lg, 12px) var(--sefin-radius-lg, 12px);display:flex;justify-content:flex-end;align-items:center}.sefin-table ::ng-deep .sefin-checkbox{margin:0;transition:transform .2s ease-in-out}.sefin-table ::ng-deep .sefin-checkbox:hover{transform:scale(1.05)}.sefin-table ::ng-deep .sefin-badge{margin:0;box-shadow:0 1px 3px #0000001a;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.sefin-table ::ng-deep .sefin-button,.sefin-table ::ng-deep .sefin-icon-button{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-table ::ng-deep .sefin-button:hover,.sefin-table ::ng-deep .sefin-icon-button:hover{transform:translateY(-1px)}.sefin-table ::ng-deep .sefin-button:active,.sefin-table ::ng-deep .sefin-icon-button:active{transform:translateY(0)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
                 type: Input
             }], data: [{