@lesterarte/sefin-ui 0.0.80 → 0.0.82

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -6609,6 +6609,20 @@ class TableComponent {
     pageSizeOptions = [10, 25, 50];
     /** Current page size */
     pageSize = 10;
+    /**
+     * Current page (1-based). When set, keeps the table in sync with parent (e.g. server-side pagination).
+     * Required for server-side mode: pass the parent's page number so the pagination UI stays in sync
+     * when data refreshes or the parent resets the page. If not set, the table manages page internally.
+     */
+    set currentPageInput(value) {
+        if (value !== undefined && value >= 1) {
+            this.currentPage.set(value);
+        }
+        else if (value !== undefined && value < 1) {
+            // Reset to page 1 when parent sends invalid/zero page (e.g. after filter change)
+            this.currentPage.set(1);
+        }
+    }
     /** Total items (for server-side mode) */
     total;
     /** Enable sorting */
@@ -6769,7 +6783,19 @@ class TableComponent {
                 this.currentPageSize.set(newPageSize);
             }
         }
-        if (changes['data'] && this.serverSide) {
+        if (changes['currentPageInput']) {
+            const page = changes['currentPageInput'].currentValue;
+            if (page !== undefined && page >= 1) {
+                this.currentPage.set(page);
+            }
+            else if (page !== undefined && page < 1) {
+                this.currentPage.set(1);
+            }
+            // OnPush: ensure view updates when parent syncs page (e.g. server-side, navigating back to cached page).
+            this.cdr.markForCheck();
+        }
+        if (changes['data']) {
+            // OnPush: ensure view updates when parent passes new data (e.g. new reference when navigating back to cached page).
             this.cdr.markForCheck();
         }
         if (changes['columns'] || changes['data']) {
@@ -7230,7 +7256,7 @@ 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", emptyText: "emptyText", density: "density", striped: "striped", hover: "hover", selectable: "selectable", selectionMode: "selectionMode", selectRowOnClick: "selectRowOnClick", 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", selectedRowChange: "selectedRowChange", 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          [class.sefin-table__row--selected]=\"\n            (selectable || selectRowOnClick) && isSelected(row)\n          \"\n          (click)=\"onRowClick(row)\"\n          [attr.aria-selected]=\"\n            (selectable || selectRowOnClick) ? isSelected(row) : null\n          \"\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--selected,.sefin-table__row--selected .sefin-table__cell--sticky{background-color:#55c3d814}.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--striped .sefin-table__row--selected,.sefin-table--striped .sefin-table__row--selected .sefin-table__cell--sticky{background-color:#55c3d814!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", selectRowOnClick: "selectRowOnClick", pagination: "pagination", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", currentPageInput: "currentPageInput", total: "total", sort: "sort", serverSide: "serverSide", stickyHeader: "stickyHeader", headerActionsTemplate: "headerActionsTemplate", emptyIconTemplate: "emptyIconTemplate", borderRadius: "borderRadius" }, outputs: { rowClicked: "rowClicked", selectionChanged: "selectionChanged", selectedRowChange: "selectedRowChange", 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          [class.sefin-table__row--selected]=\"\n            (selectable || selectRowOnClick) && isSelected(row)\n          \"\n          (click)=\"onRowClick(row)\"\n          [attr.aria-selected]=\"\n            selectable || selectRowOnClick ? isSelected(row) : null\n          \"\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: show when there is data, or in server-side mode when total > 0 so user can navigate -->\n  <sefin-pagination\n    *ngIf=\"\n      pagination &&\n      (!isEmpty() || (serverSide && total !== undefined && total > 0))\n    \"\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--selected,.sefin-table__row--selected .sefin-table__cell--sticky{background-color:#55c3d814}.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--striped .sefin-table__row--selected,.sefin-table--striped .sefin-table__row--selected .sefin-table__cell--sticky{background-color:#55c3d814!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,
@@ -7239,7 +7265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         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          [class.sefin-table__row--selected]=\"\n            (selectable || selectRowOnClick) && isSelected(row)\n          \"\n          (click)=\"onRowClick(row)\"\n          [attr.aria-selected]=\"\n            (selectable || selectRowOnClick) ? isSelected(row) : null\n          \"\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--selected,.sefin-table__row--selected .sefin-table__cell--sticky{background-color:#55c3d814}.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--striped .sefin-table__row--selected,.sefin-table--striped .sefin-table__row--selected .sefin-table__cell--sticky{background-color:#55c3d814!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"] }]
+                    ], 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          [class.sefin-table__row--selected]=\"\n            (selectable || selectRowOnClick) && isSelected(row)\n          \"\n          (click)=\"onRowClick(row)\"\n          [attr.aria-selected]=\"\n            selectable || selectRowOnClick ? isSelected(row) : null\n          \"\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: show when there is data, or in server-side mode when total > 0 so user can navigate -->\n  <sefin-pagination\n    *ngIf=\"\n      pagination &&\n      (!isEmpty() || (serverSide && total !== undefined && total > 0))\n    \"\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--selected,.sefin-table__row--selected .sefin-table__cell--sticky{background-color:#55c3d814}.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--striped .sefin-table__row--selected,.sefin-table--striped .sefin-table__row--selected .sefin-table__cell--sticky{background-color:#55c3d814!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: [{
@@ -7266,6 +7292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 type: Input
             }], pageSize: [{
                 type: Input
+            }], currentPageInput: [{
+                type: Input
             }], total: [{
                 type: Input
             }], sort: [{