@aquera/ngx-smart-table 0.0.8-alpha → 0.0.10-alpha

package/fesm2015/aquera-ngx-smart-table.mjs

@@ -6980,10 +6980,10 @@ class StRowActionsDropdownComponent {
     }
 }
 StRowActionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StRowActionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n    <nile-menu *ngIf=\"isOpen\" class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n      <ng-container *ngFor=\"let action of visibleActions\">\n        <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n          <nile-icon  *ngIf=\"action.icon\" size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n          {{ action.label }}\n        </nile-menu-item>\n      </ng-container>\n    \n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">No actions available</nile-menu-item>\n    </nile-menu>\n    </div>\n\n  </div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StRowActionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n    <nile-menu *ngIf=\"isOpen\" class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n      <ng-container *ngFor=\"let action of visibleActions\">\n        <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n          <nile-icon  *ngIf=\"action.icon\" size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n          {{ action.label }}\n        </nile-menu-item>\n      </ng-container>\n    \n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">No actions available</nile-menu-item>\n    </nile-menu>\n    </div>\n\n  </div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-row-actions-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n    <nile-menu *ngIf=\"isOpen\" class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n      <ng-container *ngFor=\"let action of visibleActions\">\n        <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n          <nile-icon  *ngIf=\"action.icon\" size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n          {{ action.label }}\n        </nile-menu-item>\n      </ng-container>\n    \n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">No actions available</nile-menu-item>\n    </nile-menu>\n    </div>\n\n  </div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"] }]
+            args: [{ selector: 'st-row-actions-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n    <nile-menu *ngIf=\"isOpen\" class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n      <ng-container *ngFor=\"let action of visibleActions\">\n        <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n          <nile-icon  *ngIf=\"action.icon\" size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n          {{ action.label }}\n        </nile-menu-item>\n      </ng-container>\n    \n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">No actions available</nile-menu-item>\n    </nile-menu>\n    </div>\n\n  </div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], position: [{
@@ -7124,10 +7124,10 @@ class StHeaderComponent {
     }
 }
 StHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StHeaderComponent, selector: "st-header", inputs: { column: "column", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering" }, outputs: { sortToggle: "sortToggle", filterChange: "filterChange", columnMoved: "columnMoved", menuClick: "menuClick" }, ngImport: i0, template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    <button *ngIf=\"isMenuEnabled()\" \n            class=\"column-menu-trigger\" \n            (click)=\"onMenuClick($event)\"\n            type=\"button\" \n            aria-label=\"Column actions\">\n      <nile-icon name=\"options\"></nile-icon>\n    </button>\n  </div>\n</div>", styles: [".st-header{position:relative;text-align:left;background-color:#fff;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StHeaderComponent, selector: "st-header", inputs: { column: "column", columnIndex: "columnIndex", isFirstColumn: "isFirstColumn", isLastColumn: "isLastColumn", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering" }, outputs: { sortToggle: "sortToggle", filterChange: "filterChange", columnMoved: "columnMoved", menuClick: "menuClick" }, ngImport: i0, template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    <button *ngIf=\"isMenuEnabled()\" \n            class=\"column-menu-trigger\" \n            (click)=\"onMenuClick($event)\"\n            type=\"button\" \n            aria-label=\"Column actions\">\n      <nile-icon name=\"options\"></nile-icon>\n    </button>\n  </div>\n</div>", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-header', template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    <button *ngIf=\"isMenuEnabled()\" \n            class=\"column-menu-trigger\" \n            (click)=\"onMenuClick($event)\"\n            type=\"button\" \n            aria-label=\"Column actions\">\n      <nile-icon name=\"options\"></nile-icon>\n    </button>\n  </div>\n</div>", styles: [".st-header{position:relative;text-align:left;background-color:#fff;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"] }]
+            args: [{ selector: 'st-header', template: "<div class=\"st-header\" [class.sortable]=\"isSortable()\" [class.sorted]=\"isSorted()\" [attr.aria-sort]=\"getAriaSort()\">\n  <div class=\"header-content\">\n    <span class=\"header-text\">{{ column.header || column.key }}</span>\n    <button *ngIf=\"isMenuEnabled()\" \n            class=\"column-menu-trigger\" \n            (click)=\"onMenuClick($event)\"\n            type=\"button\" \n            aria-label=\"Column actions\">\n      <nile-icon name=\"options\"></nile-icon>\n    </button>\n  </div>\n</div>", styles: [".st-header{position:relative;text-align:left;padding-left:8px}.st-header.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s}.st-header.resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.st-header.align-center{text-align:center}.st-header.align-center .header-content{justify-content:center}.st-header.align-right{text-align:right}.st-header.align-right .header-content{justify-content:flex-end}.st-header .header-content{display:flex;align-items:center;gap:8px}.st-header .header-text{flex:1;font-size:12px;font-weight:500;letter-spacing:.2px;line-height:14px}.st-header .column-menu-trigger{background:none;border:none;padding:4px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}.st-header .column-menu-trigger nile-icon{font-size:16px;pointer-events:none}.st-header .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:10}.st-header .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-header .resize-handle:hover:after,.st-header .resize-handle:active:after{opacity:1}\n"] }]
         }], propDecorators: { column: [{
                 type: Input
             }], columnIndex: [{
@@ -8578,22 +8578,116 @@ class StTableComponent {
         }
     }
     /**
-     * Focus the TD element in the DOM
+     * Focus the TD element in the DOM and scroll it into view,
+     * accounting for sticky columns on left and right
      */
     focusTdElement(rowIndex, colIndex) {
         // Use setTimeout to ensure DOM has updated
         setTimeout(() => {
-            // More robust: find the td by data attributes
-            const tr = document.querySelector(`tr[data-row-index="${rowIndex}"]`);
+            // Use absolute row index for virtual scroll compatibility
+            const absoluteRowIndex = this.getAbsoluteRowIndex(rowIndex);
+            const tr = document.querySelector(`tr[data-row-index="${absoluteRowIndex}"]`);
             if (tr) {
-                const cells = tr.querySelectorAll('td:not(.settings-column)');
+                const cells = tr.querySelectorAll('td:not(.settings-column):not(.row-number-cell)');
                 const targetCell = cells[colIndex];
-                if (targetCell) {
-                    targetCell.focus({ preventScroll: false });
+                if (targetCell && typeof targetCell.focus === 'function') {
+                    targetCell.focus({ preventScroll: true });
+                    this.scrollCellIntoView(targetCell, colIndex);
                 }
             }
         }, 0);
     }
+    /**
+     * Scroll a cell into view, accounting for sticky columns
+     */
+    scrollCellIntoView(cell, colIndex) {
+        // Find the scroll container
+        const scrollContainer = this.getScrollContainerElement();
+        if (!scrollContainer)
+            return;
+        const cellRect = cell.getBoundingClientRect();
+        const containerRect = scrollContainer.getBoundingClientRect();
+        // Calculate sticky column widths
+        const { leftStickyWidth, rightStickyWidth } = this.calculateStickyWidths();
+        // Calculate visible area (excluding sticky columns)
+        const visibleLeft = containerRect.left + leftStickyWidth;
+        const visibleRight = containerRect.right - rightStickyWidth;
+        const visibleTop = containerRect.top;
+        const visibleBottom = containerRect.bottom;
+        // Check if column is sticky (don't scroll for sticky columns)
+        const column = this.visibleColumns[colIndex];
+        if (column === null || column === void 0 ? void 0 : column.sticky) {
+            // Just ensure vertical visibility for sticky columns
+            if (cellRect.top < visibleTop) {
+                scrollContainer.scrollTop -= (visibleTop - cellRect.top);
+            }
+            else if (cellRect.bottom > visibleBottom) {
+                scrollContainer.scrollTop += (cellRect.bottom - visibleBottom);
+            }
+            return;
+        }
+        // Horizontal scrolling
+        if (cellRect.left < visibleLeft) {
+            // Cell is hidden behind left sticky columns
+            scrollContainer.scrollLeft -= (visibleLeft - cellRect.left);
+        }
+        else if (cellRect.right > visibleRight) {
+            // Cell is hidden behind right sticky columns
+            scrollContainer.scrollLeft += (cellRect.right - visibleRight);
+        }
+        // Vertical scrolling
+        if (cellRect.top < visibleTop) {
+            scrollContainer.scrollTop -= (visibleTop - cellRect.top);
+        }
+        else if (cellRect.bottom > visibleBottom) {
+            scrollContainer.scrollTop += (cellRect.bottom - visibleBottom);
+        }
+    }
+    /**
+     * Get the scroll container element
+     */
+    getScrollContainerElement() {
+        var _a;
+        // Prefer cached container if already resolved
+        if (this.scrollContainer) {
+            return this.scrollContainer;
+        }
+        // Virtual scroll uses scrollViewport
+        if (this.isVirtualScrollEnabled() && ((_a = this.scrollViewport) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.scrollContainer = this.scrollViewport.nativeElement;
+            return this.scrollContainer;
+        }
+        // Standard mode uses .st-table container (cache it to avoid selecting wrong table repeatedly)
+        const tableContainer = document.querySelector('.st-table');
+        if (tableContainer) {
+            this.scrollContainer = tableContainer;
+        }
+        return this.scrollContainer || null;
+    }
+    /**
+     * Calculate total width of sticky columns on left and right
+     */
+    calculateStickyWidths() {
+        let leftStickyWidth = 0;
+        let rightStickyWidth = 0;
+        // Account for row number column if enabled
+        if (this.mergedConfig.showRowNumber) {
+            leftStickyWidth += 30; // Row number column width
+        }
+        // Calculate from column configs
+        for (const col of this.visibleColumns) {
+            if (col.sticky === 'left') {
+                leftStickyWidth += col.width || 100;
+            }
+            else if (col.sticky === 'right') {
+                rightStickyWidth += col.width || 100;
+            }
+        }
+        // Account for settings column only when row actions are enabled (use consistent width)
+        const settingsColumnWidth = this.hasRowActions() ? 32 : 0;
+        rightStickyWidth += settingsColumnWidth;
+        return { leftStickyWidth, rightStickyWidth };
+    }
     /**
      * Handle cell click
      */
@@ -8707,10 +8801,10 @@ class StTableComponent {
     }
 }
 StTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StTableComponent, deps: [{ token: JsonSchemaValidatorService }, { token: ValidationLoggerService }, { token: VirtualScrollService }], target: i0.ɵɵFactoryTarget.Component });
-StTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StTableComponent, selector: "st-table", inputs: { tableConfig: "tableConfig", data: "data", data$: "data$", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering", validateConfig: "validateConfig" }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n<st-pagination \n  *ngIf=\"showTopPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"top\">\n</st-pagination>\n\n<div class=\"st-table\" *ngIf=\"!(mergedConfig.tableSkeleton?.enabled | async)\" \n  [ngClass]=\"{\n    'virtual-scroll-enabled': isVirtualScrollEnabled(),\n    'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n  }\"\n  [ngStyle]=\"{\n    'max-height.px': !isVirtualScrollEnabled() ? mergedConfig.display?.maxHeight : null\n  }\"\n  stKeyboardNavigation\n  [tableState]=\"getActiveTableState()\" \n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:collapse}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;border-right:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;border:1px solid #E6E9EB;border-left:none;background-color:transparent}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:collapse;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;border-right:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;border-right:none;position:sticky;right:0}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;border:1px solid #E6E9EB;border-left:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"], components: [{ type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized"] }], pipes: { "async": i1.AsyncPipe } });
+StTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StTableComponent, selector: "st-table", inputs: { tableConfig: "tableConfig", data: "data", data$: "data$", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering", validateConfig: "validateConfig" }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n<st-pagination \n  *ngIf=\"showTopPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"top\">\n</st-pagination>\n\n<div class=\"st-table\" *ngIf=\"!(mergedConfig.tableSkeleton?.enabled | async)\" \n  [ngClass]=\"{\n    'virtual-scroll-enabled': isVirtualScrollEnabled(),\n    'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n  }\"\n  [ngStyle]=\"{\n    'max-height.px': !isVirtualScrollEnabled() ? mergedConfig.display?.maxHeight : null\n  }\"\n  stKeyboardNavigation\n  [tableState]=\"getActiveTableState()\" \n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"], components: [{ type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized"] }], pipes: { "async": i1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-table', template: "<!-- Top pagination controls -->\n<st-pagination \n  *ngIf=\"showTopPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"top\">\n</st-pagination>\n\n<div class=\"st-table\" *ngIf=\"!(mergedConfig.tableSkeleton?.enabled | async)\" \n  [ngClass]=\"{\n    'virtual-scroll-enabled': isVirtualScrollEnabled(),\n    'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n  }\"\n  [ngStyle]=\"{\n    'max-height.px': !isVirtualScrollEnabled() ? mergedConfig.display?.maxHeight : null\n  }\"\n  stKeyboardNavigation\n  [tableState]=\"getActiveTableState()\" \n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:collapse}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;border-right:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;border:1px solid #E6E9EB;border-left:none;background-color:transparent}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:collapse;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;border-right:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;border-right:none;position:sticky;right:0}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;border:1px solid #E6E9EB;border-left:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"] }]
+            args: [{ selector: 'st-table', template: "<!-- Top pagination controls -->\n<st-pagination \n  *ngIf=\"showTopPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"top\">\n</st-pagination>\n\n<div class=\"st-table\" *ngIf=\"!(mergedConfig.tableSkeleton?.enabled | async)\" \n  [ngClass]=\"{\n    'virtual-scroll-enabled': isVirtualScrollEnabled(),\n    'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n  }\"\n  [ngStyle]=\"{\n    'max-height.px': !isVirtualScrollEnabled() ? mergedConfig.display?.maxHeight : null\n  }\"\n  stKeyboardNavigation\n  [tableState]=\"getActiveTableState()\" \n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: JsonSchemaValidatorService }, { type: ValidationLoggerService }, { type: VirtualScrollService }]; }, propDecorators: { tableConfig: [{
                 type: Input
             }], data: [{
@@ -9713,14 +9807,20 @@ class StWorkbookComponent {
     initializeComponent(isFirstInit = true) {
         if (!this.config)
             return;
+        const previousSheetCount = this.sheets.length;
         this.sheets = [...this.config.sheets];
+        const newSheetCount = this.sheets.length;
         // Only reset activeSheetIndex on first init, preserve it on config updates
         if (isFirstInit) {
             this.activeSheetIndex = this.config.initialActiveSheetIndex || 0;
         }
         else {
-            // Ensure activeSheetIndex is still valid after config change
-            if (this.activeSheetIndex >= this.sheets.length) {
+            // Check if a new sheet was added - switch to the new sheet
+            if (newSheetCount > previousSheetCount) {
+                this.activeSheetIndex = newSheetCount - 1; // Switch to the newly added sheet
+            }
+            // Ensure activeSheetIndex is still valid after config change (e.g., sheet deleted)
+            else if (this.activeSheetIndex >= this.sheets.length) {
                 this.activeSheetIndex = Math.max(0, this.sheets.length - 1);
             }
         }