@aquera/ngx-smart-table 0.0.5-alpha → 0.0.7-alpha

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

@@ -1,5 +1,5 @@
 import { BehaviorSubject, Subject, isObservable, fromEvent, merge } from 'rxjs';
-import { distinctUntilChanged, map, throttleTime, tap, debounceTime, takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, map, throttleTime, takeUntil, tap, debounceTime } from 'rxjs/operators';
 import * as i0 from '@angular/core';
 import { EventEmitter, ElementRef, Component, Input, Output, ViewChild, HostListener, Injectable, ChangeDetectionStrategy, Directive, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
@@ -3548,6 +3548,11 @@ class NileSelectEditor {
             var _a, _b;
             (_a = this.select) === null || _a === void 0 ? void 0 : _a.focus();
             (_b = this.select) === null || _b === void 0 ? void 0 : _b.click();
+            // Find the portal div for multi-select click detection
+            if (this.options.multiple) {
+                // Portal div is appended to document body
+                this.portalDiv = document.querySelector('.nile-select-portal-append');
+            }
         }, 0);
     }
     /**
@@ -3646,6 +3651,9 @@ class NileSelectEditor {
         if (this.options.portal !== undefined) {
             this.select.portal = this.options.portal;
         }
+        else {
+            this.select.portal = true; // Default to portal mode for better positioning
+        }
         // Prevent width syncing issues in table cells
         this.select.noWidthSync = true;
     }
@@ -3724,7 +3732,11 @@ class NileSelectEditor {
                 (_b = this.select) === null || _b === void 0 ? void 0 : _b.reportValidity();
                 return;
             }
-            context.onSave(this.parseValue(customEvent.detail.value));
+            // Only save immediately for single-select
+            // Multi-select saves on outside click
+            if (!this.options.multiple) {
+                context.onSave(this.parseValue(customEvent.detail.value));
+            }
         };
         this.select.addEventListener('nile-change', changeHandler);
         this.eventListeners.push({ event: 'nile-change', handler: changeHandler });
@@ -3757,6 +3769,36 @@ class NileSelectEditor {
             this.select.addEventListener('nile-search', searchHandler);
             this.eventListeners.push({ event: 'nile-search', handler: searchHandler });
         }
+        // For multi-select: detect clicks outside portal and select
+        if (this.options.multiple) {
+            const documentClickHandler = (e) => {
+                var _a, _b, _c, _d;
+                const mouseEvent = e;
+                const target = mouseEvent.target;
+                // Check if portal div exists (might take a moment to render)
+                if (!this.portalDiv) {
+                    this.portalDiv = document.querySelector('.nile-select-portal-append');
+                }
+                // Determine if click is inside the select or portal
+                const clickedInsideSelect = (_a = this.select) === null || _a === void 0 ? void 0 : _a.contains(target);
+                const clickedInsidePortal = (_b = this.portalDiv) === null || _b === void 0 ? void 0 : _b.contains(target);
+                // If clicked outside both select and portal, save and close
+                if (!clickedInsideSelect && !clickedInsidePortal) {
+                    if (validateOnSave && !((_c = this.select) === null || _c === void 0 ? void 0 : _c.checkValidity())) {
+                        (_d = this.select) === null || _d === void 0 ? void 0 : _d.reportValidity();
+                        return;
+                    }
+                    context.onSave(this.getCurrentValue());
+                }
+                // Otherwise, click is inside - do nothing (dropdown stays open)
+            };
+            // Add to document with capture phase
+            document.addEventListener('click', documentClickHandler, true);
+            this.eventListeners.push({
+                event: 'document-click',
+                handler: documentClickHandler
+            });
+        }
     }
     /**
      * Parse value based on selection mode
@@ -3785,11 +3827,19 @@ class NileSelectEditor {
         if (this.select) {
             this.eventListeners.forEach(({ event, handler }) => {
                 var _a;
-                (_a = this.select) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, handler);
+                if (event === 'document-click') {
+                    // Remove from document for multi-select click handler
+                    document.removeEventListener('click', handler, true);
+                }
+                else {
+                    // Remove from select element
+                    (_a = this.select) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, handler);
+                }
             });
             this.eventListeners = [];
             this.select.remove();
             this.select = undefined;
+            this.portalDiv = undefined; // Clean up portal reference
         }
     }
     focus() {
@@ -7561,7 +7611,7 @@ class StTableComponent {
         }
     }
     ngOnChanges(changes) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         // Validate configuration when tableConfig changes
         if (changes['tableConfig'] && !changes['tableConfig'].firstChange && this.tableConfig) {
             this.mergedConfig = mergeTableConfig(this.tableConfig);
@@ -7598,15 +7648,19 @@ class StTableComponent {
         }
         // Handle tableState input changes (when external state is provided, e.g., in workbook)
         if (changes['tableState'] && !changes['tableState'].firstChange && this.tableState) {
-            // Unsubscribe from old tableState's focus observable to prevent memory leaks
-            (_a = this.focusSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            // Unsubscribe from all old tableState observables to prevent memory leaks
+            (_a = this.stateSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            (_b = this.validationSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+            (_c = this.focusSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
+            // Resubscribe to new tableState's observables
+            this.subscribeToExternalTableState();
             // Reinitialize keyboard navigation with new tableState
             if (this.isKeyboardNavigationEnabled()) {
                 this.initializeKeyboardNavigation();
             }
         }
         // Recalculate virtual scroll when data changes
-        if ((changes['data'] || changes['cellGrid']) && !((_b = changes['data']) === null || _b === void 0 ? void 0 : _b.firstChange)) {
+        if ((changes['data'] || changes['cellGrid']) && !((_d = changes['data']) === null || _d === void 0 ? void 0 : _d.firstChange)) {
             if (this.isVirtualScrollEnabled()) {
                 const currentState = this.virtualScrollState$.value;
                 if (currentState) {
@@ -7653,19 +7707,29 @@ class StTableComponent {
             });
         }
         // Subscribe to internal state changes and re-emit
-        this.stateSubscription = this.internalTableState.stateChange$
-            .subscribe(event => {
+        this.subscribeToInternalState();
+        // Subscribe to validation state changes and re-emit
+        this.subscribeToValidationState();
+    }
+    subscribeToValidationState() {
+        if (!this.internalTableState)
+            return;
+        this.validationSubscription = this.internalTableState.tableValidationState$
+            .subscribe(state => {
+            this.validationStateChange.emit(state);
+        });
+    }
+    subscribeToInternalState() {
+        var _a;
+        if (!this.internalTableState)
+            return;
+        this.stateSubscription = (_a = this.internalTableState) === null || _a === void 0 ? void 0 : _a.stateChange$.subscribe(event => {
             this.stateChange.emit(event);
             // Update visible columns and cell grid on visibility changes
             if (event.type === 'column-visibility' || event.type === 'column-config') {
                 this.updateVisibleData();
             }
         });
-        // Subscribe to validation state changes and re-emit
-        this.validationSubscription = this.internalTableState.tableValidationState$
-            .subscribe(state => {
-            this.validationStateChange.emit(state);
-        });
     }
     /**
      * Subscribe to external TableState changes
@@ -7682,10 +7746,7 @@ class StTableComponent {
             }
         });
         // Subscribe to validation state changes and re-emit
-        this.validationSubscription = this.tableState.tableValidationState$
-            .subscribe(state => {
-            this.validationStateChange.emit(state);
-        });
+        this.subscribeToValidationState();
     }
     /**
      * Create cell grid from raw data
@@ -8646,10 +8707,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;background-color:#fff;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:#fff}.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;background-color:#fff;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: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 } });
 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;background-color:#fff;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:#fff}.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;background-color:#fff;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: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"] }]
         }], ctorParameters: function () { return [{ type: JsonSchemaValidatorService }, { type: ValidationLoggerService }, { type: VirtualScrollService }]; }, propDecorators: { tableConfig: [{
                 type: Input
             }], data: [{
@@ -9509,8 +9570,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
         }] });
 
 class StWorkbookComponent {
-    constructor(autosaveService) {
+    constructor(autosaveService, cdr) {
         this.autosaveService = autosaveService;
+        this.cdr = cdr;
         /**
          * Map of sheet ID to data array
          */
@@ -9560,9 +9622,9 @@ class StWorkbookComponent {
          */
         this.currentTableConfig = null;
         /**
-         * Current table data (for active sheet)
+         * Current table data (for active sheet) - using BehaviorSubject for reactive updates
          */
-        this.currentTableData = [];
+        this.currentTableData$ = new BehaviorSubject([]);
         /**
          * Current table state (for active sheet)
          */
@@ -9618,6 +9680,16 @@ class StWorkbookComponent {
     }
     ngOnInit() {
         this.initializeComponent();
+        // Subscribe to sheetsData changes to update currentTableData$ reactively
+        this.sheetsData.pipe(takeUntil(this.destroy$)).subscribe((dataMap) => {
+            if (this.selectedSheet && dataMap) {
+                const newData = dataMap.get(this.selectedSheet.id);
+                if (newData) {
+                    // Update the BehaviorSubject - st-table will react automatically
+                    this.currentTableData$.next([...newData]);
+                }
+            }
+        });
         // Initialize autosave if enabled
         const autosaveConfig = this.config.autosave || DEFAULT_AUTOSAVE_CONFIG;
         this.autosaveEnabled = autosaveConfig.enabled;
@@ -9680,6 +9752,9 @@ class StWorkbookComponent {
         const sheet = this.sheets[this.activeSheetIndex];
         if (!sheet)
             return;
+        // Update selected sheet reference for data subscriptions
+        this.selectedSheet = sheet;
+        this.selectedSheetIndex = this.activeSheetIndex;
         // Create a fresh TableState for this sheet (lazy initialization)
         // This ensures the table reinitializes with new config and state
         const tableState = new TableState(sheet.tableConfig.columns, {
@@ -9689,7 +9764,7 @@ class StWorkbookComponent {
         // Update current table properties (triggers Angular change detection)
         // The st-table component will detect these changes and reinitialize
         this.currentTableConfig = Object.assign({}, sheet.tableConfig);
-        this.currentTableData = ((_c = this.sheetsData.getValue()) === null || _c === void 0 ? void 0 : _c.get(sheet.id)) || [];
+        this.currentTableData$.next(((_c = this.sheetsData.getValue()) === null || _c === void 0 ? void 0 : _c.get(sheet.id)) || []);
         this.currentTableState = tableState;
         // Update component key to force DOM re-creation (true lazy loading)
         // This ensures complete reinitialization of st-table component
@@ -9962,12 +10037,12 @@ class StWorkbookComponent {
         window.addEventListener('beforeunload', this.beforeUnloadHandler);
     }
 }
-StWorkbookComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StWorkbookComponent, deps: [{ token: AutosaveService }], target: i0.ɵɵFactoryTarget.Component });
-StWorkbookComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StWorkbookComponent, selector: "st-workbook", inputs: { config: "config", sheetsData: "sheetsData", state: "state" }, outputs: { sheetChanged: "sheetChanged", addSheet: "addSheet", sheetTabAction: "sheetTabAction", workbookAction: "workbookAction", cellChange: "cellChange", cellSave: "cellSave", tableStateChange: "tableStateChange", fullscreenToggle: "fullscreenToggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen$ | async\">\n  <nile-tab-group [activeIndex]=\"activeSheetIndex\">\n    \n    <!-- Sheet Tabs (one per sheet) -->\n    <nile-tab *ngFor=\"let sheet of sheets; let i = index\"\n              slot=\"nav\" \n              panel=\"shared-panel\"\n              [class.active]=\"i === activeSheetIndex\"\n              (click)=\"onTabChange(i)\">\n      <div class=\"sheet-tab-content\">\n        <span class=\"sheet-name\">{{ sheet.name }}</span>\n        \n        <!-- Tab actions dropdown button -->\n        <button class=\"tab-actions-button\"\n                (click)=\"openTabActions($event, sheet, i)\"\n                *ngIf=\"hasTabActions(sheet)\">\n          <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n        </button>\n      </div>\n    </nile-tab>\n    \n    <!-- Toolbar Tab (for workbook controls) -->\n    <nile-tab slot=\"nav\" \n              panel=\"shared-panel\"\n              class=\"workbook-toolbar-tab\"\n              [disabled]=\"true\">\n      <div class=\"workbook-toolbar-content\">\n        <!-- Autosave Indicator -->\n        <div class=\"autosave-indicator\" *ngIf=\"autosaveEnabled\">\n          <nile-icon \n            *ngIf=\"!isSaving && lastSaveTime\" \n            name=\"save\" \n            size=\"14\"\n            [title]=\"'Saved at ' + (lastSaveTime | date:'HH:mm:ss')\">\n          </nile-icon>\n          <nile-icon \n            *ngIf=\"isSaving\" \n            name=\"loader\" \n            size=\"14\"\n            title=\"Saving...\">\n          </nile-icon>\n        </div>\n\n        <!-- Workbook Actions Dropdown -->\n        <button class=\"workbook-actions-button\"\n                *ngIf=\"config.workbookActions && config.workbookActions.length > 0\"\n                (click)=\"toggleWorkbookActions($event)\"\n                title=\"Workbook Actions\">\n          <nile-icon name=\"settings\"></nile-icon>\n        </button>\n        \n        <!-- Add Sheet Button -->\n        <button class=\"add-sheet-button\"\n                *ngIf=\"canAddSheet\"\n                (click)=\"onAddSheet()\"\n                title=\"Add Sheet\">\n          <nile-icon name=\"plus\"></nile-icon>\n        </button>\n        \n        <!-- Fullscreen Button -->\n        <button class=\"fullscreen-button\"\n                *ngIf=\"config.display?.allowFullscreen !== false\"\n                (click)=\"toggleFullscreen()\"\n                [title]=\"(isFullscreen$ | async) ? 'Exit Fullscreen' : 'Fullscreen'\">\n          <nile-icon [name]=\"(isFullscreen$ | async) ? 'collapse' : 'expand-06'\"></nile-icon>\n        </button>\n      </div>\n    </nile-tab>\n    \n    <!-- Single Shared Tab Panel -->\n    <nile-tab-panel name=\"shared-panel\">\n      <!-- Lazy loading strategy: table is destroyed and recreated with new config/state when sheet changes -->\n      <!-- The componentKey ensures complete reinitialization of st-table for each sheet -->\n      <st-table *ngIf=\"currentTableConfig && currentTableState && tableComponentKey\"\n                [attr.data-sheet-key]=\"tableComponentKey\"\n                [tableConfig]=\"currentTableConfig\"\n                [data]=\"currentTableData\"\n                [tableState]=\"currentTableState\"\n                (cellChange)=\"onCellChange($event)\"\n                (cellSave)=\"onCellSave($event)\"\n                (stateChange)=\"onTableStateChange($event)\">\n      </st-table>\n    </nile-tab-panel>\n    \n  </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n<div class=\"tab-actions-dropdown\" \n     *ngIf=\"tabActionsOpen\"\n     [ngStyle]=\"tabActionsPosition\">\n  <div class=\"dropdown-backdrop\" (click)=\"closeTabActions()\"></div>\n  <div class=\"dropdown-menu\">\n    <nile-menu>\n      <nile-menu-item *ngFor=\"let action of selectedSheet?.tabActions\" \n                      (click)=\"onTabActionClick(action, $event)\">\n        <nile-icon *ngIf=\"action.icon\" slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n        {{ action.label }}\n      </nile-menu-item>\n    </nile-menu>\n  </div>\n</div>\n\n<!-- Workbook Actions Dropdown -->\n<div class=\"workbook-actions-dropdown\"\n     *ngIf=\"workbookActionsOpen\"\n     [ngStyle]=\"workbookActionsPosition\">\n  <div class=\"dropdown-backdrop\" (click)=\"closeWorkbookActions()\"></div>\n  <div class=\"dropdown-menu\">\n    <nile-menu>\n      <nile-menu-item *ngFor=\"let action of visibleWorkbookActions\"\n                      [class.disabled]=\"isActionDisabled(action)\"\n                      (click)=\"onWorkbookActionClick(action, $event)\">\n        <nile-icon *ngIf=\"action.icon\" slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n        {{ action.label }}\n      </nile-menu-item>\n    </nile-menu>\n  </div>\n</div>\n\n<!-- Fullscreen Backdrop -->\n<div class=\"fullscreen-backdrop\" \n     *ngIf=\"isFullscreen$ | async\"\n     (click)=\"toggleFullscreen()\">\n</div>\n\n", styles: ["@import\"@aquera/nile/lib/styles/variables.css\";:host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:white;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200)}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], components: [{ type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i1.AsyncPipe, "date": i1.DatePipe } });
+StWorkbookComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StWorkbookComponent, deps: [{ token: AutosaveService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+StWorkbookComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StWorkbookComponent, selector: "st-workbook", inputs: { config: "config", sheetsData: "sheetsData", state: "state" }, outputs: { sheetChanged: "sheetChanged", addSheet: "addSheet", sheetTabAction: "sheetTabAction", workbookAction: "workbookAction", cellChange: "cellChange", cellSave: "cellSave", tableStateChange: "tableStateChange", fullscreenToggle: "fullscreenToggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen$ | async\">\n  <nile-tab-group [activeIndex]=\"activeSheetIndex\">\n    \n    <!-- Sheet Tabs (one per sheet) -->\n    <nile-tab *ngFor=\"let sheet of sheets; let i = index\"\n              slot=\"nav\" \n              panel=\"shared-panel\"\n              [class.active]=\"i === activeSheetIndex\"\n              (click)=\"onTabChange(i)\">\n      <div class=\"sheet-tab-content\">\n        <span class=\"sheet-name\">{{ sheet.name }}</span>\n        \n        <!-- Tab actions dropdown button -->\n        <button class=\"tab-actions-button\"\n                (click)=\"openTabActions($event, sheet, i)\"\n                *ngIf=\"hasTabActions(sheet)\">\n          <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n        </button>\n      </div>\n    </nile-tab>\n    \n    <!-- Toolbar Tab (for workbook controls) -->\n    <nile-tab slot=\"nav\" \n              panel=\"shared-panel\"\n              class=\"workbook-toolbar-tab\"\n              [disabled]=\"true\">\n      <div class=\"workbook-toolbar-content\">\n        <!-- Autosave Indicator -->\n        <div class=\"autosave-indicator\" *ngIf=\"autosaveEnabled\">\n          <nile-icon \n            *ngIf=\"!isSaving && lastSaveTime\" \n            name=\"save\" \n            size=\"14\"\n            [title]=\"'Saved at ' + (lastSaveTime | date:'HH:mm:ss')\">\n          </nile-icon>\n          <nile-icon \n            *ngIf=\"isSaving\" \n            name=\"loader\" \n            size=\"14\"\n            title=\"Saving...\">\n          </nile-icon>\n        </div>\n\n        <!-- Workbook Actions Dropdown -->\n        <button class=\"workbook-actions-button\"\n                *ngIf=\"config.workbookActions && config.workbookActions.length > 0\"\n                (click)=\"toggleWorkbookActions($event)\"\n                title=\"Workbook Actions\">\n          <nile-icon name=\"settings\"></nile-icon>\n        </button>\n        \n        <!-- Add Sheet Button -->\n        <button class=\"add-sheet-button\"\n                *ngIf=\"canAddSheet\"\n                (click)=\"onAddSheet()\"\n                title=\"Add Sheet\">\n          <nile-icon name=\"plus\"></nile-icon>\n        </button>\n        \n        <!-- Fullscreen Button -->\n        <button class=\"fullscreen-button\"\n                *ngIf=\"config.display?.allowFullscreen !== false\"\n                (click)=\"toggleFullscreen()\"\n                [title]=\"(isFullscreen$ | async) ? 'Exit Fullscreen' : 'Fullscreen'\">\n          <nile-icon [name]=\"(isFullscreen$ | async) ? 'collapse' : 'expand-06'\"></nile-icon>\n        </button>\n      </div>\n    </nile-tab>\n    \n    <!-- Single Shared Tab Panel -->\n    <nile-tab-panel name=\"shared-panel\">\n      <!-- Lazy loading strategy: table is destroyed and recreated with new config/state when sheet changes -->\n      <!-- The componentKey ensures complete reinitialization of st-table for each sheet -->\n      <st-table *ngIf=\"currentTableConfig && currentTableState && tableComponentKey\"\n                [attr.data-sheet-key]=\"tableComponentKey\"\n                [tableConfig]=\"currentTableConfig\"\n                [data$]=\"currentTableData$\"\n                [tableState]=\"currentTableState\"\n                (cellChange)=\"onCellChange($event)\"\n                (cellSave)=\"onCellSave($event)\"\n                (stateChange)=\"onTableStateChange($event)\">\n      </st-table>\n    </nile-tab-panel>\n    \n  </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n<div class=\"tab-actions-dropdown\" \n     *ngIf=\"tabActionsOpen\"\n     [ngStyle]=\"tabActionsPosition\">\n  <div class=\"dropdown-backdrop\" (click)=\"closeTabActions()\"></div>\n  <div class=\"dropdown-menu\">\n    <nile-menu>\n      <nile-menu-item *ngFor=\"let action of selectedSheet?.tabActions\" \n                      (click)=\"onTabActionClick(action, $event)\">\n        <nile-icon *ngIf=\"action.icon\" slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n        {{ action.label }}\n      </nile-menu-item>\n    </nile-menu>\n  </div>\n</div>\n\n<!-- Workbook Actions Dropdown -->\n<div class=\"workbook-actions-dropdown\"\n     *ngIf=\"workbookActionsOpen\"\n     [ngStyle]=\"workbookActionsPosition\">\n  <div class=\"dropdown-backdrop\" (click)=\"closeWorkbookActions()\"></div>\n  <div class=\"dropdown-menu\">\n    <nile-menu>\n      <nile-menu-item *ngFor=\"let action of visibleWorkbookActions\"\n                      [class.disabled]=\"isActionDisabled(action)\"\n                      (click)=\"onWorkbookActionClick(action, $event)\">\n        <nile-icon *ngIf=\"action.icon\" slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n        {{ action.label }}\n      </nile-menu-item>\n    </nile-menu>\n  </div>\n</div>\n\n<!-- Fullscreen Backdrop -->\n<div class=\"fullscreen-backdrop\" \n     *ngIf=\"isFullscreen$ | async\"\n     (click)=\"toggleFullscreen()\">\n</div>\n\n", styles: ["@import\"@aquera/nile/lib/styles/variables.css\";:host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:white;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200)}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], components: [{ type: StTableComponent, selector: "st-table", inputs: ["tableConfig", "data", "data$", "tableState", "enableSorting", "enableFiltering", "validateConfig"], outputs: ["stateChange", "dataChange", "cellEdit", "cellSave", "cellCancel", "cellChange", "columnResized", "columnMoved", "configValidationErrors", "columnAdded", "rowAction", "validationStateChange"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i1.AsyncPipe, "date": i1.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StWorkbookComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-workbook', template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen$ | async\">\n  <nile-tab-group [activeIndex]=\"activeSheetIndex\">\n    \n    <!-- Sheet Tabs (one per sheet) -->\n    <nile-tab *ngFor=\"let sheet of sheets; let i = index\"\n              slot=\"nav\" \n              panel=\"shared-panel\"\n              [class.active]=\"i === activeSheetIndex\"\n              (click)=\"onTabChange(i)\">\n      <div class=\"sheet-tab-content\">\n        <span class=\"sheet-name\">{{ sheet.name }}</span>\n        \n        <!-- Tab actions dropdown button -->\n        <button class=\"tab-actions-button\"\n                (click)=\"openTabActions($event, sheet, i)\"\n                *ngIf=\"hasTabActions(sheet)\">\n          <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n        </button>\n      </div>\n    </nile-tab>\n    \n    <!-- Toolbar Tab (for workbook controls) -->\n    <nile-tab slot=\"nav\" \n              panel=\"shared-panel\"\n              class=\"workbook-toolbar-tab\"\n              [disabled]=\"true\">\n      <div class=\"workbook-toolbar-content\">\n        <!-- Autosave Indicator -->\n        <div class=\"autosave-indicator\" *ngIf=\"autosaveEnabled\">\n          <nile-icon \n            *ngIf=\"!isSaving && lastSaveTime\" \n            name=\"save\" \n            size=\"14\"\n            [title]=\"'Saved at ' + (lastSaveTime | date:'HH:mm:ss')\">\n          </nile-icon>\n          <nile-icon \n            *ngIf=\"isSaving\" \n            name=\"loader\" \n            size=\"14\"\n            title=\"Saving...\">\n          </nile-icon>\n        </div>\n\n        <!-- Workbook Actions Dropdown -->\n        <button class=\"workbook-actions-button\"\n                *ngIf=\"config.workbookActions && config.workbookActions.length > 0\"\n                (click)=\"toggleWorkbookActions($event)\"\n                title=\"Workbook Actions\">\n          <nile-icon name=\"settings\"></nile-icon>\n        </button>\n        \n        <!-- Add Sheet Button -->\n        <button class=\"add-sheet-button\"\n                *ngIf=\"canAddSheet\"\n                (click)=\"onAddSheet()\"\n                title=\"Add Sheet\">\n          <nile-icon name=\"plus\"></nile-icon>\n        </button>\n        \n        <!-- Fullscreen Button -->\n        <button class=\"fullscreen-button\"\n                *ngIf=\"config.display?.allowFullscreen !== false\"\n                (click)=\"toggleFullscreen()\"\n                [title]=\"(isFullscreen$ | async) ? 'Exit Fullscreen' : 'Fullscreen'\">\n          <nile-icon [name]=\"(isFullscreen$ | async) ? 'collapse' : 'expand-06'\"></nile-icon>\n        </button>\n      </div>\n    </nile-tab>\n    \n    <!-- Single Shared Tab Panel -->\n    <nile-tab-panel name=\"shared-panel\">\n      <!-- Lazy loading strategy: table is destroyed and recreated with new config/state when sheet changes -->\n      <!-- The componentKey ensures complete reinitialization of st-table for each sheet -->\n      <st-table *ngIf=\"currentTableConfig && currentTableState && tableComponentKey\"\n                [attr.data-sheet-key]=\"tableComponentKey\"\n                [tableConfig]=\"currentTableConfig\"\n                [data]=\"currentTableData\"\n                [tableState]=\"currentTableState\"\n                (cellChange)=\"onCellChange($event)\"\n                (cellSave)=\"onCellSave($event)\"\n                (stateChange)=\"onTableStateChange($event)\">\n      </st-table>\n    </nile-tab-panel>\n    \n  </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n<div class=\"tab-actions-dropdown\" \n     *ngIf=\"tabActionsOpen\"\n     [ngStyle]=\"tabActionsPosition\">\n  <div class=\"dropdown-backdrop\" (click)=\"closeTabActions()\"></div>\n  <div class=\"dropdown-menu\">\n    <nile-menu>\n      <nile-menu-item *ngFor=\"let action of selectedSheet?.tabActions\" \n                      (click)=\"onTabActionClick(action, $event)\">\n        <nile-icon *ngIf=\"action.icon\" slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n        {{ action.label }}\n      </nile-menu-item>\n    </nile-menu>\n  </div>\n</div>\n\n<!-- Workbook Actions Dropdown -->\n<div class=\"workbook-actions-dropdown\"\n     *ngIf=\"workbookActionsOpen\"\n     [ngStyle]=\"workbookActionsPosition\">\n  <div class=\"dropdown-backdrop\" (click)=\"closeWorkbookActions()\"></div>\n  <div class=\"dropdown-menu\">\n    <nile-menu>\n      <nile-menu-item *ngFor=\"let action of visibleWorkbookActions\"\n                      [class.disabled]=\"isActionDisabled(action)\"\n                      (click)=\"onWorkbookActionClick(action, $event)\">\n        <nile-icon *ngIf=\"action.icon\" slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n        {{ action.label }}\n      </nile-menu-item>\n    </nile-menu>\n  </div>\n</div>\n\n<!-- Fullscreen Backdrop -->\n<div class=\"fullscreen-backdrop\" \n     *ngIf=\"isFullscreen$ | async\"\n     (click)=\"toggleFullscreen()\">\n</div>\n\n", styles: ["@import\"@aquera/nile/lib/styles/variables.css\";:host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:white;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200)}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: AutosaveService }]; }, propDecorators: { config: [{
+            args: [{ selector: 'st-workbook', template: "<div class=\"workbook-container\" [class.fullscreen]=\"isFullscreen$ | async\">\n  <nile-tab-group [activeIndex]=\"activeSheetIndex\">\n    \n    <!-- Sheet Tabs (one per sheet) -->\n    <nile-tab *ngFor=\"let sheet of sheets; let i = index\"\n              slot=\"nav\" \n              panel=\"shared-panel\"\n              [class.active]=\"i === activeSheetIndex\"\n              (click)=\"onTabChange(i)\">\n      <div class=\"sheet-tab-content\">\n        <span class=\"sheet-name\">{{ sheet.name }}</span>\n        \n        <!-- Tab actions dropdown button -->\n        <button class=\"tab-actions-button\"\n                (click)=\"openTabActions($event, sheet, i)\"\n                *ngIf=\"hasTabActions(sheet)\">\n          <nile-icon name=\"arrowdown\" size=\"14\"></nile-icon>\n        </button>\n      </div>\n    </nile-tab>\n    \n    <!-- Toolbar Tab (for workbook controls) -->\n    <nile-tab slot=\"nav\" \n              panel=\"shared-panel\"\n              class=\"workbook-toolbar-tab\"\n              [disabled]=\"true\">\n      <div class=\"workbook-toolbar-content\">\n        <!-- Autosave Indicator -->\n        <div class=\"autosave-indicator\" *ngIf=\"autosaveEnabled\">\n          <nile-icon \n            *ngIf=\"!isSaving && lastSaveTime\" \n            name=\"save\" \n            size=\"14\"\n            [title]=\"'Saved at ' + (lastSaveTime | date:'HH:mm:ss')\">\n          </nile-icon>\n          <nile-icon \n            *ngIf=\"isSaving\" \n            name=\"loader\" \n            size=\"14\"\n            title=\"Saving...\">\n          </nile-icon>\n        </div>\n\n        <!-- Workbook Actions Dropdown -->\n        <button class=\"workbook-actions-button\"\n                *ngIf=\"config.workbookActions && config.workbookActions.length > 0\"\n                (click)=\"toggleWorkbookActions($event)\"\n                title=\"Workbook Actions\">\n          <nile-icon name=\"settings\"></nile-icon>\n        </button>\n        \n        <!-- Add Sheet Button -->\n        <button class=\"add-sheet-button\"\n                *ngIf=\"canAddSheet\"\n                (click)=\"onAddSheet()\"\n                title=\"Add Sheet\">\n          <nile-icon name=\"plus\"></nile-icon>\n        </button>\n        \n        <!-- Fullscreen Button -->\n        <button class=\"fullscreen-button\"\n                *ngIf=\"config.display?.allowFullscreen !== false\"\n                (click)=\"toggleFullscreen()\"\n                [title]=\"(isFullscreen$ | async) ? 'Exit Fullscreen' : 'Fullscreen'\">\n          <nile-icon [name]=\"(isFullscreen$ | async) ? 'collapse' : 'expand-06'\"></nile-icon>\n        </button>\n      </div>\n    </nile-tab>\n    \n    <!-- Single Shared Tab Panel -->\n    <nile-tab-panel name=\"shared-panel\">\n      <!-- Lazy loading strategy: table is destroyed and recreated with new config/state when sheet changes -->\n      <!-- The componentKey ensures complete reinitialization of st-table for each sheet -->\n      <st-table *ngIf=\"currentTableConfig && currentTableState && tableComponentKey\"\n                [attr.data-sheet-key]=\"tableComponentKey\"\n                [tableConfig]=\"currentTableConfig\"\n                [data$]=\"currentTableData$\"\n                [tableState]=\"currentTableState\"\n                (cellChange)=\"onCellChange($event)\"\n                (cellSave)=\"onCellSave($event)\"\n                (stateChange)=\"onTableStateChange($event)\">\n      </st-table>\n    </nile-tab-panel>\n    \n  </nile-tab-group>\n</div>\n\n<!-- Tab Actions Dropdown -->\n<div class=\"tab-actions-dropdown\" \n     *ngIf=\"tabActionsOpen\"\n     [ngStyle]=\"tabActionsPosition\">\n  <div class=\"dropdown-backdrop\" (click)=\"closeTabActions()\"></div>\n  <div class=\"dropdown-menu\">\n    <nile-menu>\n      <nile-menu-item *ngFor=\"let action of selectedSheet?.tabActions\" \n                      (click)=\"onTabActionClick(action, $event)\">\n        <nile-icon *ngIf=\"action.icon\" slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n        {{ action.label }}\n      </nile-menu-item>\n    </nile-menu>\n  </div>\n</div>\n\n<!-- Workbook Actions Dropdown -->\n<div class=\"workbook-actions-dropdown\"\n     *ngIf=\"workbookActionsOpen\"\n     [ngStyle]=\"workbookActionsPosition\">\n  <div class=\"dropdown-backdrop\" (click)=\"closeWorkbookActions()\"></div>\n  <div class=\"dropdown-menu\">\n    <nile-menu>\n      <nile-menu-item *ngFor=\"let action of visibleWorkbookActions\"\n                      [class.disabled]=\"isActionDisabled(action)\"\n                      (click)=\"onWorkbookActionClick(action, $event)\">\n        <nile-icon *ngIf=\"action.icon\" slot=\"prefix\" size=\"14\" [name]=\"action.icon\"></nile-icon>\n        {{ action.label }}\n      </nile-menu-item>\n    </nile-menu>\n  </div>\n</div>\n\n<!-- Fullscreen Backdrop -->\n<div class=\"fullscreen-backdrop\" \n     *ngIf=\"isFullscreen$ | async\"\n     (click)=\"toggleFullscreen()\">\n</div>\n\n", styles: ["@import\"@aquera/nile/lib/styles/variables.css\";:host{display:block;width:100%;height:100%}.workbook-container{display:flex;flex-direction:column;height:100%;background:white;border:1px solid var(--nile-color-neutral-200);border-radius:4px;overflow:hidden}.workbook-container.fullscreen{position:fixed;inset:0;z-index:2000;border:none;border-radius:0}.workbook-container nile-tab-group{height:100%;display:flex;flex-direction:column}.sheet-tab-content{display:flex;align-items:center;gap:8px;padding:0 4px}.sheet-tab-content .sheet-name{font-size:12px;font-weight:500;font-family:var(--nile-font-family-sans-serif);color:#000}.sheet-tab-content .tab-actions-button{width:20px;height:20px;padding:0;background:transparent;border:none;cursor:pointer}.workbook-toolbar-tab{margin-left:auto!important;pointer-events:auto!important;border-left:1px solid var(--nile-color-neutral-200)}.workbook-toolbar-tab .workbook-toolbar-content{display:flex;gap:4px;align-items:center;padding:0 8px}.workbook-toolbar-tab .workbook-toolbar-content .autosave-indicator{display:flex;align-items:center;margin-right:8px;color:var(--nile-color-success-500)}.workbook-toolbar-tab button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;color:var(--nile-color-neutral-600)}.workbook-toolbar-tab button:hover{background-color:var(--nile-color-neutral-100);color:var(--nile-color-neutral-900)}.workbook-toolbar-tab button:active{background-color:var(--nile-color-neutral-200)}.workbook-toolbar-tab button nile-icon{font-size:16px}.tab-actions-dropdown{position:fixed;z-index:1001}.tab-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.tab-actions-dropdown .dropdown-menu{position:relative;min-width:180px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.tab-actions-dropdown .dropdown-menu nile-menu{display:block}.workbook-actions-dropdown{position:fixed;z-index:1001}.workbook-actions-dropdown .dropdown-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;z-index:1000}.workbook-actions-dropdown .dropdown-menu{position:relative;min-width:200px;background:white;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:1001;overflow:hidden}.workbook-actions-dropdown .dropdown-menu nile-menu{display:block}.fullscreen-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1999;cursor:pointer}nile-tab-group::part(nav){background-color:#fafafa}nile-tab-group::part(active-tab-indicator-path){background:none}nile-tab-group::part(active-tab-indicator){border-bottom:none}nile-tab-group::part(tabs){gap:0}nile-tab-group nile-tab{border:1px solid #e0e0e0;border-top-left-radius:6px;border-top-right-radius:6px}nile-tab-group nile-tab::part(base){padding-left:.5rem;padding-top:.5rem;padding-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}nile-tab-group nile-tab.active{background-color:#fff;color:#000}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: AutosaveService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], sheetsData: [{
                 type: Input