@lesterarte/sefin-ui 0.0.77 → 0.0.79

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -3766,6 +3766,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 type: Input
             }] } });
 
+class SkeletonComponent {
+    /** Shape of the skeleton. Options: 'text' (line) | 'circle' | 'rect' (rectangle block) */
+    shape = 'text';
+    /** Size. Options: 'sm' | 'md' | 'lg'. Affects height for text/rect, diameter for circle. */
+    size = 'md';
+    /** Animation style. Options: 'pulse' | 'wave' | 'none' */
+    animation = 'pulse';
+    /** Optional custom width (e.g. '100%', '80px'). Overrides default width for text/rect. */
+    width;
+    /** Optional custom height (e.g. '24px'). Overrides default height for text/rect. */
+    height;
+    /** Additional CSS classes */
+    class = '';
+    get skeletonClasses() {
+        return [
+            'sefin-skeleton',
+            `sefin-skeleton--${this.shape}`,
+            `sefin-skeleton--${this.size}`,
+            `sefin-skeleton--${this.animation}`,
+            this.class,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SkeletonComponent, isStandalone: true, selector: "sefin-skeleton", inputs: { shape: "shape", size: "size", animation: "animation", width: "width", height: "height", class: "class" }, ngImport: i0, template: "<div\n  [class]=\"skeletonClasses\"\n  [style.width]=\"width ?? null\"\n  [style.height]=\"height ?? null\"\n  role=\"presentation\"\n  aria-hidden=\"true\"\n>\n  @if (animation === 'wave') {\n    <span class=\"sefin-skeleton__shimmer\"></span>\n  }\n</div>\n", styles: [".sefin-skeleton{position:relative;overflow:hidden;box-sizing:border-box;background-color:var(--sefin-color-surface-hover-subtle, #e8e8e8);background-image:linear-gradient(110deg,var(--sefin-color-surface-hover-subtle, #e8e8e8) 0%,var(--sefin-color-surface-hover-subtle, #e8e8e8) 42%,var(--sefin-color-surface-hover, #cecece) 50%,var(--sefin-color-surface-hover-subtle, #e8e8e8) 58%,var(--sefin-color-surface-hover-subtle, #e8e8e8) 100%);background-size:200% 100%}.sefin-skeleton--text{border-radius:var(--sefin-radius-sm, 6px);width:100%}.sefin-skeleton--circle{border-radius:50%;flex-shrink:0;background:var(--sefin-color-surface-hover, #cecece);background-image:none}.sefin-skeleton--rect{border-radius:var(--sefin-radius-md, 8px);width:100%}.sefin-skeleton--sm.sefin-skeleton--text,.sefin-skeleton--sm.sefin-skeleton--rect{height:12px}.sefin-skeleton--sm.sefin-skeleton--circle{width:24px;height:24px}.sefin-skeleton--md.sefin-skeleton--text,.sefin-skeleton--md.sefin-skeleton--rect{height:16px}.sefin-skeleton--md.sefin-skeleton--circle{width:40px;height:40px}.sefin-skeleton--lg.sefin-skeleton--text,.sefin-skeleton--lg.sefin-skeleton--rect{height:20px}.sefin-skeleton--lg.sefin-skeleton--circle{width:56px;height:56px}.sefin-skeleton--pulse{animation:sefin-skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.sefin-skeleton.sefin-skeleton--pulse.sefin-skeleton--circle,.sefin-skeleton--wave{background:var(--sefin-color-surface-hover, #cecece);background-image:none}.sefin-skeleton--wave .sefin-skeleton__shimmer{position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%,transparent 100%);background-size:200% 100%;animation:sefin-skeleton-wave 2s ease-in-out infinite}.sefin-skeleton--none{animation:none;background:var(--sefin-color-surface-hover, #cecece);background-image:none}@keyframes sefin-skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes sefin-skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sefin-skeleton', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"skeletonClasses\"\n  [style.width]=\"width ?? null\"\n  [style.height]=\"height ?? null\"\n  role=\"presentation\"\n  aria-hidden=\"true\"\n>\n  @if (animation === 'wave') {\n    <span class=\"sefin-skeleton__shimmer\"></span>\n  }\n</div>\n", styles: [".sefin-skeleton{position:relative;overflow:hidden;box-sizing:border-box;background-color:var(--sefin-color-surface-hover-subtle, #e8e8e8);background-image:linear-gradient(110deg,var(--sefin-color-surface-hover-subtle, #e8e8e8) 0%,var(--sefin-color-surface-hover-subtle, #e8e8e8) 42%,var(--sefin-color-surface-hover, #cecece) 50%,var(--sefin-color-surface-hover-subtle, #e8e8e8) 58%,var(--sefin-color-surface-hover-subtle, #e8e8e8) 100%);background-size:200% 100%}.sefin-skeleton--text{border-radius:var(--sefin-radius-sm, 6px);width:100%}.sefin-skeleton--circle{border-radius:50%;flex-shrink:0;background:var(--sefin-color-surface-hover, #cecece);background-image:none}.sefin-skeleton--rect{border-radius:var(--sefin-radius-md, 8px);width:100%}.sefin-skeleton--sm.sefin-skeleton--text,.sefin-skeleton--sm.sefin-skeleton--rect{height:12px}.sefin-skeleton--sm.sefin-skeleton--circle{width:24px;height:24px}.sefin-skeleton--md.sefin-skeleton--text,.sefin-skeleton--md.sefin-skeleton--rect{height:16px}.sefin-skeleton--md.sefin-skeleton--circle{width:40px;height:40px}.sefin-skeleton--lg.sefin-skeleton--text,.sefin-skeleton--lg.sefin-skeleton--rect{height:20px}.sefin-skeleton--lg.sefin-skeleton--circle{width:56px;height:56px}.sefin-skeleton--pulse{animation:sefin-skeleton-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.sefin-skeleton.sefin-skeleton--pulse.sefin-skeleton--circle,.sefin-skeleton--wave{background:var(--sefin-color-surface-hover, #cecece);background-image:none}.sefin-skeleton--wave .sefin-skeleton__shimmer{position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%,transparent 100%);background-size:200% 100%;animation:sefin-skeleton-wave 2s ease-in-out infinite}.sefin-skeleton--none{animation:none;background:var(--sefin-color-surface-hover, #cecece);background-image:none}@keyframes sefin-skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes sefin-skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { shape: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
 /**
  * Atoms index
  */
@@ -6541,8 +6585,6 @@ class TableComponent {
     data = [];
     /** Property key used for tracking rows (default: 'id') */
     trackByKey = 'id';
-    /** Loading state */
-    loading = false;
     /** Empty state message */
     emptyText = 'No data available';
     /** Table density */
@@ -6663,7 +6705,7 @@ class TableComponent {
         return Math.ceil(this.sortedData().length / this.currentPageSize());
     }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
     isEmpty = computed(() => {
-        return !this.loading && this.displayedData().length === 0;
+        return this.displayedData().length === 0;
     }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
     hasActionsColumn = computed(() => {
         return this.columns.some((col) => col.type === 'actions');
@@ -6673,17 +6715,6 @@ class TableComponent {
         const actionsCol = this.hasActionsColumn() ? 1 : 0;
         return selectableCol + this.columns.length + actionsCol;
     }, ...(ngDevMode ? [{ debugName: "totalColspan" }] : []));
-    // Calculate equal width percentage for data columns
-    equalColumnWidth = computed(() => {
-        const dataColumnsCount = this.columns.length;
-        if (dataColumnsCount === 0) {
-            return '100%';
-        }
-        // Calculate percentage, accounting for fixed-width columns (select ~56px, actions ~120px)
-        // We'll use percentage that ensures equal distribution
-        const percentage = 100 / dataColumnsCount;
-        return `${percentage}%`;
-    }, ...(ngDevMode ? [{ debugName: "equalColumnWidth" }] : []));
     isAllSelected = computed(() => {
         if (!this.selectable || this.selectionMode === 'single') {
             return false;
@@ -6752,7 +6783,9 @@ class TableComponent {
                 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) {
+        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) {
@@ -6845,9 +6878,7 @@ class TableComponent {
         return new Date(NaN);
     }
     onRowClick(row) {
-        if (!this.loading) {
-            this.rowClicked.emit(row);
-        }
+        this.rowClicked.emit(row);
     }
     /**
      * Handles column sorting when header is clicked
@@ -6863,7 +6894,7 @@ class TableComponent {
             event.preventDefault();
             event.stopPropagation();
         }
-        if (!this.sort || !column.sortable || this.loading) {
+        if (!this.sort || !column.sortable) {
             return;
         }
         const currentColumn = this.currentSortColumn();
@@ -7032,18 +7063,15 @@ class TableComponent {
         ].join(' ');
     }
     /**
-     * Gets the width CSS value for a column
-     * All data columns get equal width percentage to ensure uniform sizing
+     * Gets the width CSS value for a column.
+     * With table-layout: auto, only explicit widths are set; columns without width
+     * let the browser distribute space based on content needs.
      * @param column - The column definition
-     * @returns The width value (equal percentage for all data columns)
+     * @returns The width value when explicitly set, undefined otherwise
      */
     getColumnWidth(column) {
-        // If column has explicit width, respect it
-        if (column?.width) {
-            return column.width;
-        }
-        // All columns without explicit width get equal percentage
-        return this.equalColumnWidth();
+        // Only set width for columns with explicit definition
+        return column?.width ?? undefined;
     }
     /**
      * Gets the appropriate sort icon path for a column
@@ -7114,7 +7142,11 @@ class TableComponent {
         }
         if (this.currentSortColumn() === column.key) {
             const direction = this.currentSortDirection();
-            return direction === 'asc' ? 'ascending' : direction === 'desc' ? 'descending' : 'none';
+            return direction === 'asc'
+                ? 'ascending'
+                : direction === 'desc'
+                    ? 'descending'
+                    : 'none';
         }
         return 'none';
     }
@@ -7181,19 +7213,22 @@ class TableComponent {
         return pages;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", 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", borderRadius: "borderRadius" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\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            [style.width]=\"getColumnWidth(column)\"\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              <div class=\"sefin-table__empty-icon-wrapper\">\n                <ng-container *ngIf=\"emptyIconTemplate; else defaultEmptyIcon\">\n                  <ng-container\n                    *ngTemplateOutlet=\"emptyIconTemplate\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultEmptyIcon>\n                  <svg\n                    class=\"sefin-table__empty-icon\"\n                    width=\"80\"\n                    height=\"80\"\n                    viewBox=\"0 0 80 80\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                  >\n                    <circle\n                      cx=\"40\"\n                      cy=\"40\"\n                      r=\"38\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-opacity=\"0.2\"\n                    />\n                    <path\n                      d=\"M25 30C25 28.3431 26.3431 27 28 27H52C53.6569 27 55 28.3431 55 30V50C55 51.6569 53.6569 53 52 53H28C26.3431 53 25 51.6569 25 50V30Z\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-opacity=\"0.3\"\n                    />\n                    <path\n                      d=\"M30 35L40 42L50 35\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-opacity=\"0.4\"\n                    />\n                    <circle\n                      cx=\"40\"\n                      cy=\"40\"\n                      r=\"3\"\n                      fill=\"currentColor\"\n                      fill-opacity=\"0.15\"\n                    />\n                  </svg>\n                </ng-template>\n              </div>\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%;height:100%;max-width:100%;box-sizing:border-box;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%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-md);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__container--radius-none{border-radius:var(--sefin-radius-none)}.sefin-table__container--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-table__container--radius-md{border-radius:var(--sefin-radius-md)}.sefin-table__container--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-table__container--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-table__container--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-table__container--radius-full{border-radius:var(--sefin-radius-full)}.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);flex:1;min-height:0;width:100%;max-width:100%;box-sizing:border-box;display:block}.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%;min-width:100%;max-width:100%;box-sizing:border-box;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:fixed;display:table}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.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:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:14px;padding-bottom:14px}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:14px;padding-bottom:14px}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table__header{background:linear-gradient(to bottom,#f8fafb,#f1f5f7);border-bottom:2px solid var(--sefin-color-primary, #55C3D8);position:relative;box-shadow:0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--sefin-color-primary, #55C3D8);opacity:.3}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a,0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header-row{background:linear-gradient(to bottom,#f8fafb,#f1f5f7)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-secondary, #383838);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.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:linear-gradient(to bottom,#55c3d814,#55c3d80d);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:linear-gradient(to bottom,#55c3d81f,#55c3d814)}.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,#55c3d81a,#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:linear-gradient(to bottom,#f8fafb,#f1f5f7);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-sm, .875rem);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);overflow:hidden;text-overflow:ellipsis;min-width:0;word-wrap:break-word;word-break:break-word}.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-normal, 1.5);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);vertical-align:middle}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-3xl, 64px) var(--sefin-spacing-xl, 32px);animation:fadeInEmpty .4s ease-out}@keyframes fadeInEmpty{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-table__empty-icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sefin-spacing-xs, 4px);animation:floatEmpty 3s ease-in-out infinite}@keyframes floatEmpty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sefin-table__empty-icon{width:80px;height:80px;color:var(--sefin-color-text-secondary, #9ca3af);opacity:.6;transition:all .3s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.04))}.sefin-table__empty-text{font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #6b7280);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:400px;letter-spacing:.01em;text-align:center}.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)}sefin-table{display:block;width:100%;max-width:100%;box-sizing:border-box}\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", "borderRadius", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value", "error", "errorMessage"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "borderRadius", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: TableComponent, isStandalone: true, selector: "sefin-table", inputs: { columns: "columns", data: "data", trackByKey: "trackByKey", 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", borderRadius: "borderRadius" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", pageChanged: "pageChanged", sortChanged: "sortChanged" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"getContainerClasses()\">\n  <!-- Header Actions Slot -->\n  <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n    <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n  </div>\n\n  <!-- Table -->\n  <div class=\"sefin-table__wrapper\">\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]=\"\n        serverSide && total !== undefined ? total : sortedData().length\n      \"\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            [style.width]=\"getColumnWidth(column)\"\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                {{\n                  formatCellValue(\n                    getCellValue(row, column),\n                    column.type,\n                    column\n                  )\n                }}\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              <div class=\"sefin-table__empty-icon-wrapper\">\n                <ng-container *ngIf=\"emptyIconTemplate; else defaultEmptyIcon\">\n                  <ng-container\n                    *ngTemplateOutlet=\"emptyIconTemplate\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultEmptyIcon>\n                  <svg\n                    class=\"sefin-table__empty-icon\"\n                    width=\"80\"\n                    height=\"80\"\n                    viewBox=\"0 0 80 80\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                  >\n                    <circle\n                      cx=\"40\"\n                      cy=\"40\"\n                      r=\"38\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-opacity=\"0.2\"\n                    />\n                    <path\n                      d=\"M25 30C25 28.3431 26.3431 27 28 27H52C53.6569 27 55 28.3431 55 30V50C55 51.6569 53.6569 53 52 53H28C26.3431 53 25 51.6569 25 50V30Z\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-opacity=\"0.3\"\n                    />\n                    <path\n                      d=\"M30 35L40 42L50 35\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-opacity=\"0.4\"\n                    />\n                    <circle\n                      cx=\"40\"\n                      cy=\"40\"\n                      r=\"3\"\n                      fill=\"currentColor\"\n                      fill-opacity=\"0.15\"\n                    />\n                  </svg>\n                </ng-template>\n              </div>\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%;height:100%;max-width:100%;box-sizing:border-box;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%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-md);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__container--radius-none{border-radius:var(--sefin-radius-none)}.sefin-table__container--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-table__container--radius-md{border-radius:var(--sefin-radius-md)}.sefin-table__container--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-table__container--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-table__container--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-table__container--radius-full{border-radius:var(--sefin-radius-full)}.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);flex:1;min-height:0;width:100%;max-width:100%;box-sizing:border-box;display:block}.sefin-table__native-table{width:100%;min-width:100%;max-width:100%;box-sizing:border-box;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:auto;display:table}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.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:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:14px;padding-bottom:14px}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:14px;padding-bottom:14px}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table__header{background:linear-gradient(to bottom,#f8fafb,#f1f5f7);border-bottom:2px solid var(--sefin-color-primary, #55C3D8);position:relative;box-shadow:0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--sefin-color-primary, #55C3D8);opacity:.3}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a,0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header-row{background:linear-gradient(to bottom,#f8fafb,#f1f5f7)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-secondary, #383838);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1;overflow:visible;min-width:0}.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:linear-gradient(to bottom,#55c3d814,#55c3d80d);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:linear-gradient(to bottom,#55c3d81f,#55c3d814)}.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,#55c3d81a,#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:linear-gradient(to bottom,#f8fafb,#f1f5f7);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-sm, .875rem);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);overflow:visible;min-width:0;word-wrap:break-word;word-break:break-word}.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-normal, 1.5);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-wrap:break-word;-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);vertical-align:middle}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-3xl, 64px) var(--sefin-spacing-xl, 32px);animation:fadeInEmpty .4s ease-out}@keyframes fadeInEmpty{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-table__empty-icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sefin-spacing-xs, 4px);animation:floatEmpty 3s ease-in-out infinite}@keyframes floatEmpty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sefin-table__empty-icon{width:80px;height:80px;color:var(--sefin-color-text-secondary, #9ca3af);opacity:.6;transition:all .3s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.04))}.sefin-table__empty-text{font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #6b7280);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:400px;letter-spacing:.01em;text-align:center}.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)}sefin-table{display:block;width:100%;max-width:100%;box-sizing:border-box}\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", "borderRadius", "class"], outputs: ["pageChange"] }, { kind: "component", type: CheckboxComponent, selector: "sefin-checkbox", inputs: ["size", "disabled", "indeterminate", "class", "label", "name", "value", "error", "errorMessage"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: BadgeComponent, selector: "sefin-badge", inputs: ["variant", "size", "dot", "max", "value", "borderRadius", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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]=\"getContainerClasses()\">\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            [style.width]=\"getColumnWidth(column)\"\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              <div class=\"sefin-table__empty-icon-wrapper\">\n                <ng-container *ngIf=\"emptyIconTemplate; else defaultEmptyIcon\">\n                  <ng-container\n                    *ngTemplateOutlet=\"emptyIconTemplate\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultEmptyIcon>\n                  <svg\n                    class=\"sefin-table__empty-icon\"\n                    width=\"80\"\n                    height=\"80\"\n                    viewBox=\"0 0 80 80\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                  >\n                    <circle\n                      cx=\"40\"\n                      cy=\"40\"\n                      r=\"38\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-opacity=\"0.2\"\n                    />\n                    <path\n                      d=\"M25 30C25 28.3431 26.3431 27 28 27H52C53.6569 27 55 28.3431 55 30V50C55 51.6569 53.6569 53 52 53H28C26.3431 53 25 51.6569 25 50V30Z\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-opacity=\"0.3\"\n                    />\n                    <path\n                      d=\"M30 35L40 42L50 35\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-opacity=\"0.4\"\n                    />\n                    <circle\n                      cx=\"40\"\n                      cy=\"40\"\n                      r=\"3\"\n                      fill=\"currentColor\"\n                      fill-opacity=\"0.15\"\n                    />\n                  </svg>\n                </ng-template>\n              </div>\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%;height:100%;max-width:100%;box-sizing:border-box;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%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-md);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__container--radius-none{border-radius:var(--sefin-radius-none)}.sefin-table__container--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-table__container--radius-md{border-radius:var(--sefin-radius-md)}.sefin-table__container--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-table__container--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-table__container--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-table__container--radius-full{border-radius:var(--sefin-radius-full)}.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);flex:1;min-height:0;width:100%;max-width:100%;box-sizing:border-box;display:block}.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%;min-width:100%;max-width:100%;box-sizing:border-box;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:fixed;display:table}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.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:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:14px;padding-bottom:14px}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:14px;padding-bottom:14px}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table__header{background:linear-gradient(to bottom,#f8fafb,#f1f5f7);border-bottom:2px solid var(--sefin-color-primary, #55C3D8);position:relative;box-shadow:0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--sefin-color-primary, #55C3D8);opacity:.3}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a,0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header-row{background:linear-gradient(to bottom,#f8fafb,#f1f5f7)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-secondary, #383838);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.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:linear-gradient(to bottom,#55c3d814,#55c3d80d);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:linear-gradient(to bottom,#55c3d81f,#55c3d814)}.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,#55c3d81a,#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:linear-gradient(to bottom,#f8fafb,#f1f5f7);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-sm, .875rem);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);overflow:hidden;text-overflow:ellipsis;min-width:0;word-wrap:break-word;word-break:break-word}.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-normal, 1.5);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);vertical-align:middle}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-3xl, 64px) var(--sefin-spacing-xl, 32px);animation:fadeInEmpty .4s ease-out}@keyframes fadeInEmpty{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-table__empty-icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sefin-spacing-xs, 4px);animation:floatEmpty 3s ease-in-out infinite}@keyframes floatEmpty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sefin-table__empty-icon{width:80px;height:80px;color:var(--sefin-color-text-secondary, #9ca3af);opacity:.6;transition:all .3s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.04))}.sefin-table__empty-text{font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #6b7280);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:400px;letter-spacing:.01em;text-align:center}.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)}sefin-table{display:block;width:100%;max-width:100%;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'sefin-table', standalone: true, imports: [
+                        CommonModule,
+                        PaginationComponent,
+                        CheckboxComponent,
+                        BadgeComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div [class]=\"getContainerClasses()\">\n  <!-- Header Actions Slot -->\n  <div *ngIf=\"headerActionsTemplate\" class=\"sefin-table__header-actions\">\n    <ng-container *ngTemplateOutlet=\"headerActionsTemplate\"></ng-container>\n  </div>\n\n  <!-- Table -->\n  <div class=\"sefin-table__wrapper\">\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]=\"\n        serverSide && total !== undefined ? total : sortedData().length\n      \"\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            [style.width]=\"getColumnWidth(column)\"\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                {{\n                  formatCellValue(\n                    getCellValue(row, column),\n                    column.type,\n                    column\n                  )\n                }}\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              <div class=\"sefin-table__empty-icon-wrapper\">\n                <ng-container *ngIf=\"emptyIconTemplate; else defaultEmptyIcon\">\n                  <ng-container\n                    *ngTemplateOutlet=\"emptyIconTemplate\"\n                  ></ng-container>\n                </ng-container>\n                <ng-template #defaultEmptyIcon>\n                  <svg\n                    class=\"sefin-table__empty-icon\"\n                    width=\"80\"\n                    height=\"80\"\n                    viewBox=\"0 0 80 80\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                  >\n                    <circle\n                      cx=\"40\"\n                      cy=\"40\"\n                      r=\"38\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-opacity=\"0.2\"\n                    />\n                    <path\n                      d=\"M25 30C25 28.3431 26.3431 27 28 27H52C53.6569 27 55 28.3431 55 30V50C55 51.6569 53.6569 53 52 53H28C26.3431 53 25 51.6569 25 50V30Z\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-opacity=\"0.3\"\n                    />\n                    <path\n                      d=\"M30 35L40 42L50 35\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                      stroke-opacity=\"0.4\"\n                    />\n                    <circle\n                      cx=\"40\"\n                      cy=\"40\"\n                      r=\"3\"\n                      fill=\"currentColor\"\n                      fill-opacity=\"0.15\"\n                    />\n                  </svg>\n                </ng-template>\n              </div>\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%;height:100%;max-width:100%;box-sizing:border-box;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%;max-width:100%;height:100%;min-height:100%;box-sizing:border-box;background-color:var(--sefin-color-surface, #ffffff);border:1px solid rgba(0,0,0,.06);border-radius:var(--sefin-radius-md);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__container--radius-none{border-radius:var(--sefin-radius-none)}.sefin-table__container--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-table__container--radius-md{border-radius:var(--sefin-radius-md)}.sefin-table__container--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-table__container--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-table__container--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-table__container--radius-full{border-radius:var(--sefin-radius-full)}.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);flex:1;min-height:0;width:100%;max-width:100%;box-sizing:border-box;display:block}.sefin-table__native-table{width:100%;min-width:100%;max-width:100%;box-sizing:border-box;border-collapse:separate;border-spacing:0;background-color:var(--sefin-color-surface, #ffffff);table-layout:auto;display:table}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.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:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell:not(.sefin-table__cell--select):not(.sefin-table__cell--actions){padding-top:14px;padding-bottom:14px}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--select{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--select{padding-top:14px;padding-bottom:14px}.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-sm, .875rem);line-height:var(--sefin-line-height-normal, 1.5);padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-table:not(.sefin-table--density-compact) .sefin-table__header-cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table:not(.sefin-table--density-compact) .sefin-table__cell--actions{padding-top:14px;padding-bottom:14px}.sefin-table__header{background:linear-gradient(to bottom,#f8fafb,#f1f5f7);border-bottom:2px solid var(--sefin-color-primary, #55C3D8);position:relative;box-shadow:0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--sefin-color-primary, #55C3D8);opacity:.3}.sefin-table__header--sticky{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #00000014,0 2px 4px #0000000a,0 2px 4px #00000005,inset 0 -1px #55c3d81a}.sefin-table__header-row{background:linear-gradient(to bottom,#f8fafb,#f1f5f7)}.sefin-table__header-cell{font-weight:var(--sefin-font-weight-semibold, 600);font-size:var(--sefin-font-size-xs, .75rem);color:var(--sefin-color-secondary, #383838);text-transform:uppercase;letter-spacing:.8px;text-align:left;border-bottom:none;background:linear-gradient(to bottom,#f8fafb,#f1f5f7);-webkit-user-select:none;user-select:none;transition:background-color .25s cubic-bezier(.4,0,.2,1),background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1);z-index:1;overflow:visible;min-width:0}.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:linear-gradient(to bottom,#55c3d814,#55c3d80d);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:linear-gradient(to bottom,#55c3d81f,#55c3d814)}.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,#55c3d81a,#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:linear-gradient(to bottom,#f8fafb,#f1f5f7);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-sm, .875rem);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);overflow:visible;min-width:0;word-wrap:break-word;word-break:break-word}.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-normal, 1.5);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-wrap:break-word;-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);vertical-align:middle}.sefin-table__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sefin-spacing-md, 16px);padding:var(--sefin-spacing-3xl, 64px) var(--sefin-spacing-xl, 32px);animation:fadeInEmpty .4s ease-out}@keyframes fadeInEmpty{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sefin-table__empty-icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--sefin-spacing-xs, 4px);animation:floatEmpty 3s ease-in-out infinite}@keyframes floatEmpty{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.sefin-table__empty-icon{width:80px;height:80px;color:var(--sefin-color-text-secondary, #9ca3af);opacity:.6;transition:all .3s ease-in-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.04))}.sefin-table__empty-text{font-size:var(--sefin-font-size-base, 1rem);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-relaxed, 1.75);color:var(--sefin-color-text-secondary, #6b7280);margin:0;font-family:var(--sefin-font-family-base, \"Pluto\", sans-serif);max-width:400px;letter-spacing:.01em;text-align:center}.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)}sefin-table{display:block;width:100%;max-width:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
                 type: Input
             }], data: [{
                 type: Input
             }], trackByKey: [{
                 type: Input
-            }], loading: [{
-                type: Input
             }], emptyText: [{
                 type: Input
             }], density: [{
@@ -7745,5 +7780,5 @@ const STYLES_PATH = './styles/index.scss';
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionItemComponent, AlertComponent, AppBarComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, CHIP_HEIGHT_TOKENS, COLOR_TOKENS, COMPONENT_HEIGHT_TOKENS, CONTROL_SIZE_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, DrawerCloseDirective, DrawerComponent, DropdownMenuComponent, FabButtonComponent, FormFieldComponent, GridComponent, ICON_SIZE_TOKENS, INPUT_HEIGHT_TOKENS, IconButtonComponent, IconComponent, IconTileComponent, ImageComponent, LIGHT_THEME, LinkComponent, ModalComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns, isMenuItem };
+export { AccordionItemComponent, AlertComponent, AppBarComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, CHIP_HEIGHT_TOKENS, COLOR_TOKENS, COMPONENT_HEIGHT_TOKENS, CONTROL_SIZE_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, DrawerCloseDirective, DrawerComponent, DropdownMenuComponent, FabButtonComponent, FormFieldComponent, GridComponent, ICON_SIZE_TOKENS, INPUT_HEIGHT_TOKENS, IconButtonComponent, IconComponent, IconTileComponent, ImageComponent, LIGHT_THEME, LinkComponent, ModalComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SkeletonComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns, isMenuItem };
 //# sourceMappingURL=lesterarte-sefin-ui.mjs.map