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

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

@@ -3602,6 +3602,72 @@ class NileInputEditor {
  * Custom editor using NileSelect from @aquera/nile-elements
  * This demonstrates how to create dropdown/select editors for ngx-smart-table
  */
+/**
+ * Inject global styles for nile-select dropdown height limit
+ */
+let dropdownStylesInjected = false;
+function injectDropdownStyles() {
+    if (dropdownStylesInjected)
+        return;
+    dropdownStylesInjected = true;
+    const styleId = 'nile-select-dropdown-styles';
+    if (document.getElementById(styleId))
+        return;
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+    /* Limit nile-select dropdown height and enable scrolling */
+    .nile-select-portal-append {
+      max-height: 300px !important;
+    }
+    .nile-select-portal-append .select__listbox {
+      min-width: 220px !important;
+      max-height: 260px !important;
+      overflow-y: auto !important;
+      width: auto !important;
+    }
+    .nile-select-portal-append .select__footer {
+      height: 35px !important;
+    }
+    /* Prevent option text truncation - target the options container */
+    .nile-select-portal-append .select__options {
+      width: auto !important;
+    }
+    .nile-select-portal-append nile-option {
+      width: auto !important;
+      max-width: none !important;
+    }
+    .nile-select-portal-append nile-option::part(base) {
+      white-space: nowrap !important;
+      text-overflow: clip !important;
+      overflow: visible !important;
+      max-width: none !important;
+    }
+    /* Fix option text truncation by changing flex direction */
+    .nile-select-portal-append nile-option::part(option_label_container) {
+      flex-direction: row !important;
+    }
+    /* Combobox styling using ::part() selector */
+    nile-select.st-cell-editor::part(combobox) {
+      background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary)) !important;
+      border: solid 1px transparent !important;
+      margin: 1px 4px !important;
+    }
+    nile-select.st-cell-editor::part(combobox):hover {
+      border: solid 1px transparent !important;
+    }
+    .st-cell-editor::part(combobox) {
+      background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary)) !important;
+      border: solid 1px transparent !important;
+      margin: 1px 4px !important;
+    }
+    /* Search input full width */
+    .nile-select-portal-append .select__search {
+      width: 100% !important;
+    }
+  `;
+    document.head.appendChild(style);
+}
 /**
  * Custom editor that uses NileSelect component
  * @template T The value type (string for single selection, string[] for multiple)
@@ -3612,9 +3678,6 @@ class NileSelectEditor {
         this.acceptsInitialKeypress = false;
         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 => {
@@ -3633,101 +3696,20 @@ 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');
             return;
         }
-        // Set initializing flag to prevent immediate close
-        this.isInitializing = true;
-        this.hasSaved = false;
-        this.lastSelectedValue = '';
+        // Inject dropdown height styles once
+        injectDropdownStyles();
         // 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 - prevent height changes
-        this.select.style.width = 'calc(100% - 4px)';
-        this.select.style.height = '100%';
-        this.select.style.maxHeight = '100%';
+        // Apply inline styles for proper cell fitting
+        this.select.style.width = '100%';
+        this.select.style.height = 'inherit';
         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
@@ -3741,19 +3723,10 @@ class NileSelectEditor {
         context.container.appendChild(this.select);
         // Focus and auto-open after render
         setTimeout(() => {
-            this.select?.focus();
-            // Auto-open the dropdown
             if (this.select) {
+                this.select.focus();
                 this.select.open = true;
             }
-            // 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');
-                }
-            }, 100);
         }, 0);
     }
     /**
@@ -3837,13 +3810,9 @@ class NileSelectEditor {
         if (this.options.pill) {
             this.select.pill = this.options.pill;
         }
-        if (this.options.hoist !== undefined) {
+        if (this.options.hoist) {
             this.select.hoist = this.options.hoist;
         }
-        else {
-            // Default hoist to true for all selects to prevent clipping issues in table cells
-            this.select.hoist = true;
-        }
         if (this.options.placement) {
             this.select.placement = this.options.placement;
         }
@@ -3853,12 +3822,8 @@ class NileSelectEditor {
         if (this.options.disableLocalSearch) {
             this.select.disableLocalSearch = this.options.disableLocalSearch;
         }
-        if (this.options.portal !== undefined) {
-            this.select.portal = this.options.portal;
-        }
-        else {
-            this.select.portal = true; // Default to portal mode for better positioning
-        }
+        // Enable portal mode by default to prevent dropdown clipping in table cells
+        this.select.portal = this.options.portal !== false;
         // Prevent width syncing issues in table cells
         this.select.noWidthSync = true;
     }
@@ -3918,30 +3883,6 @@ 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) => {
-                const composedPath = e.composedPath?.() || [];
-                // Look for nile-option in the event path
-                for (const el of composedPath) {
-                    if (el instanceof HTMLElement && el.tagName?.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;
@@ -3953,45 +3894,54 @@ class NileSelectEditor {
         };
         this.select.addEventListener('keydown', keydownHandler);
         this.eventListeners.push({ event: 'keydown', handler: keydownHandler });
-        // 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) {
+        // Use nile-change custom event as save trigger - ONLY for single-select
+        // Multi-select should stay open until user clicks outside
+        if (!this.options.multiple) {
+            const changeHandler = (e) => {
+                const customEvent = e;
+                if (validateOnSave && !this.select?.checkValidity()) {
+                    this.select?.reportValidity();
+                    return;
+                }
+                context.onSave(this.parseValue(customEvent.detail.value));
+            };
+            this.select.addEventListener('nile-change', changeHandler);
+            this.eventListeners.push({ event: 'nile-change', handler: changeHandler });
+        }
+        // Track if save was already triggered (to prevent double save)
+        let saveTriggered = false;
+        // Use mousedown on document to detect clicks outside the select and portal
+        const documentMousedownHandler = (e) => {
+            if (saveTriggered)
+                return;
+            if (!this.select)
+                return;
+            const target = e.target;
+            // Check if click is inside the select element
+            if (this.select.contains(target)) {
                 return;
             }
-            // Only save for single-select
-            if (!this.options.multiple) {
-                // Add a small delay to let the value update after selection
-                setTimeout(() => {
-                    // Check again after timeout in case saved by another handler
-                    if (this.hasSaved) {
-                        return;
-                    }
-                    if (validateOnSave && !this.select?.checkValidity()) {
-                        this.select?.reportValidity();
-                        return;
-                    }
-                    // Use lastSelectedValue if available, otherwise get from element
-                    const target = e.target;
-                    const value = this.lastSelectedValue || target?.value || this.select?.value || '';
-                    this.hasSaved = true;
-                    context.onSave(this.parseValue(value));
-                }, 50); // 50ms delay to allow value to update
+            // Check if click is inside any nile-select portal
+            const portals = document.querySelectorAll('.nile-select-portal-append');
+            for (let i = 0; i < portals.length; i++) {
+                if (portals[i].contains(target)) {
+                    return;
+                }
+            }
+            // Click is outside - save and exit
+            saveTriggered = true;
+            if (validateOnSave && !this.select?.checkValidity()) {
+                this.select?.reportValidity();
+                return;
             }
+            context.onSave(this.getCurrentValue());
         };
-        // 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 });
+        // Add listener after a short delay to avoid capturing the initial click that opened the editor
+        setTimeout(() => {
+            document.addEventListener('mousedown', documentMousedownHandler, true);
+        }, 50);
+        // Store for cleanup
+        this._documentMousedownHandler = documentMousedownHandler;
         // Handle clear button if enabled
         if (this.options.clearable) {
             const clearHandler = (e) => {
@@ -4010,43 +3960,6 @@ class NileSelectEditor {
             this.select.addEventListener('nile-search', searchHandler);
             this.eventListeners.push({ event: 'nile-search', handler: searchHandler });
         }
-        // For multi-select: detect clicks outside portal and select
-        if (this.options.multiple) {
-            const documentClickHandler = (e) => {
-                const mouseEvent = e;
-                const target = mouseEvent.target;
-                // Check if portal div exists (might take a moment to render)
-                if (!this.portalDiv) {
-                    this.portalDiv = document.querySelector('.nile-select-portal-append');
-                }
-                // Determine if click is inside the select or portal
-                const clickedInsideSelect = this.select?.contains(target);
-                const clickedInsidePortal = this.portalDiv?.contains(target);
-                // If clicked outside both select and portal, save and close
-                if (!clickedInsideSelect && !clickedInsidePortal) {
-                    if (validateOnSave && !this.select?.checkValidity()) {
-                        this.select?.reportValidity();
-                        return;
-                    }
-                    context.onSave(this.getCurrentValue());
-                }
-                // Otherwise, click is inside - do nothing (dropdown stays open)
-            };
-            // Delay adding the document click handler to prevent the initial click 
-            // (that opened the editor) from immediately triggering it and closing the dropdown
-            // Use 200ms to ensure the dropdown has fully opened
-            setTimeout(() => {
-                // Only add if select still exists (editor not destroyed)
-                if (this.select) {
-                    // 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
-                    });
-                }
-            }, 200);
-        }
     }
     /**
      * Parse value based on selection mode
@@ -4066,35 +3979,24 @@ class NileSelectEditor {
         return value;
     }
     destroy() {
-        // Reset flags
-        this.isInitializing = false;
-        this.hasSaved = false;
-        this.lastSelectedValue = '';
         // Unsubscribe from options Observable
         if (this.optionsSubscription) {
             this.optionsSubscription.unsubscribe();
             this.optionsSubscription = undefined;
         }
+        // Remove document mousedown handler if exists
+        if (this._documentMousedownHandler) {
+            document.removeEventListener('mousedown', this._documentMousedownHandler, true);
+            delete this._documentMousedownHandler;
+        }
         // Remove all event listeners
         if (this.select) {
             this.eventListeners.forEach(({ event, handler }) => {
-                if (event === 'document-click') {
-                    // 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
-                    this.select?.removeEventListener(event, handler);
-                }
+                this.select?.removeEventListener(event, handler);
             });
             this.eventListeners = [];
             this.select.remove();
             this.select = undefined;
-            this.portalDiv = undefined; // Clean up portal reference
         }
     }
     focus() {
@@ -4113,7 +4015,6 @@ class NileSelectEditor {
         return (Array.isArray(value) ? (value.length > 0 ? value[0] : '') : value);
     }
 }
-NileSelectEditor.stylesInjected = false;
 
 /**
  * Custom editor using NileAutoComplete from @aquera/nile-elements
@@ -8828,6 +8729,15 @@ class StTableComponent {
     focusTdElement(rowIndex, colIndex) {
         // Use setTimeout to ensure DOM has updated
         setTimeout(() => {
+            // Don't steal focus from editors - if a cell is being edited, 
+            // the editor should keep focus
+            const editingPosition = this.getActiveTableState().getEditingPosition();
+            if (editingPosition &&
+                editingPosition.rowIndex === rowIndex &&
+                editingPosition.columnIndex === colIndex) {
+                // Cell is being edited, don't steal focus from the editor
+                return;
+            }
             // Use absolute row index for virtual scroll compatibility
             const absoluteRowIndex = this.getAbsoluteRowIndex(rowIndex);
             // Query within this component's host element to avoid selecting rows from other tables
@@ -9088,7 +8998,21 @@ class StTableComponent {
             return;
         const target = event.target;
         const tableElement = target.closest('.st-table');
-        if (!tableElement) {
+        // Also check if click is inside a portal (e.g., nile-select dropdown)
+        // These are rendered outside the table but are part of the editing experience
+        const portalElement = target.closest('.nile-select-portal-append');
+        // Check composedPath for shadow DOM elements (e.g., nile-option, nile-input inside shadow root)
+        const composedPath = event.composedPath?.() || [];
+        const isInsideNileElement = composedPath.some((el) => {
+            if (el instanceof HTMLElement) {
+                const tagName = el.tagName?.toLowerCase();
+                // Check for any nile-* custom elements used in editors
+                return tagName?.startsWith('nile-') ||
+                    el.classList?.contains('nile-select-portal-append');
+            }
+            return false;
+        });
+        if (!tableElement && !portalElement && !isInsideNileElement) {
             this.getActiveTableState().clearFocus();
             this.getActiveTableState().clearEditingCell();
         }
@@ -10046,9 +9970,13 @@ class StWorkbookComponent {
         this.workbookActionsOpen = false;
         this.workbookActionsPosition = {};
         /**
-         * Visible workbook actions (filtered by hidden)
+         * Visible workbook actions for dropdown (filtered by hidden and showInToolbar)
          */
         this.visibleWorkbookActions = [];
+        /**
+         * Workbook actions to show directly in toolbar
+         */
+        this.toolbarWorkbookActions = [];
         /**
          * Destroy subject for cleanup
          */
@@ -10285,14 +10213,18 @@ class StWorkbookComponent {
     updateVisibleWorkbookActions() {
         if (!this.config.workbookActions) {
             this.visibleWorkbookActions = [];
+            this.toolbarWorkbookActions = [];
             return;
         }
-        this.visibleWorkbookActions = this.config.workbookActions.filter(action => {
+        const visibleActions = this.config.workbookActions.filter(action => {
             if (typeof action.hidden === 'function') {
                 return !action.hidden();
             }
             return !action.hidden;
         });
+        // Separate toolbar actions from dropdown actions
+        this.toolbarWorkbookActions = visibleActions.filter(action => action.showInToolbar === true);
+        this.visibleWorkbookActions = visibleActions.filter(action => action.showInToolbar !== true);
     }
     /**
      * Check if workbook action is disabled
@@ -10489,10 +10421,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", 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 } });
+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        <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n        <button *ngFor=\"let action of toolbarWorkbookActions\"\n                class=\"toolbar-action-button\"\n                [class.disabled]=\"isActionDisabled(action)\"\n                [title]=\"action.label\"\n                (click)=\"onWorkbookActionClick(action, $event)\">\n          <nile-icon *ngIf=\"action.icon\" [name]=\"action.icon\"></nile-icon>\n          <span *ngIf=\"!action.icon\">{{ action.label }}</span>\n        </button>\n\n        <!-- Workbook Actions Dropdown -->\n        <button class=\"workbook-actions-button\"\n                *ngIf=\"visibleWorkbookActions.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}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.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.active .sheet-name{font-weight:600}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        <!-- Toolbar Workbook Actions (shown as individual buttons) -->\n        <button *ngFor=\"let action of toolbarWorkbookActions\"\n                class=\"toolbar-action-button\"\n                [class.disabled]=\"isActionDisabled(action)\"\n                [title]=\"action.label\"\n                (click)=\"onWorkbookActionClick(action, $event)\">\n          <nile-icon *ngIf=\"action.icon\" [name]=\"action.icon\"></nile-icon>\n          <span *ngIf=\"!action.icon\">{{ action.label }}</span>\n        </button>\n\n        <!-- Workbook Actions Dropdown -->\n        <button class=\"workbook-actions-button\"\n                *ngIf=\"visibleWorkbookActions.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}.workbook-toolbar-tab button.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.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: [{