@aquera/ngx-smart-table 0.0.13-alpha → 0.0.15-alpha

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

@@ -3534,6 +3534,8 @@ class NileSelectEditor {
         this.eventListeners = [];
         this.currentOptions = [];
         this.isInitializing = false; // Flag to prevent immediate close during initialization
+        this.hasSaved = false; // Flag to prevent double-save
+        this.lastSelectedValue = ''; // Track the last selected value
         // Handle Observable options
         if (isObservable(options.options)) {
             this.optionsSubscription = options.options.subscribe(opts => {
@@ -3552,6 +3554,77 @@ class NileSelectEditor {
             }
         }
     }
+    /**
+     * Inject global styles to remove border from nile-select combobox
+     * Uses ::part selector which works across shadow DOM boundaries
+     */
+    injectBorderlessStyles() {
+        if (NileSelectEditor.stylesInjected)
+            return;
+        const styleId = 'nile-select-borderless-styles';
+        if (document.getElementById(styleId)) {
+            NileSelectEditor.stylesInjected = true;
+            return;
+        }
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .st-cell-editor::part(combobox) {
+        border: none !important;
+        outline: none !important;
+        box-shadow: none !important;
+        min-height: unset !important;
+        height: 100% !important;
+        padding: 0 !important;
+      }
+      .st-cell-editor::part(combobox):hover {
+        border: none !important;
+        outline: none !important;
+        box-shadow: none !important;
+      }
+      .st-cell-editor::part(combobox):focus {
+        border: none !important;
+        outline: none !important;
+        box-shadow: none !important;
+      }
+      // .st-cell-editor::part(tag) {
+      //   margin: 1px 2px !important;
+      //   border-radius: 3px !important;
+      //   background-color: #e2e8f0 !important;
+      //   font-size: 12px !important;
+      //   height: auto !important;
+      // }
+      // .st-cell-editor::part(tag__base) {
+      //   border: none !important;
+      //   outline: none !important;
+      //   padding: 0 2px !important;
+      //   height: auto !important;
+      // }
+      // .st-cell-editor::part(tag__content) {
+      //   padding: 0 !important;
+      // }
+      .st-cell-editor::part(tags) {
+        gap: 2px !important;
+        align-items: center !important;
+      }
+      .st-cell-editor::part(tags-count) {
+        margin: 0 !important;
+      }
+      .st-cell-editor::part(footer) {
+        height: 35px !important;
+        min-height: 35px !important;
+        padding: 8px !important;
+        padding-bottom: 30px !important;
+        box-sizing: border-box !important;
+      }
+      .st-cell-editor::part(listbox) {
+        margin-bottom: 0 !important;
+        padding-bottom: 0 !important;
+      }
+    `;
+        document.head.appendChild(style);
+        NileSelectEditor.stylesInjected = true;
+    }
     edit(context) {
         if (!context.container) {
             console.warn('NileSelectEditor requires a container element');
@@ -3559,13 +3632,23 @@ class NileSelectEditor {
         }
         // Set initializing flag to prevent immediate close
         this.isInitializing = true;
+        this.hasSaved = false;
+        this.lastSelectedValue = '';
         // Create NileSelect custom element using document.createElement
         this.select = document.createElement('nile-select');
         this.select.className = 'st-cell-editor';
-        // Apply inline styles for proper cell fitting
-        this.select.style.width = '100%';
-        this.select.style.height = 'inherit';
+        // Apply inline styles for proper cell fitting - prevent height changes
+        this.select.style.width = 'calc(100% - 4px)';
+        this.select.style.height = '100%';
+        this.select.style.maxHeight = '100%';
         this.select.style.boxSizing = 'border-box';
+        this.select.style.margin = '0 2px';
+        this.select.style.overflow = 'hidden';
+        // Inject styles to remove border using ::part selector
+        this.injectBorderlessStyles();
+        // Also try removing outline on host element
+        this.select.style.outline = 'none';
+        this.select.style.border = 'none';
         // Set initial value
         this.setInitialValue(context.value);
         // Apply all configuration options
@@ -3577,27 +3660,22 @@ class NileSelectEditor {
         // Clear container and append select
         context.container.innerHTML = '';
         context.container.appendChild(this.select);
-        // Focus after render
+        // Focus and auto-open after render
         setTimeout(() => {
             var _a;
             (_a = this.select) === null || _a === void 0 ? void 0 : _a.focus();
-            // Use the open property to open the dropdown (more reliable than click)
+            // Auto-open the dropdown
             if (this.select) {
                 this.select.open = true;
             }
-            // For multi-select, find the portal div for click detection
-            if (this.options.multiple) {
-                setTimeout(() => {
+            // Clear initializing flag after dropdown has opened
+            setTimeout(() => {
+                this.isInitializing = false;
+                // For multi-select, find the portal div for click detection
+                if (this.options.multiple) {
                     this.portalDiv = document.querySelector('.nile-select-portal-append');
-                    this.isInitializing = false;
-                }, 150);
-            }
-            else {
-                // Clear initializing flag after dropdown has time to open
-                setTimeout(() => {
-                    this.isInitializing = false;
-                }, 100);
-            }
+                }
+            }, 100);
         }, 0);
     }
     /**
@@ -3762,6 +3840,31 @@ class NileSelectEditor {
         if (!this.select)
             return;
         const validateOnSave = this.options.validateOnSave !== false;
+        // Prevent click events from bubbling up to the cell container
+        const selectClickHandler = (e) => {
+            e.stopPropagation();
+        };
+        this.select.addEventListener('click', selectClickHandler);
+        this.eventListeners.push({ event: 'click', handler: selectClickHandler });
+        // For single-select with portal, listen to document mousedown to detect option selection
+        // Use mousedown because it fires before blur
+        if (!this.options.multiple) {
+            const documentMouseDownHandler = (e) => {
+                var _a, _b;
+                const composedPath = ((_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)) || [];
+                // Look for nile-option in the event path
+                for (const el of composedPath) {
+                    if (el instanceof HTMLElement && ((_b = el.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'nile-option') {
+                        const optionValue = el.getAttribute('value') || el.value || '';
+                        this.lastSelectedValue = optionValue;
+                        return;
+                    }
+                }
+            };
+            // Add listener immediately (mousedown fires before blur, so no need for delay)
+            document.addEventListener('mousedown', documentMouseDownHandler, true); // capture phase
+            this.eventListeners.push({ event: 'document-mousedown', handler: documentMouseDownHandler });
+        }
         // Handle keyboard events (keydown is not replaced by custom events)
         const keydownHandler = (e) => {
             const keyEvent = e;
@@ -3773,57 +3876,46 @@ class NileSelectEditor {
         };
         this.select.addEventListener('keydown', keydownHandler);
         this.eventListeners.push({ event: 'keydown', handler: keydownHandler });
-        // Use nile-change custom event as primary save trigger
-        const changeHandler = (e) => {
-            var _a, _b;
-            // Ignore change events during initialization (can fire when setting initial value)
-            if (this.isInitializing) {
-                return;
-            }
-            const customEvent = e;
-            if (validateOnSave && !((_a = this.select) === null || _a === void 0 ? void 0 : _a.checkValidity())) {
-                (_b = this.select) === null || _b === void 0 ? void 0 : _b.reportValidity();
+        // Use nile-blur event as save trigger for single-select
+        // Add a small delay to allow the value to update before reading
+        const singleSelectSaveHandler = (e) => {
+            // Don't save again if already saved
+            // Ignore events that fire during initialization (e.g. when setting initial value)
+            if (this.hasSaved || this.isInitializing) {
                 return;
             }
-            // Only save immediately for single-select
-            // Multi-select saves on outside click
+            // Only save for single-select
             if (!this.options.multiple) {
-                context.onSave(this.parseValue(customEvent.detail.value));
-            }
-        };
-        this.select.addEventListener('nile-change', changeHandler);
-        this.eventListeners.push({ event: 'nile-change', handler: changeHandler });
-        // Handle blur as secondary save trigger
-        const blurHandler = (e) => {
-            var _a, _b;
-            // Ignore blur during initialization
-            if (this.isInitializing) {
-                return;
-            }
-            if (validateOnSave && !((_a = this.select) === null || _a === void 0 ? void 0 : _a.checkValidity())) {
-                (_b = this.select) === null || _b === void 0 ? void 0 : _b.reportValidity();
-                return;
-            }
-            // context.onSave(this.getCurrentValue());
-        };
-        this.select.addEventListener('nile-blur', blurHandler);
-        this.eventListeners.push({ event: 'nile-blur', handler: blurHandler });
-        // Handle nile-hide event to prevent unwanted closing during initialization
-        const hideHandler = (e) => {
-            // If dropdown closes during initialization, re-open it (for both single and multi-select)
-            if (this.isInitializing) {
-                e.preventDefault();
-                e.stopPropagation();
-                // Re-open the dropdown after a brief delay using the open property
+                // Add a small delay to let the value update after selection
                 setTimeout(() => {
-                    if (this.select && this.isInitializing) {
-                        this.select.open = true;
+                    var _a, _b, _c;
+                    // Check again after timeout in case saved by another handler
+                    if (this.hasSaved) {
+                        return;
                     }
-                }, 10);
+                    if (validateOnSave && !((_a = this.select) === null || _a === void 0 ? void 0 : _a.checkValidity())) {
+                        (_b = this.select) === null || _b === void 0 ? void 0 : _b.reportValidity();
+                        return;
+                    }
+                    // Use lastSelectedValue if available, otherwise get from element
+                    const target = e.target;
+                    const value = this.lastSelectedValue || (target === null || target === void 0 ? void 0 : target.value) || ((_c = this.select) === null || _c === void 0 ? void 0 : _c.value) || '';
+                    this.hasSaved = true;
+                    context.onSave(this.parseValue(value));
+                }, 50); // 50ms delay to allow value to update
             }
         };
-        this.select.addEventListener('nile-hide', hideHandler);
-        this.eventListeners.push({ event: 'nile-hide', handler: hideHandler });
+        // Listen to blur and nile-blur events for focus loss detection
+        // Nile web components emit nile-blur custom event instead of native blur
+        this.select.addEventListener('blur', singleSelectSaveHandler);
+        this.eventListeners.push({ event: 'blur', handler: singleSelectSaveHandler });
+        this.select.addEventListener('nile-blur', singleSelectSaveHandler);
+        this.eventListeners.push({ event: 'nile-blur', handler: singleSelectSaveHandler });
+        // Also listen to change events as fallback
+        this.select.addEventListener('nile-change', singleSelectSaveHandler);
+        this.eventListeners.push({ event: 'nile-change', handler: singleSelectSaveHandler });
+        this.select.addEventListener('change', singleSelectSaveHandler);
+        this.eventListeners.push({ event: 'change', handler: singleSelectSaveHandler });
         // Handle clear button if enabled
         if (this.options.clearable) {
             const clearHandler = (e) => {
@@ -3871,7 +3963,8 @@ class NileSelectEditor {
             setTimeout(() => {
                 // Only add if select still exists (editor not destroyed)
                 if (this.select) {
-                    document.addEventListener('click', documentClickHandler, true);
+                    // Use bubbling phase (false) instead of capture to not interfere with nile-select's toggle
+                    document.addEventListener('click', documentClickHandler, false);
                     this.eventListeners.push({
                         event: 'document-click',
                         handler: documentClickHandler
@@ -3898,8 +3991,10 @@ class NileSelectEditor {
         return value;
     }
     destroy() {
-        // Reset initialization flag
+        // Reset flags
         this.isInitializing = false;
+        this.hasSaved = false;
+        this.lastSelectedValue = '';
         // Unsubscribe from options Observable
         if (this.optionsSubscription) {
             this.optionsSubscription.unsubscribe();
@@ -3910,8 +4005,12 @@ class NileSelectEditor {
             this.eventListeners.forEach(({ event, handler }) => {
                 var _a;
                 if (event === 'document-click') {
-                    // Remove from document for multi-select click handler
-                    document.removeEventListener('click', handler, true);
+                    // Remove from document for multi-select click handler (bubbling phase)
+                    document.removeEventListener('click', handler, false);
+                }
+                else if (event === 'document-mousedown') {
+                    // Remove from document for single-select option mousedown handler (capture phase)
+                    document.removeEventListener('mousedown', handler, true);
                 }
                 else {
                     // Remove from select element
@@ -3941,6 +4040,7 @@ class NileSelectEditor {
         return (Array.isArray(value) ? (value.length > 0 ? value[0] : '') : value);
     }
 }
+NileSelectEditor.stylesInjected = false;
 
 /**
  * Custom editor using NileAutoComplete from @aquera/nile-elements
@@ -5156,10 +5256,10 @@ class StCellComponent {
     }
 }
 StCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StCellComponent, selector: "st-cell", inputs: { cell: "cell", editMode: "editMode", tableState: "tableState", tableConfig: "tableConfig", columnIndex: "columnIndex" }, outputs: { cellChange: "cellChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellSaveAndNavigate: "cellSaveAndNavigate" }, host: { listeners: { "keydown": "onCellKeyDown($event)" } }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell.isEditing(),\n    'dirty': cell.isDirty(),\n    'invalid': !cell.isValid(),\n    'readonly': !isEditable\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Display Mode with Template Support -->\n  <ng-container *ngIf=\"!cell.isEditing()\">\n    <!-- Custom Template -->\n    <ng-container *ngIf=\"hasCellTemplate\">\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: templateContext\"></ng-container>\n    </ng-container>\n\n    <!-- Default Text Rendering -->\n    <span *ngIf=\"!hasCellTemplate\" class=\"cell-display\">\n      {{ cell.render() }}\n    </span>\n  </ng-container>\n\n  <!-- Edit Mode -->\n  <div *ngIf=\"cell.isEditing()\" class=\"cell-editor\" #editorContainer>\n  </div>\n</div>", styles: [".st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+StCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StCellComponent, selector: "st-cell", inputs: { cell: "cell", editMode: "editMode", tableState: "tableState", tableConfig: "tableConfig", columnIndex: "columnIndex" }, outputs: { cellChange: "cellChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellSaveAndNavigate: "cellSaveAndNavigate" }, host: { listeners: { "keydown": "onCellKeyDown($event)" } }, viewQueries: [{ propertyName: "editorContainer", first: true, predicate: ["editorContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell.isEditing(),\n    'dirty': cell.isDirty(),\n    'invalid': !cell.isValid(),\n    'readonly': !isEditable\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Display Mode with Template Support -->\n  <ng-container *ngIf=\"!cell.isEditing()\">\n    <!-- Custom Template -->\n    <ng-container *ngIf=\"hasCellTemplate\">\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: templateContext\"></ng-container>\n    </ng-container>\n\n    <!-- Default Text Rendering -->\n    <span *ngIf=\"!hasCellTemplate\" class=\"cell-display\">\n      {{ cell.render() }}\n    </span>\n  </ng-container>\n\n  <!-- Edit Mode -->\n  <div *ngIf=\"cell.isEditing()\" class=\"cell-editor\" #editorContainer>\n  </div>\n</div>", styles: [".st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-editor nile-select::part(combobox){border:none!important;outline:none!important;box-shadow:none!important}.cell-editor nile-select::part(tag){border:none!important;outline:none!important}.cell-editor nile-select::part(listbox){border:none!important}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-cell', template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell.isEditing(),\n    'dirty': cell.isDirty(),\n    'invalid': !cell.isValid(),\n    'readonly': !isEditable\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Display Mode with Template Support -->\n  <ng-container *ngIf=\"!cell.isEditing()\">\n    <!-- Custom Template -->\n    <ng-container *ngIf=\"hasCellTemplate\">\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: templateContext\"></ng-container>\n    </ng-container>\n\n    <!-- Default Text Rendering -->\n    <span *ngIf=\"!hasCellTemplate\" class=\"cell-display\">\n      {{ cell.render() }}\n    </span>\n  </ng-container>\n\n  <!-- Edit Mode -->\n  <div *ngIf=\"cell.isEditing()\" class=\"cell-editor\" #editorContainer>\n  </div>\n</div>", styles: [".st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"] }]
+            args: [{ selector: 'st-cell', template: "<div class=\"st-cell\" \n  [ngClass]=\"{\n    'editing': cell.isEditing(),\n    'dirty': cell.isDirty(),\n    'invalid': !cell.isValid(),\n    'readonly': !isEditable\n  }\"\n  (click)=\"onCellClick()\" \n  (dblclick)=\"onCellDoubleClick()\">\n\n  <!-- Display Mode with Template Support -->\n  <ng-container *ngIf=\"!cell.isEditing()\">\n    <!-- Custom Template -->\n    <ng-container *ngIf=\"hasCellTemplate\">\n      <ng-container *ngTemplateOutlet=\"cellTemplate; context: templateContext\"></ng-container>\n    </ng-container>\n\n    <!-- Default Text Rendering -->\n    <span *ngIf=\"!hasCellTemplate\" class=\"cell-display\">\n      {{ cell.render() }}\n    </span>\n  </ng-container>\n\n  <!-- Edit Mode -->\n  <div *ngIf=\"cell.isEditing()\" class=\"cell-editor\" #editorContainer>\n  </div>\n</div>", styles: [".st-cell{position:relative;cursor:pointer;transition:background-color .2s;min-height:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;box-sizing:border-box}.st-cell.invalid{border-left:2px solid #e53e3e}.st-cell.readonly{cursor:default}.cell-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-content:center;width:100%;height:100%;padding-left:8px;padding-right:8px;font-size:12px;font-weight:300;letter-spacing:.2px;line-height:14px}.cell-editor{display:flex;height:100%;width:100%}.cell-editor input,.cell-editor select,.cell-editor textarea{width:100%;border:none;outline:none;font:inherit;padding:0;background:transparent;color:inherit}.cell-editor input[type=number]{text-align:inherit}.cell-editor nile-select::part(combobox){border:none!important;outline:none!important;box-shadow:none!important}.cell-editor nile-select::part(tag){border:none!important;outline:none!important}.cell-editor nile-select::part(listbox){border:none!important}.cell-error{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:#e53e3e;font-weight:700;cursor:help;font-size:14px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { cell: [{
                 type: Input
             }], editMode: [{
@@ -8757,6 +8857,51 @@ class StTableComponent {
             scrollContainer.scrollTop += (cellRect.bottom - visibleBottom);
         }
     }
+    /**
+     * Scroll to a specific row by index and optionally focus it
+     * @param rowIndex - The index of the row to scroll to
+     * @param focusFirstCell - Whether to focus the first editable cell (default: false)
+     */
+    scrollToRowAndFocus(rowIndex, focusFirstCell = false) {
+        setTimeout(() => {
+            var _a;
+            const hostElement = (_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (!hostElement)
+                return;
+            // Find the target row
+            const rows = hostElement.querySelectorAll('tbody tr');
+            const targetRow = rows[rowIndex];
+            if (targetRow) {
+                // Scroll the row into view
+                targetRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                // Optionally focus the first editable cell
+                if (focusFirstCell) {
+                    const cells = targetRow.querySelectorAll('td:not(.settings-column):not(.row-number-cell)');
+                    const firstCell = cells[0];
+                    if (firstCell && typeof firstCell.focus === 'function') {
+                        setTimeout(() => {
+                            firstCell.focus();
+                            // Update table state focus position
+                            if (this.tableState) {
+                                this.tableState.focusCell(rowIndex, 0);
+                            }
+                        }, 100);
+                    }
+                }
+            }
+        }, 0);
+    }
+    /**
+     * Scroll to the last row in the table
+     * @param focusFirstCell - Whether to focus the first editable cell (default: true)
+     */
+    scrollToLastRow(focusFirstCell = true) {
+        var _a;
+        const rowCount = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        if (rowCount > 0) {
+            this.scrollToRowAndFocus(rowCount - 1, focusFirstCell);
+        }
+    }
     /**
      * Get the scroll container element
      */
@@ -10294,12 +10439,34 @@ class StWorkbookComponent {
         };
         window.addEventListener('beforeunload', this.beforeUnloadHandler);
     }
+    // ===================================================
+    // Public API Methods
+    // ===================================================
+    /**
+     * Scroll to a specific row in the current table
+     * @param rowIndex - The index of the row to scroll to
+     * @param focusFirstCell - Whether to focus the first editable cell (default: false)
+     */
+    scrollToRow(rowIndex, focusFirstCell = false) {
+        if (this.tableComponent) {
+            this.tableComponent.scrollToRowAndFocus(rowIndex, focusFirstCell);
+        }
+    }
+    /**
+     * Scroll to the last row in the current table
+     * @param focusFirstCell - Whether to focus the first editable cell (default: true)
+     */
+    scrollToLastRow(focusFirstCell = true) {
+        if (this.tableComponent) {
+            this.tableComponent.scrollToLastRow(focusFirstCell);
+        }
+    }
 }
 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", 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 } });
+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" }, viewQueries: [{ propertyName: "tableComponent", first: true, predicate: StTableComponent, descendants: true }], 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.active .sheet-name{font-weight:600}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                  (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"] }]
+            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.active .sheet-name{font-weight:600}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: [{
@@ -10324,6 +10491,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], requestAddRow: [{
                 type: Output
+            }], tableComponent: [{
+                type: ViewChild,
+                args: [StTableComponent]
             }] } });
 
 /**