@aquera/ngx-smart-table 0.0.9-alpha → 0.0.11-alpha

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

@@ -990,6 +990,9 @@ class TableState {
         this._rowNumberWidth = 0;
         // Settings column width for sticky offset calculation
         this._settingsColumnWidth = 0;
+        // Pending focus position after a new row is added
+        // Set when requestAddRow is emitted, cleared when focus is applied
+        this._pendingFocusAfterRowAdd = null;
         // Dimensions for boundary checking
         this._rowCount = 0;
         this._columnCount = 0;
@@ -1022,6 +1025,9 @@ class TableState {
             lastUpdated: new Date()
         });
         this.tableValidationState$ = this._tableValidationState$.asObservable();
+        // Initialize request add row subject
+        this._requestAddRow$ = new Subject();
+        this.requestAddRow$ = this._requestAddRow$.asObservable();
         this._columnCount = columns.filter(c => c.visible !== false).length;
         // Setup observables
         this.paginationChange$ = this._pagination$.asObservable().pipe(distinctUntilChanged((a, b) => a.currentPage === b.currentPage &&
@@ -1517,10 +1523,22 @@ class TableState {
      * Set table dimensions for navigation boundaries
      */
     setDimensions(rowCount, columnCount) {
+        const previousRowCount = this._rowCount;
         this._rowCount = rowCount;
         this._columnCount = columnCount;
         // Update total rows in validation state
         this.setValidationRowCount(rowCount);
+        // Check if a new row was added and we have a pending focus
+        if (this._pendingFocusAfterRowAdd && rowCount > previousRowCount) {
+            const { columnIndex } = this._pendingFocusAfterRowAdd;
+            // Focus the last row (newly added) at the pending column
+            const newRowIndex = rowCount - 1;
+            this._pendingFocusAfterRowAdd = null; // Clear pending focus
+            // Delay focus to ensure DOM is updated
+            setTimeout(() => {
+                this.focusCell(newRowIndex, columnIndex);
+            }, 0);
+        }
     }
     /**
      * Focus a cell by position
@@ -1567,8 +1585,10 @@ class TableState {
     }
     /**
      * Move focus in a direction using NavigationDirection enum
+     * @param direction The navigation direction
+     * @param addRowOnNavigatePastEnd If true, emits requestAddRow when navigating past last row
      */
-    moveFocus(direction) {
+    moveFocus(direction, addRowOnNavigatePastEnd = false) {
         // Block navigation if any cell is editing
         if (this.isAnyCellEditing()) {
             return false;
@@ -1593,6 +1613,16 @@ class TableState {
                 newCol++;
                 break;
         }
+        // Check if navigating past last row (arrow down at bottom)
+        if (direction === NavigationDirection.DOWN && newRow >= this._rowCount) {
+            if (addRowOnNavigatePastEnd) {
+                // Store pending focus for when the new row is added
+                this._pendingFocusAfterRowAdd = { columnIndex: current.columnIndex };
+                // Emit request to add a new row, keeping the same column for focus
+                this._requestAddRow$.next({ focusColumn: current.columnIndex });
+            }
+            return false;
+        }
         if (newRow < 0 || newRow >= this._rowCount)
             return false;
         if (newCol < 0 || newCol >= this._columnCount)
@@ -1903,7 +1933,8 @@ const DEFAULT_TABLE_CONFIG = {
             actions: []
         },
         keyboardNavigation: {
-            enabled: false
+            enabled: false,
+            addRowOnNavigatePastEnd: false
         }
     },
     validation: {
@@ -7322,6 +7353,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Directive to handle keyboard navigation in table cells
  */
 class StKeyboardNavigationDirective {
+    constructor() {
+        /**
+         * When enabled, pressing arrow down at the last row will emit requestAddRow event
+         */
+        this.addRowOnNavigatePastEnd = false;
+    }
     onKeyDown(event) {
         if (!this.tableState.isNavigationActive()) {
             return;
@@ -7339,7 +7376,9 @@ class StKeyboardNavigationDirective {
                 event.preventDefault();
                 const direction = this.getDirection(event.key);
                 if (direction) {
-                    this.tableState.moveFocus(direction);
+                    // Pass addRowOnNavigatePastEnd only for DOWN direction
+                    const addRowEnabled = direction === NavigationDirection.DOWN && this.addRowOnNavigatePastEnd;
+                    this.tableState.moveFocus(direction, addRowEnabled);
                 }
                 break;
             case NavigationKey.ENTER:
@@ -7347,7 +7386,7 @@ class StKeyboardNavigationDirective {
                 if (isEditing)
                     return; // Let cell component handle save
                 event.preventDefault();
-                this.tableState.moveFocus(NavigationDirection.DOWN);
+                this.tableState.moveFocus(NavigationDirection.DOWN, this.addRowOnNavigatePastEnd);
                 break;
             case NavigationKey.TAB:
                 // Navigate left/right when NOT editing (Excel-like behavior)
@@ -7375,7 +7414,7 @@ class StKeyboardNavigationDirective {
     }
 }
 StKeyboardNavigationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StKeyboardNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-StKeyboardNavigationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: { tableState: "tableState" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+StKeyboardNavigationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.4.0", type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: { tableState: "tableState", addRowOnNavigatePastEnd: "addRowOnNavigatePastEnd" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StKeyboardNavigationDirective, decorators: [{
             type: Directive,
             args: [{
@@ -7383,6 +7422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 }]
         }], propDecorators: { tableState: [{
                 type: Input
+            }], addRowOnNavigatePastEnd: [{
+                type: Input
             }], onKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -7496,10 +7537,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 class StTableComponent {
-    constructor(schemaValidator, logger, virtualScrollService) {
+    constructor(schemaValidator, logger, virtualScrollService, elementRef) {
         this.schemaValidator = schemaValidator;
         this.logger = logger;
         this.virtualScrollService = virtualScrollService;
+        this.elementRef = elementRef;
         // Z-Index constants for template use
         this.ZIndex = TableZIndex;
         // DEPRECATED: Use tableConfig instead
@@ -7524,6 +7566,8 @@ class StTableComponent {
         this.rowAction = new EventEmitter();
         // NEW: Validation state change output
         this.validationStateChange = new EventEmitter();
+        // NEW: Request to add a new row (emitted when navigating past last row with addRowOnNavigatePastEnd enabled)
+        this.requestAddRow = new EventEmitter();
         // NEW: Optional validation flag
         this.validateConfig = false;
         this.internalData$ = new BehaviorSubject([]);
@@ -8544,6 +8588,10 @@ class StTableComponent {
         this.focusSubscription = tableState.focusedCellPosition$.subscribe(position => {
             this.updateCellFocusStates(position);
         });
+        // Subscribe to request add row events (when navigating past last row)
+        this.requestAddRowSubscription = tableState.requestAddRow$.subscribe(event => {
+            this.requestAddRow.emit(event);
+        });
         // Auto-focus first cell to enable keyboard navigation
         if (this.visibleCellGrid.length > 0 && this.visibleColumns.length > 0) {
             setTimeout(() => {
@@ -8584,9 +8632,20 @@ class StTableComponent {
     focusTdElement(rowIndex, colIndex) {
         // Use setTimeout to ensure DOM has updated
         setTimeout(() => {
+            var _a;
             // Use absolute row index for virtual scroll compatibility
             const absoluteRowIndex = this.getAbsoluteRowIndex(rowIndex);
-            const tr = document.querySelector(`tr[data-row-index="${absoluteRowIndex}"]`);
+            // Query within this component's host element to avoid selecting rows from other tables
+            const hostElement = (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (!hostElement)
+                return;
+            // First, ensure the table container has focus for keyboard navigation
+            // The keyboard navigation directive listens on the .st-table container
+            const tableContainer = hostElement.querySelector('.st-table');
+            if (tableContainer && typeof tableContainer.focus === 'function') {
+                tableContainer.focus({ preventScroll: true });
+            }
+            const tr = hostElement.querySelector(`tr[data-row-index="${absoluteRowIndex}"]`);
             if (tr) {
                 const cells = tr.querySelectorAll('td:not(.settings-column):not(.row-number-cell)');
                 const targetCell = cells[colIndex];
@@ -8626,14 +8685,18 @@ class StTableComponent {
             }
             return;
         }
-        // Horizontal scrolling
-        if (cellRect.left < visibleLeft) {
-            // Cell is hidden behind left sticky columns
-            scrollContainer.scrollLeft -= (visibleLeft - cellRect.left);
-        }
-        else if (cellRect.right > visibleRight) {
-            // Cell is hidden behind right sticky columns
-            scrollContainer.scrollLeft += (cellRect.right - visibleRight);
+        // Check if cell is already fully visible horizontally (no scroll needed)
+        const isCellFullyVisibleHorizontally = cellRect.left >= visibleLeft && cellRect.right <= visibleRight;
+        // Only scroll horizontally if cell is NOT fully visible
+        if (!isCellFullyVisibleHorizontally) {
+            if (cellRect.left < visibleLeft) {
+                // Cell is hidden behind left sticky columns
+                scrollContainer.scrollLeft -= (visibleLeft - cellRect.left);
+            }
+            else if (cellRect.right > visibleRight) {
+                // Cell is hidden behind right sticky columns
+                scrollContainer.scrollLeft += (cellRect.right - visibleRight);
+            }
         }
         // Vertical scrolling
         if (cellRect.top < visibleTop) {
@@ -8647,7 +8710,7 @@ class StTableComponent {
      * Get the scroll container element
      */
     getScrollContainerElement() {
-        var _a;
+        var _a, _b;
         // Prefer cached container if already resolved
         if (this.scrollContainer) {
             return this.scrollContainer;
@@ -8657,10 +8720,15 @@ class StTableComponent {
             this.scrollContainer = this.scrollViewport.nativeElement;
             return this.scrollContainer;
         }
-        // Standard mode uses .st-table container (cache it to avoid selecting wrong table repeatedly)
-        const tableContainer = document.querySelector('.st-table');
-        if (tableContainer) {
-            this.scrollContainer = tableContainer;
+        // Standard mode uses .st-table container within THIS component's host element
+        // Use elementRef to query within the component instead of document.querySelector
+        // which would return the first table on the page
+        const hostElement = (_b = this.elementRef) === null || _b === void 0 ? void 0 : _b.nativeElement;
+        if (hostElement) {
+            const tableContainer = hostElement.querySelector('.st-table');
+            if (tableContainer) {
+                this.scrollContainer = tableContainer;
+            }
         }
         return this.scrollContainer || null;
     }
@@ -8790,22 +8858,23 @@ class StTableComponent {
         }
     }
     ngOnDestroy() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         (_a = this.stateSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         (_b = this.scrollSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         (_c = this.focusSubscription) === null || _c === void 0 ? void 0 : _c.unsubscribe();
         (_d = this.validationSubscription) === null || _d === void 0 ? void 0 : _d.unsubscribe();
         (_e = this.dataSubscription) === null || _e === void 0 ? void 0 : _e.unsubscribe();
+        (_f = this.requestAddRowSubscription) === null || _f === void 0 ? void 0 : _f.unsubscribe();
         this.virtualScrollState$.complete();
         this.internalData$.complete();
     }
 }
-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:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"], components: [{ type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized"] }], pipes: { "async": i1.AsyncPipe } });
+StTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StTableComponent, deps: [{ token: JsonSchemaValidatorService }, { token: ValidationLoggerService }, { token: VirtualScrollService }, { token: i0.ElementRef }], 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", requestAddRow: "requestAddRow" }, 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  [addRowOnNavigatePastEnd]=\"mergedConfig.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"], components: [{ type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState", "addRowOnNavigatePastEnd"] }, { 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:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: JsonSchemaValidatorService }, { type: ValidationLoggerService }, { type: VirtualScrollService }]; }, propDecorators: { tableConfig: [{
+            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  [addRowOnNavigatePastEnd]=\"mergedConfig.features?.keyboardNavigation?.addRowOnNavigatePastEnd || false\"\n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:separate;border-spacing:0}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:separate;border-spacing:0;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff;z-index:2;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;position:sticky;right:0;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb;border:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset -1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to left,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){position:relative;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-8px;top:0;bottom:0;width:8px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08));pointer-events:none;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none;background-color:#fff;box-shadow:inset 0 -1px #e6e9eb,inset 1px 0 #e6e9eb;z-index:2}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: JsonSchemaValidatorService }, { type: ValidationLoggerService }, { type: VirtualScrollService }, { type: i0.ElementRef }]; }, propDecorators: { tableConfig: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -8841,6 +8910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], validationStateChange: [{
                 type: Output
+            }], requestAddRow: [{
+                type: Output
             }], validateConfig: [{
                 type: Input
             }], scrollViewport: [{
@@ -9541,7 +9612,7 @@ class StSheetComponent {
     }
 }
 StSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StSheetComponent, selector: "st-sheet", inputs: { config: "config", data: "data", data$: "data$", state: "state" }, outputs: { sheetActionClicked: "sheetActionClicked", stateChange: "stateChange", cellChange: "cellChange", tableStateChange: "tableStateChange", dataChange: "dataChange" }, usesOnChanges: true, ngImport: i0, template: "  \n<nile-tab-group>\n  <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n    <div class=\"sheet-header\">\n      {{activeState?.name$ | async | titlecase}}\n      <st-sheet-actions \n        *ngIf=\"visibleActions.length > 0\"\n        [actions]=\"visibleActions\" \n        [sheetId]=\"config.id\"\n        (actionClicked)=\"onActionClick($event)\">\n      </st-sheet-actions>\n    </div>\n  </nile-tab>\n  <nile-tab-panel name=\"general\">\n    <st-table \n      *ngIf=\"config && activeState\"\n      [tableConfig]=\"config.tableConfig\"\n      [data]=\"data\"\n      [data$]=\"data$\"\n      [tableState]=\"activeState.tableState\"\n      (cellChange)=\"onCellChange($event)\"\n      (stateChange)=\"onTableStateChange($event)\"\n      (dataChange)=\"onDataChange($event)\">\n  </st-table>\n  </nile-tab-panel>\n</nile-tab-group>\n\n\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}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}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], components: [{ type: StSheetActionsComponent, selector: "st-sheet-actions", inputs: ["actions", "sheetId"], outputs: ["actionClicked"] }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "titlecase": i1.TitleCasePipe, "async": i1.AsyncPipe } });
+StSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StSheetComponent, selector: "st-sheet", inputs: { config: "config", data: "data", data$: "data$", state: "state" }, outputs: { sheetActionClicked: "sheetActionClicked", stateChange: "stateChange", cellChange: "cellChange", tableStateChange: "tableStateChange", dataChange: "dataChange" }, usesOnChanges: true, ngImport: i0, template: "  \n<nile-tab-group>\n  <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n    <div class=\"sheet-header\">\n      {{activeState?.name$ | async | titlecase}}\n      <st-sheet-actions \n        *ngIf=\"visibleActions.length > 0\"\n        [actions]=\"visibleActions\" \n        [sheetId]=\"config.id\"\n        (actionClicked)=\"onActionClick($event)\">\n      </st-sheet-actions>\n    </div>\n  </nile-tab>\n  <nile-tab-panel name=\"general\">\n    <st-table \n      *ngIf=\"config && activeState\"\n      [tableConfig]=\"config.tableConfig\"\n      [data]=\"data\"\n      [data$]=\"data$\"\n      [tableState]=\"activeState.tableState\"\n      (cellChange)=\"onCellChange($event)\"\n      (stateChange)=\"onTableStateChange($event)\"\n      (dataChange)=\"onDataChange($event)\">\n  </st-table>\n  </nile-tab-panel>\n</nile-tab-group>\n\n\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}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}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"], components: [{ type: StSheetActionsComponent, selector: "st-sheet-actions", inputs: ["actions", "sheetId"], outputs: ["actionClicked"] }, { 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", "requestAddRow"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "titlecase": i1.TitleCasePipe, "async": i1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-sheet', template: "  \n<nile-tab-group>\n  <nile-tab slot=\"nav\" panel=\"general\" [class.active]=\"activeTab === '1'\" (click)=\"activeTab = '1'\">\n    <div class=\"sheet-header\">\n      {{activeState?.name$ | async | titlecase}}\n      <st-sheet-actions \n        *ngIf=\"visibleActions.length > 0\"\n        [actions]=\"visibleActions\" \n        [sheetId]=\"config.id\"\n        (actionClicked)=\"onActionClick($event)\">\n      </st-sheet-actions>\n    </div>\n  </nile-tab>\n  <nile-tab-panel name=\"general\">\n    <st-table \n      *ngIf=\"config && activeState\"\n      [tableConfig]=\"config.tableConfig\"\n      [data]=\"data\"\n      [data$]=\"data$\"\n      [tableState]=\"activeState.tableState\"\n      (cellChange)=\"onCellChange($event)\"\n      (stateChange)=\"onTableStateChange($event)\"\n      (dataChange)=\"onDataChange($event)\">\n  </st-table>\n  </nile-tab-panel>\n</nile-tab-group>\n\n\n", styles: [":host{display:block;width:100%;height:100%}.sheet-container{display:flex;flex-direction:column;width:100%;height:100%}.sheet-header{display:flex;align-items:center;font-family:Colfax;color:#000}.sheet-table-wrapper{flex:1;overflow:auto;position:relative}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}nile-tab-group nile-tab-panel::part(base){padding:0;max-height:30rem}\n"] }]
@@ -9703,6 +9774,11 @@ class StWorkbookComponent {
          * Emitted when fullscreen is toggled
          */
         this.fullscreenToggle = new EventEmitter();
+        /**
+         * Emitted when user navigates past last row (arrow down at bottom)
+         * Only emitted if addRowOnNavigatePastEnd is enabled in tableConfig
+         */
+        this.requestAddRow = new EventEmitter();
         /**
          * Array of sheets
          */
@@ -9807,14 +9883,20 @@ class StWorkbookComponent {
     initializeComponent(isFirstInit = true) {
         if (!this.config)
             return;
+        const previousSheetCount = this.sheets.length;
         this.sheets = [...this.config.sheets];
+        const newSheetCount = this.sheets.length;
         // Only reset activeSheetIndex on first init, preserve it on config updates
         if (isFirstInit) {
             this.activeSheetIndex = this.config.initialActiveSheetIndex || 0;
         }
         else {
-            // Ensure activeSheetIndex is still valid after config change
-            if (this.activeSheetIndex >= this.sheets.length) {
+            // Check if a new sheet was added - switch to the new sheet
+            if (newSheetCount > previousSheetCount) {
+                this.activeSheetIndex = newSheetCount - 1; // Switch to the newly added sheet
+            }
+            // Ensure activeSheetIndex is still valid after config change (e.g., sheet deleted)
+            else if (this.activeSheetIndex >= this.sheets.length) {
                 this.activeSheetIndex = Math.max(0, this.sheets.length - 1);
             }
         }
@@ -10079,6 +10161,18 @@ class StWorkbookComponent {
     onTableStateChange(event) {
         this.tableStateChange.emit(event);
     }
+    /**
+     * Handle request to add a new row - emitted when navigating past last row
+     */
+    onRequestAddRow(event) {
+        const activeSheet = this.sheets[this.activeSheetIndex];
+        if (activeSheet) {
+            this.requestAddRow.emit({
+                sheetId: activeSheet.id,
+                focusColumn: event.focusColumn
+            });
+        }
+    }
     /**
      * Component cleanup
      */
@@ -10151,10 +10245,10 @@ class StWorkbookComponent {
     }
 }
 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      <!-- Using ngFor with trackBy to force complete reinitialization when tableComponentKey changes -->\n      <ng-container *ngFor=\"let key of [tableComponentKey]; trackBy: trackByKey\">\n        <st-table *ngIf=\"currentTableConfig && currentTableState\"\n                  [attr.data-sheet-key]=\"key\"\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      </ng-container>\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.ɵ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", requestAddRow: "requestAddRow" }, 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      <!-- Using ngFor with trackBy to force complete reinitialization when tableComponentKey changes -->\n      <ng-container *ngFor=\"let key of [tableComponentKey]; trackBy: trackByKey\">\n        <st-table *ngIf=\"currentTableConfig && currentTableState\"\n                  [attr.data-sheet-key]=\"key\"\n                  [tableConfig]=\"currentTableConfig\"\n                  [data$]=\"currentTableData$\"\n                  [tableState]=\"currentTableState\"\n                  (cellChange)=\"onCellChange($event)\"\n                  (cellSave)=\"onCellSave($event)\"\n                  (stateChange)=\"onTableStateChange($event)\"\n                  (requestAddRow)=\"onRequestAddRow($event)\">\n        </st-table>\n      </ng-container>\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", "requestAddRow"] }], 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      <!-- Using ngFor with trackBy to force complete reinitialization when tableComponentKey changes -->\n      <ng-container *ngFor=\"let key of [tableComponentKey]; trackBy: trackByKey\">\n        <st-table *ngIf=\"currentTableConfig && currentTableState\"\n                  [attr.data-sheet-key]=\"key\"\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      </ng-container>\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"] }]
+            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      <!-- Using ngFor with trackBy to force complete reinitialization when tableComponentKey changes -->\n      <ng-container *ngFor=\"let key of [tableComponentKey]; trackBy: trackByKey\">\n        <st-table *ngIf=\"currentTableConfig && currentTableState\"\n                  [attr.data-sheet-key]=\"key\"\n                  [tableConfig]=\"currentTableConfig\"\n                  [data$]=\"currentTableData$\"\n                  [tableState]=\"currentTableState\"\n                  (cellChange)=\"onCellChange($event)\"\n                  (cellSave)=\"onCellSave($event)\"\n                  (stateChange)=\"onTableStateChange($event)\"\n                  (requestAddRow)=\"onRequestAddRow($event)\">\n        </st-table>\n      </ng-container>\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: [{
@@ -10177,6 +10271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], fullscreenToggle: [{
                 type: Output
+            }], requestAddRow: [{
+                type: Output
             }] } });
 
 /**
@@ -11802,7 +11898,7 @@ class BuilderPreviewComponent {
     }
 }
 BuilderPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BuilderPreviewComponent, deps: [{ token: SampleDataGeneratorService }], target: i0.ɵɵFactoryTarget.Component });
-BuilderPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BuilderPreviewComponent, selector: "st-builder-preview", inputs: { tableConfig: "tableConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"builder-preview\">\n  <div class=\"preview-header\">\n    <h3>Live Preview</h3>\n    <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n      \u21BB Refresh\n    </button>\n  </div>\n\n  <div class=\"preview-content\">\n    <div *ngIf=\"isLoading\" class=\"loading\">\n      <p>Generating preview...</p>\n    </div>\n\n    <div *ngIf=\"!isLoading && tableConfig?.columns?.length === 0\" class=\"empty-state\">\n      <p>Add columns to see preview</p>\n    </div>\n    <ng-container *ngIf=\"tableConfig\">\n      <st-table\n        *ngIf=\"!isLoading && tableConfig!.columns!.length > 0\"\n        [tableConfig]=\"tableConfig\"\n        [data]=\"sampleData\"\n        (stateChange)=\"onStateChange($event)\">\n      </st-table>\n    </ng-container>\n\n  </div>\n</div>\n\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+BuilderPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BuilderPreviewComponent, selector: "st-builder-preview", inputs: { tableConfig: "tableConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"builder-preview\">\n  <div class=\"preview-header\">\n    <h3>Live Preview</h3>\n    <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n      \u21BB Refresh\n    </button>\n  </div>\n\n  <div class=\"preview-content\">\n    <div *ngIf=\"isLoading\" class=\"loading\">\n      <p>Generating preview...</p>\n    </div>\n\n    <div *ngIf=\"!isLoading && tableConfig?.columns?.length === 0\" class=\"empty-state\">\n      <p>Add columns to see preview</p>\n    </div>\n    <ng-container *ngIf=\"tableConfig\">\n      <st-table\n        *ngIf=\"!isLoading && tableConfig!.columns!.length > 0\"\n        [tableConfig]=\"tableConfig\"\n        [data]=\"sampleData\"\n        (stateChange)=\"onStateChange($event)\">\n      </st-table>\n    </ng-container>\n\n  </div>\n</div>\n\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\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", "requestAddRow"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BuilderPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'st-builder-preview', template: "<div class=\"builder-preview\">\n  <div class=\"preview-header\">\n    <h3>Live Preview</h3>\n    <button class=\"refresh-btn\" (click)=\"refreshPreview()\" title=\"Refresh Preview\">\n      \u21BB Refresh\n    </button>\n  </div>\n\n  <div class=\"preview-content\">\n    <div *ngIf=\"isLoading\" class=\"loading\">\n      <p>Generating preview...</p>\n    </div>\n\n    <div *ngIf=\"!isLoading && tableConfig?.columns?.length === 0\" class=\"empty-state\">\n      <p>Add columns to see preview</p>\n    </div>\n    <ng-container *ngIf=\"tableConfig\">\n      <st-table\n        *ngIf=\"!isLoading && tableConfig!.columns!.length > 0\"\n        [tableConfig]=\"tableConfig\"\n        [data]=\"sampleData\"\n        (stateChange)=\"onStateChange($event)\">\n      </st-table>\n    </ng-container>\n\n  </div>\n</div>\n\n", styles: [".builder-preview{height:100%}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.preview-header h3{margin:0;font-size:1rem;font-weight:600;color:#333}.refresh-btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;background-color:#fff;color:#333;cursor:pointer;font-size:.875rem;transition:all .2s}.refresh-btn:hover{background-color:#f5f5f5}.preview-content{overflow:auto}.loading,.empty-state{display:flex;align-items:center;justify-content:center;height:200px;color:#999;font-size:.875rem}\n"] }]