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

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

@@ -3578,6 +3578,7 @@ class NileInputEditor {
 class NileSelectEditor {
     constructor(options) {
         this.options = options;
+        this.acceptsInitialKeypress = false;
         this.eventListeners = [];
         this.currentOptions = [];
         // Handle Observable options
@@ -4122,6 +4123,7 @@ class NileAutoCompleteEditor {
 class NileCalendarEditor {
     constructor(options) {
         this.options = options;
+        this.acceptsInitialKeypress = false;
         this.eventListeners = [];
     }
     edit(context) {
@@ -4222,10 +4224,6 @@ class NileCalendarEditor {
         if (this.options?.size) {
             this.calendar.setAttribute('size', this.options.size);
         }
-        // Portal rendering (default: true)
-        if (this.options?.portal !== false) {
-            this.calendar.setAttribute('portal', 'true');
-        }
     }
     /**
      * Set up all event listeners with proper cleanup tracking
@@ -4327,7 +4325,7 @@ class NileCalendarEditor {
 
 /**
  * Custom editor using NileDatePicker from @aquera/nile-elements
- * Supports both single date and range selection with slot-based trigger input
+ * Supports both single date and range selection with slot-based trigger div
  * Returns string values for both modes:
  *   - Single mode: 'YYYY-MM-DD'
  *   - Range mode: 'YYYY-MM-DD - YYYY-MM-DD'
@@ -4342,6 +4340,7 @@ class NileCalendarEditor {
 class NileDatePickerEditor {
     constructor(options) {
         this.options = options;
+        this.acceptsInitialKeypress = false;
         this.eventListeners = [];
     }
     edit(context) {
@@ -4356,18 +4355,20 @@ class NileDatePickerEditor {
         this.datePicker.style.width = 'inherit';
         this.datePicker.style.height = 'inherit';
         this.datePicker.style.boxSizing = 'border-box';
-        // Create trigger input with slot using document.createElement
-        this.triggerInput = document.createElement('nile-input');
-        this.triggerInput.setAttribute('slot', 'trigger');
+        // Create trigger div with slot
+        this.triggerDiv = document.createElement('div');
+        this.triggerDiv.setAttribute('slot', 'trigger');
+        this.triggerDiv.setAttribute('contenteditable', 'false');
+        this.triggerDiv.style.width = '100%';
+        this.triggerDiv.style.minHeight = '28px';
+        this.triggerDiv.style.cursor = 'pointer';
+        this.triggerDiv.style.boxSizing = 'border-box';
         // Set initial value
         this.setInitialValue(context.value);
-        if (this.options?.label) {
-            this.triggerInput.label = this.options.label;
-        }
         // Apply configuration options
         this.applyOptions();
         // Append trigger to date picker (slot-based)
-        this.datePicker.appendChild(this.triggerInput);
+        this.datePicker.appendChild(this.triggerDiv);
         // Set up event listeners
         this.setupEventListeners(context);
         // Append to container
@@ -4376,30 +4377,31 @@ class NileDatePickerEditor {
         // Auto focus and open the date picker
         if (this.options?.autoFocus !== false) {
             setTimeout(() => {
-                this.triggerInput?.focus();
+                this.triggerDiv?.focus();
                 // Trigger a click to open the date picker dropdown
-                this.triggerInput?.click();
+                this.triggerDiv?.click();
             }, 0);
         }
     }
     /**
-     * Set initial value in the trigger input
+     * Set initial value in the trigger div
      */
     setInitialValue(value) {
-        if (!this.triggerInput)
+        if (!this.triggerDiv)
             return;
         if (!value) {
-            this.triggerInput.value = '';
+            this.triggerDiv.textContent = '';
             return;
         }
         // Both single and range modes use string value
-        this.triggerInput.value = String(value);
+        this.triggerDiv.textContent = String(value);
     }
     /**
-     * Apply all configuration options to both NileDatePicker and trigger input
+     * Apply configuration options to the date picker
+     * Note: Trigger is now a simple div, so input-specific options are not applied
      */
     applyOptions() {
-        if (!this.datePicker || !this.triggerInput)
+        if (!this.datePicker)
             return;
         // Configure NileDatePicker
         const dateFormat = this.options?.dateFormat || 'YYYY-MM-DD';
@@ -4410,48 +4412,20 @@ class NileDatePickerEditor {
         if (this.options?.syncDatePicker) {
             this.datePicker.setAttribute('syncDatePicker', String(this.options.syncDatePicker));
         }
-        // Configure trigger input
-        if (this.options?.disabled) {
-            this.triggerInput.disabled = this.options.disabled;
-        }
-        if (this.options?.clearable) {
-            this.triggerInput.clearable = this.options.clearable;
-        }
-        if (this.options?.helpText) {
-            this.triggerInput.setAttribute('help-text', this.options.helpText);
-        }
-        // Visual states on trigger
-        if (this.options?.warning) {
-            this.triggerInput.setAttribute('warning', String(this.options.warning));
-        }
-        if (this.options?.error) {
-            this.triggerInput.setAttribute('error', String(this.options.error));
-        }
-        if (this.options?.success) {
-            this.triggerInput.setAttribute('success', String(this.options.success));
-        }
-        if (this.options?.errorMessage) {
-            this.triggerInput.setAttribute('error-message', this.options.errorMessage);
-        }
-        // Styling
-        if (this.options?.size) {
-            this.triggerInput.setAttribute('size', String(this.options.size));
-        }
-        if (this.options?.filled) {
-            this.triggerInput.setAttribute('filled', String(this.options.filled));
-        }
-        if (this.options?.pill) {
-            this.triggerInput.setAttribute('pill', String(this.options.pill));
+        // Trigger div styling (disabled state can be indicated with opacity)
+        if (this.triggerDiv && this.options?.disabled) {
+            this.triggerDiv.style.opacity = '0.5';
+            this.triggerDiv.style.pointerEvents = 'none';
         }
     }
     /**
      * Set up all event listeners with proper cleanup tracking
      */
     setupEventListeners(context) {
-        if (!this.datePicker || !this.triggerInput)
+        if (!this.datePicker || !this.triggerDiv)
             return;
         const validateOnSave = this.options?.validateOnSave !== false;
-        // Keyboard events on trigger input
+        // Keyboard events on trigger div
         const keydownHandler = (e) => {
             const keyEvent = e;
             if (keyEvent.key === 'Enter') {
@@ -4469,8 +4443,12 @@ class NileDatePickerEditor {
                 keyEvent.stopPropagation();
                 this.saveValue(context, validateOnSave);
             }
+            else {
+                // Prevent all other keypresses from typing into the div
+                keyEvent.preventDefault();
+            }
         };
-        this.triggerInput.addEventListener('keydown', keydownHandler);
+        this.triggerDiv.addEventListener('keydown', keydownHandler);
         this.eventListeners.push({ event: 'keydown', handler: keydownHandler });
         // nile-change event on date picker
         const changeHandler = (e) => {
@@ -4490,25 +4468,6 @@ class NileDatePickerEditor {
         };
         this.datePicker.addEventListener('nile-change', changeHandler);
         this.eventListeners.push({ event: 'nile-change', handler: changeHandler });
-        // nile-blur event on trigger input
-        const blurHandler = (e) => {
-            const customEvent = e;
-            // For blur, get value from trigger input directly
-            const inputValue = this.triggerInput?.value || '';
-            if (inputValue) {
-                context.onSave(this.parseValue(inputValue));
-            }
-        };
-        this.triggerInput.addEventListener('nile-blur', blurHandler);
-        this.eventListeners.push({ event: 'nile-blur', handler: blurHandler });
-        // nile-clear event
-        if (this.options?.clearable) {
-            const clearHandler = (e) => {
-                context.onSave('');
-            };
-            this.triggerInput.addEventListener('nile-clear', clearHandler);
-            this.eventListeners.push({ event: 'nile-clear', handler: clearHandler });
-        }
     }
     /**
      * Save value with optional validation
@@ -4528,27 +4487,27 @@ class NileDatePickerEditor {
         return (value || '');
     }
     getCurrentValue() {
-        if (!this.triggerInput) {
+        if (!this.triggerDiv) {
             return '';
         }
-        return this.parseValue(this.triggerInput.value ?? '');
+        return this.parseValue(this.triggerDiv.textContent ?? '');
     }
     destroy() {
-        if (this.datePicker || this.triggerInput) {
+        if (this.datePicker || this.triggerDiv) {
             this.eventListeners.forEach(({ event, handler }) => {
                 this.datePicker?.removeEventListener(event, handler);
-                this.triggerInput?.removeEventListener(event, handler);
+                this.triggerDiv?.removeEventListener(event, handler);
             });
             this.eventListeners = [];
             if (this.datePicker) {
                 this.datePicker.remove();
                 this.datePicker = undefined;
             }
-            this.triggerInput = undefined;
+            this.triggerDiv = undefined;
         }
     }
     focus() {
-        this.triggerInput?.focus();
+        this.triggerDiv?.focus();
     }
 }
 
@@ -4933,12 +4892,18 @@ class StCellComponent {
     startEditWithKey(key) {
         const canStart = this.cell.startEdit();
         if (canStart) {
-            // Replace current value with the key
-            this.cell.setValue(key, false);
             const column = this.cell.getColumnConfig();
+            const editor = column.editor;
+            // Only set initial keypress value if editor accepts it
+            // Default to true for backward compatibility with existing editors
+            const acceptsKeypress = editor?.acceptsInitialKeypress !== false;
+            if (acceptsKeypress) {
+                // Replace current value with the key
+                this.cell.setValue(key, false);
+            }
             const editEvent = {
                 cell: this.cell,
-                value: key,
+                value: acceptsKeypress ? key : this.cell.getValue(),
                 rowData: this.cell.getRowData(),
                 columnKey: column.key,
                 rowIndex: this.cell.getRowIndex(),
@@ -6864,10 +6829,10 @@ class StColumnMenuDropdownComponent {
     }
 }
 StColumnMenuDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StColumnMenuDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "filterPopup", first: true, predicate: ["filterPopup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown container with backdrop -->\n<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"column-menu-dropdown\" [ngStyle]=\"dropdownStyle\">\n    <!-- Main menu with actions -->\n    <nile-menu *ngIf=\"!isFilterOpen\">\n      <!-- Dynamically render all visible actions -->\n      <ng-container *ngFor=\"let action of visibleActions; let i = index; let last = last\">\n        <nile-menu-item \n          (click)=\"onActionClick(action)\"\n          [class.disabled]=\"isActionDisabled(action)\"\n          [class.active]=\"isActionActive(action)\">\n          <span class=\"checkmark\" *ngIf=\"isActionActive(action)\">\u2713</span>\n          <nile-icon slot=\"prefix\" *ngIf=\"action.icon && !isActionActive(action)\" [name]=\"action.icon\"></nile-icon>\n          <span class=\"action-label\">{{ action.label }}</span>\n        </nile-menu-item>\n        \n        <!-- Add divider after action groups -->\n        <nile-divider *ngIf=\"shouldShowDividerAfter(action, i, last)\"></nile-divider>\n      </ng-container>\n      \n      <!-- Fallback if no actions -->\n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">\n        No actions available\n      </nile-menu-item>\n    </nile-menu>\n    \n    <!-- Filter popup (conditionally rendered) -->\n    <st-column-filter\n      #filterPopup\n      *ngIf=\"isFilterOpen && context\"\n      [column]=\"context.column\"\n      [tableState]=\"context.tableState\"\n      [columnIndex]=\"context.columnIndex\"\n      [isFirstColumn]=\"context.isFirstColumn\"\n      [isLastColumn]=\"context.isLastColumn\"\n      [isOpen]=\"isFilterOpen\"\n      (filterApplied)=\"onFilterApplied($event)\"\n      (filterCleared)=\"onFilterCleared()\"\n      (closed)=\"onFilterClosed()\">\n    </st-column-filter>\n  </div>\n</div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000004d;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"], components: [{ type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StColumnMenuDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "click": "onBackdropClick($event)" } }, viewQueries: [{ propertyName: "filterPopup", first: true, predicate: ["filterPopup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Dropdown container with backdrop -->\n<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"column-menu-dropdown\" [ngStyle]=\"dropdownStyle\">\n    <!-- Main menu with actions -->\n    <nile-menu *ngIf=\"!isFilterOpen\">\n      <!-- Dynamically render all visible actions -->\n      <ng-container *ngFor=\"let action of visibleActions; let i = index; let last = last\">\n        <nile-menu-item \n          (click)=\"onActionClick(action)\"\n          [class.disabled]=\"isActionDisabled(action)\"\n          [class.active]=\"isActionActive(action)\">\n          <span class=\"checkmark\" *ngIf=\"isActionActive(action)\">\u2713</span>\n          <nile-icon slot=\"prefix\" *ngIf=\"action.icon && !isActionActive(action)\" [name]=\"action.icon\"></nile-icon>\n          <span class=\"action-label\">{{ action.label }}</span>\n        </nile-menu-item>\n        \n        <!-- Add divider after action groups -->\n        <nile-divider *ngIf=\"shouldShowDividerAfter(action, i, last)\"></nile-divider>\n      </ng-container>\n      \n      <!-- Fallback if no actions -->\n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">\n        No actions available\n      </nile-menu-item>\n    </nile-menu>\n    \n    <!-- Filter popup (conditionally rendered) -->\n    <st-column-filter\n      #filterPopup\n      *ngIf=\"isFilterOpen && context\"\n      [column]=\"context.column\"\n      [tableState]=\"context.tableState\"\n      [columnIndex]=\"context.columnIndex\"\n      [isFirstColumn]=\"context.isFirstColumn\"\n      [isLastColumn]=\"context.isLastColumn\"\n      [isOpen]=\"isFilterOpen\"\n      (filterApplied)=\"onFilterApplied($event)\"\n      (filterCleared)=\"onFilterCleared()\"\n      (closed)=\"onFilterClosed()\">\n    </st-column-filter>\n  </div>\n</div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"], components: [{ type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StColumnMenuDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-column-menu-dropdown', template: "<!-- Dropdown container with backdrop -->\n<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"column-menu-dropdown\" [ngStyle]=\"dropdownStyle\">\n    <!-- Main menu with actions -->\n    <nile-menu *ngIf=\"!isFilterOpen\">\n      <!-- Dynamically render all visible actions -->\n      <ng-container *ngFor=\"let action of visibleActions; let i = index; let last = last\">\n        <nile-menu-item \n          (click)=\"onActionClick(action)\"\n          [class.disabled]=\"isActionDisabled(action)\"\n          [class.active]=\"isActionActive(action)\">\n          <span class=\"checkmark\" *ngIf=\"isActionActive(action)\">\u2713</span>\n          <nile-icon slot=\"prefix\" *ngIf=\"action.icon && !isActionActive(action)\" [name]=\"action.icon\"></nile-icon>\n          <span class=\"action-label\">{{ action.label }}</span>\n        </nile-menu-item>\n        \n        <!-- Add divider after action groups -->\n        <nile-divider *ngIf=\"shouldShowDividerAfter(action, i, last)\"></nile-divider>\n      </ng-container>\n      \n      <!-- Fallback if no actions -->\n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">\n        No actions available\n      </nile-menu-item>\n    </nile-menu>\n    \n    <!-- Filter popup (conditionally rendered) -->\n    <st-column-filter\n      #filterPopup\n      *ngIf=\"isFilterOpen && context\"\n      [column]=\"context.column\"\n      [tableState]=\"context.tableState\"\n      [columnIndex]=\"context.columnIndex\"\n      [isFirstColumn]=\"context.isFirstColumn\"\n      [isLastColumn]=\"context.isLastColumn\"\n      [isOpen]=\"isFilterOpen\"\n      (filterApplied)=\"onFilterApplied($event)\"\n      (filterCleared)=\"onFilterCleared()\"\n      (closed)=\"onFilterClosed()\">\n    </st-column-filter>\n  </div>\n</div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000004d;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"] }]
+            args: [{ selector: 'st-column-menu-dropdown', template: "<!-- Dropdown container with backdrop -->\n<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-backdrop\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"column-menu-dropdown\" [ngStyle]=\"dropdownStyle\">\n    <!-- Main menu with actions -->\n    <nile-menu *ngIf=\"!isFilterOpen\">\n      <!-- Dynamically render all visible actions -->\n      <ng-container *ngFor=\"let action of visibleActions; let i = index; let last = last\">\n        <nile-menu-item \n          (click)=\"onActionClick(action)\"\n          [class.disabled]=\"isActionDisabled(action)\"\n          [class.active]=\"isActionActive(action)\">\n          <span class=\"checkmark\" *ngIf=\"isActionActive(action)\">\u2713</span>\n          <nile-icon slot=\"prefix\" *ngIf=\"action.icon && !isActionActive(action)\" [name]=\"action.icon\"></nile-icon>\n          <span class=\"action-label\">{{ action.label }}</span>\n        </nile-menu-item>\n        \n        <!-- Add divider after action groups -->\n        <nile-divider *ngIf=\"shouldShowDividerAfter(action, i, last)\"></nile-divider>\n      </ng-container>\n      \n      <!-- Fallback if no actions -->\n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">\n        No actions available\n      </nile-menu-item>\n    </nile-menu>\n    \n    <!-- Filter popup (conditionally rendered) -->\n    <st-column-filter\n      #filterPopup\n      *ngIf=\"isFilterOpen && context\"\n      [column]=\"context.column\"\n      [tableState]=\"context.tableState\"\n      [columnIndex]=\"context.columnIndex\"\n      [isFirstColumn]=\"context.isFirstColumn\"\n      [isLastColumn]=\"context.isLastColumn\"\n      [isOpen]=\"isFilterOpen\"\n      (filterApplied)=\"onFilterApplied($event)\"\n      (filterCleared)=\"onFilterCleared()\"\n      (closed)=\"onFilterClosed()\">\n    </st-column-filter>\n  </div>\n</div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:9998}.column-menu-dropdown{min-width:200px;max-width:300px;background-color:#fff;border-radius:8px;box-shadow:0 10px 25px #00000026;overflow:hidden;pointer-events:auto;z-index:9999}nile-menu nile-divider::part(divider){margin:0}nile-menu nile-menu-item::part(base){height:2.5rem;min-height:auto}nile-menu nile-menu-item .checkmark{margin-right:8px;color:#4299e1;font-weight:700}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], position: [{
@@ -7050,379 +7015,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 /**
- * Column Editor Component
- * Form-based column configuration
+ * st-header Component
+ * Encapsulates column-specific logic including sorting and filtering
  */
-class ColumnEditorComponent {
-    constructor(fb) {
-        this.fb = fb;
-        this.columnUpdated = new EventEmitter();
-        this.cancel = new EventEmitter();
-        this.dataTypes = [
-            { value: CellDataType.STRING, label: 'Text' },
-            { value: CellDataType.NUMBER, label: 'Number' },
-            { value: CellDataType.DATE, label: 'Date' },
-            { value: CellDataType.BOOLEAN, label: 'Boolean' },
-            { value: CellDataType.CUSTOM, label: 'Custom' }
-        ];
-        this.alignments = [
-            { value: CellAlignment.LEFT, label: 'Left' },
-            { value: CellAlignment.CENTER, label: 'Center' },
-            { value: CellAlignment.RIGHT, label: 'Right' }
-        ];
-        this.verticalAlignments = [
-            { value: CellVerticalAlignment.TOP, label: 'Top' },
-            { value: CellVerticalAlignment.MIDDLE, label: 'Middle' },
-            { value: CellVerticalAlignment.BOTTOM, label: 'Bottom' }
-        ];
-        this.editModes = [
-            { value: EditMode.CLICK, label: 'Click' },
-            { value: EditMode.MANUAL, label: 'Manual' },
-            { value: EditMode.NONE, label: 'None' }
-        ];
-        this.stickyOptions = [
-            { value: false, label: 'None' },
-            { value: 'left', label: 'Left' },
-            { value: 'right', label: 'Right' }
-        ];
-    }
-    ngOnInit() {
-        this.buildForm();
-    }
-    ngOnChanges(changes) {
-        if (changes['column'] && !changes['column'].firstChange && this.form) {
-            this.updateForm();
-        }
+class StHeaderComponent {
+    constructor() {
+        /**
+         * Column index in the visible columns array
+         */
+        this.columnIndex = 0;
+        /**
+         * Whether this is the first column
+         */
+        this.isFirstColumn = false;
+        /**
+         * Whether this is the last column
+         */
+        this.isLastColumn = false;
+        /**
+         * Whether sorting is enabled globally
+         */
+        this.enableSorting = true;
+        /**
+         * Whether filtering is enabled globally
+         */
+        this.enableFiltering = true;
+        /**
+         * Emits column sort event when sort is toggled
+         */
+        this.sortToggle = new EventEmitter();
+        /**
+         * Emits filter changes (future feature)
+         */
+        this.filterChange = new EventEmitter();
+        /**
+         * Emits when column is moved left or right
+         */
+        this.columnMoved = new EventEmitter();
+        /**
+         * Emits when column menu button is clicked
+         */
+        this.menuClick = new EventEmitter();
     }
     /**
-     * Build the reactive form
+     * Cleanup on destroy
      */
-    buildForm() {
-        this.form = this.fb.group({
-            // Basic properties
-            key: [this.column.key, [Validators.required, Validators.pattern(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/)]],
-            header: [this.column.header || ''],
-            dataType: [this.column.dataType || CellDataType.STRING],
-            // Feature flags
-            editable: [this.column.editable !== false],
-            sortable: [this.column.sortable !== false],
-            filterable: [this.column.filterable !== false],
-            resizable: [this.column.resizable !== false],
-            hideable: [this.column.hideable !== false],
-            movable: [this.column.movable !== false],
-            pinnable: [this.column.pinnable !== false],
-            enableMenu: [this.column.enableMenu !== false],
-            // Layout
-            width: [this.column.width || ''],
-            minWidth: [this.column.minWidth || ''],
-            maxWidth: [this.column.maxWidth || ''],
-            sticky: [this.column.sticky || false],
-            alignment: [this.column.alignment || CellAlignment.LEFT],
-            verticalAlignment: [this.column.verticalAlignment || CellVerticalAlignment.MIDDLE],
-            // Edit mode
-            editMode: [this.column.editMode || EditMode.CLICK],
-            // Display
-            visible: [this.column.visible !== false],
-            truncate: [this.column.truncate || false]
-        });
-        // Subscribe to hideable changes to enforce visible=true when hideable=false
-        this.form.get('hideable')?.valueChanges.subscribe(hideable => {
-            if (!hideable) {
-                this.form.get('visible')?.setValue(true, { emitEvent: false });
-            }
-        });
-        // Update form when column changes
-        this.updateForm();
+    ngOnDestroy() {
+        // No cleanup needed - resize is now handled by directive
     }
     /**
-     * Update form values from column
+     * Handle column menu button click
      */
-    updateForm() {
-        if (!this.form || !this.column)
-            return;
-        this.form.patchValue({
-            key: this.column.key,
-            header: this.column.header || '',
-            dataType: this.column.dataType || CellDataType.STRING,
-            editable: this.column.editable !== false,
-            sortable: this.column.sortable !== false,
-            filterable: this.column.filterable !== false,
-            resizable: this.column.resizable !== false,
-            hideable: this.column.hideable !== false,
-            movable: this.column.movable !== false,
-            pinnable: this.column.pinnable !== false,
-            enableMenu: this.column.enableMenu !== false,
-            width: this.column.width || '',
-            minWidth: this.column.minWidth || '',
-            maxWidth: this.column.maxWidth || '',
-            sticky: this.column.sticky || false,
-            alignment: this.column.alignment || CellAlignment.LEFT,
-            verticalAlignment: this.column.verticalAlignment || CellVerticalAlignment.MIDDLE,
-            editMode: this.column.editMode || EditMode.CLICK,
-            visible: this.column.visible !== false,
-            truncate: this.column.truncate || false
-        }, { emitEvent: false });
+    onMenuClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.menuClick.emit(event);
     }
     /**
-     * Handle form submission
+     * Check if column menu should be shown
      */
-    onSave() {
-        if (this.form.valid) {
-            const formValue = this.form.value;
-            const updates = {
-                key: formValue.key,
-                header: formValue.header || undefined,
-                dataType: formValue.dataType,
-                editable: formValue.editable,
-                sortable: formValue.sortable,
-                filterable: formValue.filterable,
-                resizable: formValue.resizable,
-                hideable: formValue.hideable,
-                movable: formValue.movable,
-                pinnable: formValue.pinnable,
-                enableMenu: formValue.enableMenu,
-                width: formValue.width || undefined,
-                minWidth: formValue.minWidth || undefined,
-                maxWidth: formValue.maxWidth || undefined,
-                sticky: formValue.sticky || undefined,
-                alignment: formValue.alignment,
-                verticalAlignment: formValue.verticalAlignment,
-                editMode: formValue.editMode,
-                visible: formValue.visible,
-                truncate: formValue.truncate
-            };
-            // Convert empty strings to undefined
-            Object.keys(updates).forEach(key => {
-                const value = updates[key];
-                if (value === '' || value === null) {
-                    updates[key] = undefined;
-                }
-            });
-            this.columnUpdated.emit(updates);
-        }
-        else {
-            // Mark all fields as touched to show validation errors
-            Object.keys(this.form.controls).forEach(key => {
-                this.form.get(key)?.markAsTouched();
-            });
-        }
+    isMenuEnabled() {
+        return this.column.enableMenu !== false;
     }
     /**
-     * Handle cancel
+     * Check if column is sortable
      */
-    onCancel() {
-        this.cancel.emit();
+    isSortable() {
+        return this.column.sortable !== false && this.enableSorting;
     }
     /**
-     * Get form control error message
+     * Get current sort direction
      */
-    getErrorMessage(controlName) {
-        const control = this.form.get(controlName);
-        if (control?.hasError('required')) {
-            return 'This field is required';
-        }
-        if (control?.hasError('pattern')) {
-            return 'Invalid format';
-        }
-        return '';
+    getSortDirection() {
+        return this.column.sortDirection || SortDirection.NONE;
     }
     /**
-     * Check if form control has error
-     */
-    hasError(controlName) {
-        const control = this.form.get(controlName);
-        return !!(control && control.invalid && (control.dirty || control.touched));
-    }
-}
-ColumnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ColumnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnEditorComponent, selector: "st-column-editor", inputs: { column: "column", columnIndex: "columnIndex" }, outputs: { columnUpdated: "columnUpdated", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        <span class=\"error-message\" *ngIf=\"hasError('key')\">\n          {{ getErrorMessage('key') }}\n        </span>\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          <option *ngFor=\"let type of dataTypes\" [value]=\"type.value\">\n            {{ type.label }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            <option *ngFor=\"let option of stickyOptions\" [value]=\"option.value\">\n              {{ option.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            <option *ngFor=\"let align of alignments\" [value]=\"align.value\">\n              {{ align.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            <option *ngFor=\"let align of verticalAlignments\" [value]=\"align.value\">\n              {{ align.label }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          <option *ngFor=\"let mode of editModes\" [value]=\"mode.value\">\n            {{ mode.label }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:1rem;gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'st-column-editor', template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        <span class=\"error-message\" *ngIf=\"hasError('key')\">\n          {{ getErrorMessage('key') }}\n        </span>\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          <option *ngFor=\"let type of dataTypes\" [value]=\"type.value\">\n            {{ type.label }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            <option *ngFor=\"let option of stickyOptions\" [value]=\"option.value\">\n              {{ option.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            <option *ngFor=\"let align of alignments\" [value]=\"align.value\">\n              {{ align.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            <option *ngFor=\"let align of verticalAlignments\" [value]=\"align.value\">\n              {{ align.label }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          <option *ngFor=\"let mode of editModes\" [value]=\"mode.value\">\n            {{ mode.label }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:1rem;gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { column: [{
-                type: Input
-            }], columnIndex: [{
-                type: Input
-            }], columnUpdated: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }] } });
-
-class StColumnEditorModalComponent {
-    constructor() {
-        this.columnCreated = new EventEmitter();
-        this.cancelled = new EventEmitter();
-        this.columnIndex = -1;
-    }
-    ngOnInit() {
-        // Create a default column that will be edited
-        this.newColumn = this.createDefaultColumn();
-    }
-    ngOnDestroy() {
-        // Cleanup if needed
-    }
-    /**
-     * Create a default column configuration
-     */
-    createDefaultColumn() {
-        return ColumnConfigFactory.text('newColumn', {
-            header: 'New Column',
-            editable: true,
-            sortable: true,
-            filterable: true,
-            resizable: true,
-            hideable: true,
-            visible: true
-        });
-    }
-    /**
-     * Trigger save from external button
-     */
-    onSave() {
-        // Call the column editor's save method
-        if (this.columnEditor) {
-            this.columnEditor.onSave();
-        }
-    }
-    /**
-     * Handle column updates from the editor
-     */
-    onColumnUpdated(updates) {
-        // Merge updates into the new column
-        this.newColumn = { ...this.newColumn, ...updates };
-        // Use ColumnConfigFactory to create proper column based on data type
-        let finalColumn;
-        const key = updates.key || this.newColumn.key;
-        const dataType = updates.dataType || this.newColumn.dataType;
-        switch (dataType) {
-            case CellDataType.NUMBER:
-                finalColumn = ColumnConfigFactory.number(key, this.newColumn);
-                break;
-            case CellDataType.DATE:
-                finalColumn = ColumnConfigFactory.date(key, this.newColumn);
-                break;
-            case CellDataType.BOOLEAN:
-                finalColumn = ColumnConfigFactory.boolean(key, this.newColumn);
-                break;
-            default:
-                finalColumn = ColumnConfigFactory.text(key, this.newColumn);
-        }
-        // Emit the created column
-        this.columnCreated.emit(finalColumn);
-    }
-    /**
-     * Handle cancel from the editor
-     */
-    onCancel() {
-        this.cancelled.emit();
-    }
-    /**
-     * Handle backdrop click to close modal
-     */
-    onBackdropClick(event) {
-        if (event.target === event.currentTarget) {
-            this.cancelled.emit();
-        }
-    }
-    /**
-     * Prevent event propagation from modal content
-     */
-    onModalContentClick(event) {
-        event.stopPropagation();
-    }
-}
-StColumnEditorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StColumnEditorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StColumnEditorModalComponent, selector: "st-column-editor-modal", outputs: { columnCreated: "columnCreated", cancelled: "cancelled" }, viewQueries: [{ propertyName: "columnEditor", first: true, predicate: ColumnEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:white;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"], components: [{ type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'st-column-editor-modal', template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:white;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], propDecorators: { columnCreated: [{
-                type: Output
-            }], cancelled: [{
-                type: Output
-            }], columnEditor: [{
-                type: ViewChild,
-                args: [ColumnEditorComponent]
-            }] } });
-
-/**
- * st-header Component
- * Encapsulates column-specific logic including sorting and filtering
- */
-class StHeaderComponent {
-    constructor() {
-        /**
-         * Column index in the visible columns array
-         */
-        this.columnIndex = 0;
-        /**
-         * Whether this is the first column
-         */
-        this.isFirstColumn = false;
-        /**
-         * Whether this is the last column
-         */
-        this.isLastColumn = false;
-        /**
-         * Whether sorting is enabled globally
-         */
-        this.enableSorting = true;
-        /**
-         * Whether filtering is enabled globally
-         */
-        this.enableFiltering = true;
-        /**
-         * Emits column sort event when sort is toggled
-         */
-        this.sortToggle = new EventEmitter();
-        /**
-         * Emits filter changes (future feature)
-         */
-        this.filterChange = new EventEmitter();
-        /**
-         * Emits when column is moved left or right
-         */
-        this.columnMoved = new EventEmitter();
-        /**
-         * Emits when column menu button is clicked
-         */
-        this.menuClick = new EventEmitter();
-    }
-    /**
-     * Cleanup on destroy
-     */
-    ngOnDestroy() {
-        // No cleanup needed - resize is now handled by directive
-    }
-    /**
-     * Handle column menu button click
-     */
-    onMenuClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.menuClick.emit(event);
-    }
-    /**
-     * Check if column menu should be shown
-     */
-    isMenuEnabled() {
-        return this.column.enableMenu !== false;
-    }
-    /**
-     * Check if column is sortable
-     */
-    isSortable() {
-        return this.column.sortable !== false && this.enableSorting;
-    }
-    /**
-     * Get current sort direction
-     */
-    getSortDirection() {
-        return this.column.sortDirection || SortDirection.NONE;
-    }
-    /**
-     * Check if column is currently sorted
+     * Check if column is currently sorted
      */
     isSorted() {
         return this.column.sortEnabled || false;
@@ -7572,25 +7240,22 @@ class StTableActionsComponent {
     updateDropdownPosition(event) {
         const button = event.currentTarget;
         const rect = button.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const dropdownWidth = 280;
-        const dropdownHeight = 400;
-        let x = rect.left;
+        const dropdownWidth = 220;
+        let x = rect.right;
         let y = rect.bottom + 5;
-        // Adjust horizontal position if dropdown would overflow
-        if (x + dropdownWidth > viewportWidth) {
-            x = Math.max(10, viewportWidth - dropdownWidth - 10);
-        }
-        // Adjust vertical position if dropdown would overflow
-        if (y + dropdownHeight > viewportHeight) {
-            y = rect.top - dropdownHeight - 5;
-        }
+        // // Adjust horizontal position if dropdown would overflow
+        // if (x + dropdownWidth > viewportWidth) {
+        //   x = Math.max(10, viewportWidth - dropdownWidth - 10);
+        // }
+        // // Adjust vertical position if dropdown would overflow
+        // if (y + dropdownHeight > viewportHeight) {
+        //   y = rect.top - dropdownHeight - 5;
+        // }
         this.dropdownStyle = {
-            position: 'fixed',
-            left: `${x}px`,
+            position: 'absolute',
+            left: `${x - dropdownWidth}px`,
             top: `${y}px`,
-            'z-index': 9999
+            'z-index': TableZIndex.TABLE_ACTIONS_DROPDOWN
         };
     }
     /**
@@ -7992,6 +7657,15 @@ class StTableComponent {
             // Update visible columns and cell grid
             this.updateVisibleData();
         }
+        // Handle tableState input changes (when external state is provided, e.g., in workbook)
+        if (changes['tableState'] && !changes['tableState'].firstChange && this.tableState) {
+            // Unsubscribe from old tableState's focus observable to prevent memory leaks
+            this.focusSubscription?.unsubscribe();
+            // Reinitialize keyboard navigation with new tableState
+            if (this.isKeyboardNavigationEnabled()) {
+                this.initializeKeyboardNavigation();
+            }
+        }
         // Recalculate virtual scroll when data changes
         if ((changes['data'] || changes['cellGrid']) && !changes['data']?.firstChange) {
             if (this.isVirtualScrollEnabled()) {
@@ -9016,10 +8690,10 @@ class StTableComponent {
     }
 }
 StTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StTableComponent, deps: [{ token: JsonSchemaValidatorService }, { token: ValidationLoggerService }, { token: VirtualScrollService }], target: i0.ɵɵFactoryTarget.Component });
-StTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StTableComponent, selector: "st-table", inputs: { tableConfig: "tableConfig", data: "data", data$: "data$", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering", validateConfig: "validateConfig" }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n<st-pagination \n  *ngIf=\"showTopPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"top\">\n</st-pagination>\n\n<div class=\"st-table\" *ngIf=\"!(mergedConfig.tableSkeleton?.enabled | async)\" \n  [ngClass]=\"{\n    'virtual-scroll-enabled': isVirtualScrollEnabled(),\n    'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n  }\"\n  [ngStyle]=\"{\n    'max-height.px': !isVirtualScrollEnabled() ? mergedConfig.display?.maxHeight : null\n  }\"\n  stKeyboardNavigation\n  [tableState]=\"getActiveTableState()\" \n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n<!-- Add Column Modal -->\n<st-column-editor-modal *ngIf=\"showColumnModal\" (columnCreated)=\"onColumnCreated($event)\"\n  (cancelled)=\"onModalCancelled()\">\n</st-column-editor-modal>\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:collapse}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;background-color:#fff;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;border-right:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;border:1px solid #E6E9EB;border-left:none;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:collapse;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;border-right:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;border-right:none;position:sticky;right:0}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;border:1px solid #E6E9EB;border-left:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"], components: [{ type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StColumnEditorModalComponent, selector: "st-column-editor-modal", outputs: ["columnCreated", "cancelled"] }, { type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized"] }], pipes: { "async": i1.AsyncPipe } });
+StTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StTableComponent, selector: "st-table", inputs: { tableConfig: "tableConfig", data: "data", data$: "data$", tableState: "tableState", enableSorting: "enableSorting", enableFiltering: "enableFiltering", validateConfig: "validateConfig" }, outputs: { stateChange: "stateChange", dataChange: "dataChange", cellEdit: "cellEdit", cellSave: "cellSave", cellCancel: "cellCancel", cellChange: "cellChange", columnResized: "columnResized", columnMoved: "columnMoved", configValidationErrors: "configValidationErrors", columnAdded: "columnAdded", rowAction: "rowAction", validationStateChange: "validationStateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Top pagination controls -->\n<st-pagination \n  *ngIf=\"showTopPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"top\">\n</st-pagination>\n\n<div class=\"st-table\" *ngIf=\"!(mergedConfig.tableSkeleton?.enabled | async)\" \n  [ngClass]=\"{\n    'virtual-scroll-enabled': isVirtualScrollEnabled(),\n    'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n  }\"\n  [ngStyle]=\"{\n    'max-height.px': !isVirtualScrollEnabled() ? mergedConfig.display?.maxHeight : null\n  }\"\n  stKeyboardNavigation\n  [tableState]=\"getActiveTableState()\" \n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:collapse}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;background-color:#fff;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;border-right:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;border:1px solid #E6E9EB;border-left:none;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:collapse;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;border-right:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;border-right:none;position:sticky;right:0}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;border:1px solid #E6E9EB;border-left:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"], components: [{ type: StPaginationComponent, selector: "st-pagination", inputs: ["tableState", "tableConfig", "position"] }, { type: StColumnMenuDropdownComponent, selector: "st-column-menu-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: ["isOpen", "position", "context"], outputs: ["actionClicked", "closed"] }, { type: StHeaderComponent, selector: "st-header", inputs: ["column", "columnIndex", "isFirstColumn", "isLastColumn", "tableState", "enableSorting", "enableFiltering"], outputs: ["sortToggle", "filterChange", "columnMoved", "menuClick"] }, { type: StTableActionsComponent, selector: "st-table-actions", inputs: ["tableState", "allowAddColumn"], outputs: ["addColumnClicked"] }, { type: StCellComponent, selector: "st-cell", inputs: ["cell", "editMode", "tableState", "tableConfig", "columnIndex"], outputs: ["cellChange", "cellEdit", "cellSave", "cellCancel", "cellSaveAndNavigate"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: StKeyboardNavigationDirective, selector: "[stKeyboardNavigation]", inputs: ["tableState"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: StColumnResizeDirective, selector: "[stColumnResize]", inputs: ["column"], outputs: ["columnResized"] }], pipes: { "async": i1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-table', template: "<!-- Top pagination controls -->\n<st-pagination \n  *ngIf=\"showTopPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"top\">\n</st-pagination>\n\n<div class=\"st-table\" *ngIf=\"!(mergedConfig.tableSkeleton?.enabled | async)\" \n  [ngClass]=\"{\n    'virtual-scroll-enabled': isVirtualScrollEnabled(),\n    'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n  }\"\n  [ngStyle]=\"{\n    'max-height.px': !isVirtualScrollEnabled() ? mergedConfig.display?.maxHeight : null\n  }\"\n  stKeyboardNavigation\n  [tableState]=\"getActiveTableState()\" \n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n<!-- Add Column Modal -->\n<st-column-editor-modal *ngIf=\"showColumnModal\" (columnCreated)=\"onColumnCreated($event)\"\n  (cancelled)=\"onModalCancelled()\">\n</st-column-editor-modal>\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:collapse}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;background-color:#fff;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;border-right:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;border:1px solid #E6E9EB;border-left:none;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:collapse;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;border-right:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;border-right:none;position:sticky;right:0}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;border:1px solid #E6E9EB;border-left:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"] }]
+            args: [{ selector: 'st-table', template: "<!-- Top pagination controls -->\n<st-pagination \n  *ngIf=\"showTopPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"top\">\n</st-pagination>\n\n<div class=\"st-table\" *ngIf=\"!(mergedConfig.tableSkeleton?.enabled | async)\" \n  [ngClass]=\"{\n    'virtual-scroll-enabled': isVirtualScrollEnabled(),\n    'keyboard-navigation-enabled': isKeyboardNavigationEnabled()\n  }\"\n  [ngStyle]=\"{\n    'max-height.px': !isVirtualScrollEnabled() ? mergedConfig.display?.maxHeight : null\n  }\"\n  stKeyboardNavigation\n  [tableState]=\"getActiveTableState()\" \n  [attr.tabindex]=\"isKeyboardNavigationEnabled() ? 0 : -1\"\n  (focus)=\"onTableContainerFocus($event)\"\n  [attr.title]=\"isKeyboardNavigationEnabled() ? 'Click a cell or press Tab to start keyboard navigation' : null\">\n  <!-- Unified Table Actions Menu -->\n\n  <!-- Virtual scroll viewport wrapper -->\n  <div class=\"st-scroll-viewport\" #scrollViewport *ngIf=\"isVirtualScrollEnabled()\"\n    [ngStyle]=\"{ 'height.px': getVirtualScrollViewportHeight() }\">\n\n    <!-- Spacer to create scrollable area -->\n    <div class=\"st-scroll-spacer\" [ngStyle]=\"{ 'height.px': virtualScrollTotalHeight$ | async }\">\n    </div>\n\n    <!-- Table positioner with transform (instead of tbody) -->\n    <div class=\"st-table-positioner\" [ngStyle]=\"{ transform: 'translateY(' + (virtualScrollOffsetY$ | async) + 'px)' }\">\n      <!-- Table with only visible rows -->\n      <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n        mode: 'virtual',\n        theadStyle: { top: (virtualScrollOffsetYNeg$ | async) + 'px' }\n      }\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Standard table (when virtual scroll disabled) -->\n  <ng-container *ngIf=\"!isVirtualScrollEnabled()\">\n    <ng-container *ngTemplateOutlet=\"tableTemplate; context: { \n      mode: 'standard',\n      theadStyle: null\n    }\"></ng-container>\n  </ng-container>\n\n  <!-- Shared Column Menu Dropdown -->\n  <st-column-menu-dropdown \n  [isOpen]=\"columnMenuState.isOpen\"\n  [position]=\"columnMenuState.position\"\n  [context]=\"columnMenuState.context\"\n  (actionClicked)=\"onColumnActionClicked($event)\"\n  (closed)=\"closeColumnMenu()\">\n  </st-column-menu-dropdown>\n</div>\n\n<ng-container *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n  <ng-container *ngTemplateOutlet=\"skeletonLoader\"></ng-container>\n</ng-container>\n\n<!-- Shared Row Actions Dropdown -->\n<st-row-actions-dropdown [isOpen]=\"dropdownState.isOpen\" [position]=\"dropdownState.position\"\n  [context]=\"dropdownState.context\" (actionClicked)=\"onRowActionClicked($event)\" (closed)=\"closeRowActionsDropdown()\">\n</st-row-actions-dropdown>\n\n\n<!-- Bottom pagination controls -->\n<st-pagination \n  *ngIf=\"showBottomPagination() && !(mergedConfig.tableSkeleton?.enabled | async)\" \n  [tableState]=\"getActiveTableState()\"\n  [tableConfig]=\"mergedConfig\"\n  position=\"bottom\">\n</st-pagination>\n\n\n  <!-- ========================================== -->\n  <!-- REUSABLE TABLE TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #tableTemplate let-mode=\"mode\" let-theadStyle=\"theadStyle\">\n    <table class=\"st-table-element\">\n      <!-- TABLE HEADER -->\n      <thead [ngClass]=\"{ 'sticky': mergedConfig.display?.stickyHeader }\" [ngStyle]=\"theadStyle\">\n        <tr>\n          <!-- Row Number Header -->\n          <th *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-header header-cell sticky-left\"\n              [ngStyle]=\"{\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_HEADER_CELL,\n                'width.px': 30\n              }\">\n            #\n          </th>\n          <!-- Column Headers -->\n          <th \n            *ngFor=\"let column of visibleColumns; let colIndex = index; let isFirst = first; let isLast = last\"\n            [ngClass]=\"{\n              'header-cell': mode === 'standard',\n              'sticky-left': column.sticky === 'left',\n              'sticky-right': column.sticky === 'right',\n              'sticky-right-first': column.sticky === 'right' && isFirstStickyRight(column.key),\n              'resizable': column.resizable !== false\n            }\"\n            [ngStyle]=\"{\n              position: column.sticky ? 'sticky' : null,\n              'left.px': column.sticky === 'left' ? (column.stickyOffset || 0) : null,\n              'right.px': column.sticky === 'right' ? (column.stickyOffset || 0) : null,\n              'z-index': column.sticky ? ZIndex.STICKY_HEADER_CELL : null,\n              'width.px': column.width\n            }\">\n            \n            <st-header \n              [column]=\"column\"\n              [columnIndex]=\"colIndex\"\n              [isFirstColumn]=\"isFirst\"\n              [isLastColumn]=\"isLast\"\n              [tableState]=\"getActiveTableState()\"\n              [enableSorting]=\"mergedConfig.sorting?.enabled ?? enableSorting\"\n              [enableFiltering]=\"mergedConfig.filtering?.enabled ?? enableFiltering\"\n              (columnMoved)=\"onColumnMoved($event)\"\n              (menuClick)=\"openColumnMenu($event, column, colIndex, isFirst, isLast)\">\n            </st-header>\n\n            <div \n              class=\"resize-handle\" \n              stColumnResize\n              [column]=\"column\"\n              (columnResized)=\"onColumnResized($event)\"\n              *ngIf=\"column.resizable !== false\">\n            </div>\n          </th>\n          \n          <!-- Settings Column Header -->\n          <th \n            class=\"settings-column sticky-right\"\n            [ngClass]=\"{ 'header-cell': mode === 'standard' }\"\n            [ngStyle]=\"{ 'z-index': ZIndex.STICKY_HEADER_CELL }\">\n            <div [ngClass]=\"{ 'flex-center': mode === 'virtual', 'header-content': mode === 'standard' }\">\n              <st-table-actions \n                [tableState]=\"getActiveTableState()\"\n                [allowAddColumn]=\"mergedConfig.features?.columnManagement?.allowAdd || false\"\n                (addColumnClicked)=\"onAddColumnClick()\">\n              </st-table-actions>\n            </div>\n          </th>\n        </tr>\n      </thead>\n\n      <!-- TABLE BODY -->\n      <tbody>\n        <!-- Virtual Scroll Rows -->\n        <ng-container *ngIf=\"mode === 'virtual'\">\n          <tr *ngFor=\"let row of visibleRows$ | async; let relativeIndex = index; trackBy: trackByRowIndex\"\n            [attr.data-row-index]=\"getAbsoluteRowIndex(relativeIndex)\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{getAbsoluteRowIndex(relativeIndex) + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: getAbsoluteRowIndex(relativeIndex),\n              mode: 'virtual',\n              relativeIndex: relativeIndex\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n\n        <!-- Standard Rows -->\n        <ng-container *ngIf=\"mode === 'standard'\">\n          <tr *ngFor=\"let row of visibleCellGrid; let rowIndex = index\" [attr.data-row-index]=\"rowIndex\">\n            <!-- Row Number Cell -->\n            <td *ngIf=\"mergedConfig.showRowNumber\" class=\"row-number-cell\" \n              [ngClass]=\"{ 'sticky-left': 'left' }\"\n              [ngStyle]=\"{\n                'width.px': 30,\n                position: 'sticky',\n                'left.px': 0,\n                'z-index': ZIndex.STICKY_BODY_CELL,\n                'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n              }\">\n              {{rowIndex + 1}}\n            </td>\n            <ng-container *ngTemplateOutlet=\"bodyCellTemplate; context: { \n              row: row,\n              rowIndex: rowIndex,\n              mode: 'standard'\n            }\"></ng-container>\n          </tr>\n        </ng-container>\n      </tbody>\n    </table>\n  </ng-template>\n\n    <!-- ========================================== -->\n  <!-- REUSABLE BODY CELL TEMPLATE -->\n  <!-- ========================================== -->\n  <ng-template #bodyCellTemplate let-row=\"row\" let-rowIndex=\"rowIndex\" let-mode=\"mode\" let-relativeIndex=\"relativeIndex\">\n    <!-- Data Cells -->\n    <td \n      *ngFor=\"let cell of row; let colIndex = index\"\n      [ngClass]=\"{\n        'sticky-left': visibleColumns[colIndex]?.sticky === 'left',\n        'sticky-right': visibleColumns[colIndex]?.sticky === 'right',\n        'sticky-right-first': visibleColumns[colIndex]?.sticky === 'right' && visibleColumns[colIndex]?.key && isFirstStickyRight(visibleColumns[colIndex].key),\n        'align-center': visibleColumns[colIndex]?.alignment === 'center',\n        'align-right': visibleColumns[colIndex]?.alignment === 'right',\n        'cell-focused': cell.isFocused()\n      }\"\n      [ngStyle]=\"{\n        position: visibleColumns[colIndex]?.sticky ? 'sticky' : null,\n        'left.px': visibleColumns[colIndex]?.sticky === 'left' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'right.px': visibleColumns[colIndex]?.sticky === 'right' ? (visibleColumns[colIndex]?.stickyOffset || 0) : null,\n        'z-index': visibleColumns[colIndex]?.sticky ? ZIndex.STICKY_BODY_CELL : null,\n        'width.px': visibleColumns[colIndex]?.width,\n        'height.px': mode === 'virtual' ? getVirtualScrollItemSize() : null\n      }\"\n      (click)=\"isKeyboardNavigationEnabled() ? onCellClick(rowIndex, colIndex) : null\">\n      \n      <!-- Virtual Scroll Cell -->\n      <st-cell \n        *ngIf=\"mode === 'virtual'\"\n        [cell]=\"cell\" \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\" \n        [editMode]=\"getEditModeForCells()\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellEdit)=\"onCellEdit($event)\" \n        (cellSave)=\"onCellSave($event)\"\n        (cellSaveAndNavigate)=\"onCellSaveAndNavigate($event)\" \n        (cellCancel)=\"onCellCancel($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n\n      <!-- Standard Cell -->\n      <st-cell \n        *ngIf=\"mode === 'standard'\"\n        [cell]=\"cell\"  \n        [attr.tabindex]=\"cell.isFocused() ? 0 : -1\"\n        [tableState]=\"getActiveTableState()\"\n        [tableConfig]=\"mergedConfig\"\n        [columnIndex]=\"colIndex\"\n        (cellSave)=\"onCellSave($event)\"\n        (cellChange)=\"cellChange.emit($event)\">\n      </st-cell>\n    </td>\n    \n    <!-- Row Actions Cell -->\n    <td class=\"settings-column\"\n      [ngClass]=\"{\n        'has-actions': hasRowActions()\n      }\"\n      [ngStyle]=\"{\n        position: hasRowActions() ? 'sticky' : null,\n        'right.px': hasRowActions() ? 0 : null,\n        'z-index': hasRowActions() ? ZIndex.STICKY_BODY_CELL : null\n      }\">\n      <button \n        *ngIf=\"hasRowActions()\"\n        class=\"settings-trigger\"\n        (click)=\"openRowActionsDropdown($event, getRowData(rowIndex), rowIndex)\"\n        type=\"button\" \n        aria-label=\"Row actions\">\n        \u22EF\n      </button>\n    </td>\n  </ng-template>\n\n<ng-template #skeletonLoader>\n  <div class=\"list-row\" *ngIf=\"(mergedConfig.tableSkeleton?.enabled | async)\">\n    <div *ngFor=\"let i of skeletonColumns\" class=\"list-content\">\n      <nile-skeleton-loader variant=\"text\" width=\"90%\" height=\"18\" *ngFor=\"let j of skeletonRows\"></nile-skeleton-loader>\n    </div>\n  </div>\n</ng-template>", styles: [".st-table{width:100%;overflow:auto;position:relative;height:100%;max-height:30rem;border-radius:4px;border:1px solid #E6E9EB}.st-table st-table-actions{position:sticky;right:0}.st-table.keyboard-navigation-enabled{cursor:pointer}.st-table.keyboard-navigation-enabled:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}.st-table.keyboard-navigation-enabled td.cell-focused{outline:2px solid #4299e1;outline-offset:-1px;position:relative;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:focus{outline:2px solid #4299e1;outline-offset:-1px;box-shadow:0 0 0 3px #3182ce1a}.st-table.keyboard-navigation-enabled td.cell-focused:has(.st-cell.editing){box-shadow:0 0 0 4px #2563eb26}.st-table.virtual-scroll-enabled{overflow-x:visible;margin:0;border:1px solid #E6E9EB;border-collapse:collapse}.st-table.virtual-scroll-enabled .st-scroll-viewport{position:relative;overflow-y:auto;overflow-x:auto;scroll-behavior:smooth}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-scroll-spacer{position:absolute;top:0;left:0;width:1px;pointer-events:none;z-index:-1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-positioner{position:absolute;top:0;left:0;right:0;will-change:transform}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element{position:relative;width:100%;border-collapse:collapse;border-spacing:0;background-color:#fff;table-layout:fixed}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;border:none;background-color:#fff;will-change:top;border-right:1px solid #E6E9EB}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left{position:sticky;left:0;background-color:#fff;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right{position:sticky;right:0;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element thead tr th.sticky-right-first:not(.settings-column):before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr{border-bottom:1px solid #E6E9EB;transition:background-color .15s;height:2rem;box-sizing:border-box}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr:last-child{border-bottom:none}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td{padding:0;vertical-align:middle;box-sizing:border-box;height:2rem;border:1px solid #E6E9EB;border-left:none;background-color:#fff}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-center{text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.align-right{text-align:right}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column{width:2rem;text-align:center}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.settings-column .settings-trigger:focus{outline:2px solid #4299e1;outline-offset:2px}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)):after{content:\"\";position:absolute;right:-6px;top:0;bottom:-1px;width:5px;border-left:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 100%)}.st-table.virtual-scroll-enabled .st-scroll-viewport .st-table-element tbody tr td.sticky-right-first:before{content:\"\";position:absolute;left:-6px;top:0;bottom:-1px;width:5px;border-right:1px solid var(--borderColor);background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%)}.st-table:not(.virtual-scroll-enabled) .st-table-element{width:100%;height:100%;overflow:auto;border-collapse:collapse;table-layout:fixed}.st-table:not(.virtual-scroll-enabled) .st-table-element thead{background-color:#fff;border-bottom:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky{position:sticky;top:0;z-index:3;background-color:#fff;will-change:top;backface-visibility:hidden}.st-table:not(.virtual-scroll-enabled) .st-table-element thead.sticky:after{content:\"\";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent)}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th{padding:0;vertical-align:middle;position:relative;background-color:#fff;border-right:1px solid #E6E9EB}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left{position:sticky;left:0;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-left:not(:has(~ th.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right{position:sticky;right:0;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.settings-column{width:2rem;text-align:center;font-weight:600;font-size:12px;border-right:none;position:sticky;right:0}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle{position:absolute;top:0;right:0;bottom:0;width:8px;cursor:col-resize;z-index:4;pointer-events:auto}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:after{content:\"\";position:absolute;top:50%;right:3px;transform:translateY(-50%);width:2px;height:20px;background-color:#cbd5e0;opacity:0;transition:opacity .2s}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:hover:after,.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.resizable .resize-handle:active:after{opacity:1}.st-table:not(.virtual-scroll-enabled) .st-table-element thead tr th.row-number-header{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody{will-change:transform;position:relative;z-index:1}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr{height:2rem;box-sizing:border-box}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr:last-child{border-bottom:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td{padding:0;vertical-align:middle;height:2rem;background-color:#fff;border:1px solid #E6E9EB;border-left:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.row-number-cell{text-align:center;font-weight:300;font-size:12px;background-color:#f8f8f8}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-center{text-align:center}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.align-right{text-align:right}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left{position:sticky;z-index:2;border-right:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-left:not(:has(~ td.sticky-left)){box-shadow:2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right{position:sticky;z-index:2;border-left:1px solid #E6E9EB!important}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.sticky-right-first:not(.settings-column){box-shadow:-2px 0 5px -2px #0003}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column{position:sticky;right:0;width:2rem;text-align:center;border-right:none}.st-table:not(.virtual-scroll-enabled) .st-table-element tbody tr td.settings-column .settings-trigger{background:none;border:none;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px;transition:all .15s ease}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content{display:flex;height:2rem;align-items:center}.st-table:not(.virtual-scroll-enabled) .st-table-element .header-content .table-header-text{flex-grow:1;padding-left:4px}.st-table:not(.virtual-scroll-enabled) .st-table-element .settings-column>.header-content{display:flex;align-items:center;justify-content:center}.flex-center{display:flex;align-items:center;justify-content:center}.list-row{padding:1rem}.list-row .list-content{display:flex;justify-content:space-evenly;gap:4px;margin-bottom:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: JsonSchemaValidatorService }, { type: ValidationLoggerService }, { type: VirtualScrollService }]; }, propDecorators: { tableConfig: [{
                 type: Input
             }], data: [{
@@ -9206,6 +8880,303 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Column Editor Component
+ * Form-based column configuration
+ */
+class ColumnEditorComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.columnUpdated = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.dataTypes = [
+            { value: CellDataType.STRING, label: 'Text' },
+            { value: CellDataType.NUMBER, label: 'Number' },
+            { value: CellDataType.DATE, label: 'Date' },
+            { value: CellDataType.BOOLEAN, label: 'Boolean' },
+            { value: CellDataType.CUSTOM, label: 'Custom' }
+        ];
+        this.alignments = [
+            { value: CellAlignment.LEFT, label: 'Left' },
+            { value: CellAlignment.CENTER, label: 'Center' },
+            { value: CellAlignment.RIGHT, label: 'Right' }
+        ];
+        this.verticalAlignments = [
+            { value: CellVerticalAlignment.TOP, label: 'Top' },
+            { value: CellVerticalAlignment.MIDDLE, label: 'Middle' },
+            { value: CellVerticalAlignment.BOTTOM, label: 'Bottom' }
+        ];
+        this.editModes = [
+            { value: EditMode.CLICK, label: 'Click' },
+            { value: EditMode.MANUAL, label: 'Manual' },
+            { value: EditMode.NONE, label: 'None' }
+        ];
+        this.stickyOptions = [
+            { value: false, label: 'None' },
+            { value: 'left', label: 'Left' },
+            { value: 'right', label: 'Right' }
+        ];
+    }
+    ngOnInit() {
+        this.buildForm();
+    }
+    ngOnChanges(changes) {
+        if (changes['column'] && !changes['column'].firstChange && this.form) {
+            this.updateForm();
+        }
+    }
+    /**
+     * Build the reactive form
+     */
+    buildForm() {
+        this.form = this.fb.group({
+            // Basic properties
+            key: [this.column.key, [Validators.required, Validators.pattern(/^[a-zA-Z_$][a-zA-Z0-9_$]*$/)]],
+            header: [this.column.header || ''],
+            dataType: [this.column.dataType || CellDataType.STRING],
+            // Feature flags
+            editable: [this.column.editable !== false],
+            sortable: [this.column.sortable !== false],
+            filterable: [this.column.filterable !== false],
+            resizable: [this.column.resizable !== false],
+            hideable: [this.column.hideable !== false],
+            movable: [this.column.movable !== false],
+            pinnable: [this.column.pinnable !== false],
+            enableMenu: [this.column.enableMenu !== false],
+            // Layout
+            width: [this.column.width || ''],
+            minWidth: [this.column.minWidth || ''],
+            maxWidth: [this.column.maxWidth || ''],
+            sticky: [this.column.sticky || false],
+            alignment: [this.column.alignment || CellAlignment.LEFT],
+            verticalAlignment: [this.column.verticalAlignment || CellVerticalAlignment.MIDDLE],
+            // Edit mode
+            editMode: [this.column.editMode || EditMode.CLICK],
+            // Display
+            visible: [this.column.visible !== false],
+            truncate: [this.column.truncate || false]
+        });
+        // Subscribe to hideable changes to enforce visible=true when hideable=false
+        this.form.get('hideable')?.valueChanges.subscribe(hideable => {
+            if (!hideable) {
+                this.form.get('visible')?.setValue(true, { emitEvent: false });
+            }
+        });
+        // Update form when column changes
+        this.updateForm();
+    }
+    /**
+     * Update form values from column
+     */
+    updateForm() {
+        if (!this.form || !this.column)
+            return;
+        this.form.patchValue({
+            key: this.column.key,
+            header: this.column.header || '',
+            dataType: this.column.dataType || CellDataType.STRING,
+            editable: this.column.editable !== false,
+            sortable: this.column.sortable !== false,
+            filterable: this.column.filterable !== false,
+            resizable: this.column.resizable !== false,
+            hideable: this.column.hideable !== false,
+            movable: this.column.movable !== false,
+            pinnable: this.column.pinnable !== false,
+            enableMenu: this.column.enableMenu !== false,
+            width: this.column.width || '',
+            minWidth: this.column.minWidth || '',
+            maxWidth: this.column.maxWidth || '',
+            sticky: this.column.sticky || false,
+            alignment: this.column.alignment || CellAlignment.LEFT,
+            verticalAlignment: this.column.verticalAlignment || CellVerticalAlignment.MIDDLE,
+            editMode: this.column.editMode || EditMode.CLICK,
+            visible: this.column.visible !== false,
+            truncate: this.column.truncate || false
+        }, { emitEvent: false });
+    }
+    /**
+     * Handle form submission
+     */
+    onSave() {
+        if (this.form.valid) {
+            const formValue = this.form.value;
+            const updates = {
+                key: formValue.key,
+                header: formValue.header || undefined,
+                dataType: formValue.dataType,
+                editable: formValue.editable,
+                sortable: formValue.sortable,
+                filterable: formValue.filterable,
+                resizable: formValue.resizable,
+                hideable: formValue.hideable,
+                movable: formValue.movable,
+                pinnable: formValue.pinnable,
+                enableMenu: formValue.enableMenu,
+                width: formValue.width || undefined,
+                minWidth: formValue.minWidth || undefined,
+                maxWidth: formValue.maxWidth || undefined,
+                sticky: formValue.sticky || undefined,
+                alignment: formValue.alignment,
+                verticalAlignment: formValue.verticalAlignment,
+                editMode: formValue.editMode,
+                visible: formValue.visible,
+                truncate: formValue.truncate
+            };
+            // Convert empty strings to undefined
+            Object.keys(updates).forEach(key => {
+                const value = updates[key];
+                if (value === '' || value === null) {
+                    updates[key] = undefined;
+                }
+            });
+            this.columnUpdated.emit(updates);
+        }
+        else {
+            // Mark all fields as touched to show validation errors
+            Object.keys(this.form.controls).forEach(key => {
+                this.form.get(key)?.markAsTouched();
+            });
+        }
+    }
+    /**
+     * Handle cancel
+     */
+    onCancel() {
+        this.cancel.emit();
+    }
+    /**
+     * Get form control error message
+     */
+    getErrorMessage(controlName) {
+        const control = this.form.get(controlName);
+        if (control?.hasError('required')) {
+            return 'This field is required';
+        }
+        if (control?.hasError('pattern')) {
+            return 'Invalid format';
+        }
+        return '';
+    }
+    /**
+     * Check if form control has error
+     */
+    hasError(controlName) {
+        const control = this.form.get(controlName);
+        return !!(control && control.invalid && (control.dirty || control.touched));
+    }
+}
+ColumnEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnEditorComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+ColumnEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ColumnEditorComponent, selector: "st-column-editor", inputs: { column: "column", columnIndex: "columnIndex" }, outputs: { columnUpdated: "columnUpdated", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        <span class=\"error-message\" *ngIf=\"hasError('key')\">\n          {{ getErrorMessage('key') }}\n        </span>\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          <option *ngFor=\"let type of dataTypes\" [value]=\"type.value\">\n            {{ type.label }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            <option *ngFor=\"let option of stickyOptions\" [value]=\"option.value\">\n              {{ option.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            <option *ngFor=\"let align of alignments\" [value]=\"align.value\">\n              {{ align.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            <option *ngFor=\"let align of verticalAlignments\" [value]=\"align.value\">\n              {{ align.label }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          <option *ngFor=\"let mode of editModes\" [value]=\"mode.value\">\n            {{ mode.label }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:1rem;gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"], directives: [{ type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ColumnEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-column-editor', template: "<div class=\"column-editor\">\n  <div class=\"editor-header\">\n    <h3>Column Editor</h3>\n    <div class=\"editor-actions\">\n      <button class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button class=\"btn btn-primary\" (click)=\"onSave()\">Save</button>\n    </div>\n  </div>\n\n  <form [formGroup]=\"form\" class=\"editor-form\">\n    <!-- Basic Properties -->\n    <div class=\"form-section\">\n      <h4>Basic Properties</h4>\n      <div class=\"form-group\">\n        <label for=\"key\">Key *</label>\n        <input\n          id=\"key\"\n          type=\"text\"\n          formControlName=\"key\"\n          class=\"form-control\"\n          [class.error]=\"hasError('key')\"\n          placeholder=\"columnKey\">\n        <span class=\"error-message\" *ngIf=\"hasError('key')\">\n          {{ getErrorMessage('key') }}\n        </span>\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"header\">Header</label>\n        <input\n          id=\"header\"\n          type=\"text\"\n          formControlName=\"header\"\n          class=\"form-control\"\n          placeholder=\"Column Header\">\n      </div>\n\n      <div class=\"form-group\">\n        <label for=\"dataType\">Data Type</label>\n        <select id=\"dataType\" formControlName=\"dataType\" class=\"form-control\">\n          <option *ngFor=\"let type of dataTypes\" [value]=\"type.value\">\n            {{ type.label }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Features -->\n    <div class=\"form-section\">\n      <h4>Features</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"editable\">\n          <span>Editable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"sortable\">\n          <span>Sortable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"filterable\">\n          <span>Filterable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"resizable\">\n          <span>Resizable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"hideable\">\n          <span>Hideable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"movable\">\n          <span>Movable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"pinnable\">\n          <span>Pinnable</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"enableMenu\">\n          <span>Enable Menu</span>\n        </label>\n      </div>\n    </div>\n\n    <!-- Layout -->\n    <div class=\"form-section\">\n      <h4>Layout</h4>\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"width\">Width</label>\n          <input\n            id=\"width\"\n            type=\"text\"\n            formControlName=\"width\"\n            class=\"form-control\"\n            placeholder=\"150 or 'auto'\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"minWidth\">Min Width</label>\n          <input\n            id=\"minWidth\"\n            type=\"number\"\n            formControlName=\"minWidth\"\n            class=\"form-control\"\n            placeholder=\"50\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"maxWidth\">Max Width</label>\n          <input\n            id=\"maxWidth\"\n            type=\"number\"\n            formControlName=\"maxWidth\"\n            class=\"form-control\"\n            placeholder=\"500\">\n        </div>\n      </div>\n\n      <div class=\"form-row\">\n        <div class=\"form-group\">\n          <label for=\"sticky\">Sticky</label>\n          <select id=\"sticky\" formControlName=\"sticky\" class=\"form-control\">\n            <option *ngFor=\"let option of stickyOptions\" [value]=\"option.value\">\n              {{ option.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"alignment\">Alignment</label>\n          <select id=\"alignment\" formControlName=\"alignment\" class=\"form-control\">\n            <option *ngFor=\"let align of alignments\" [value]=\"align.value\">\n              {{ align.label }}\n            </option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label for=\"verticalAlignment\">Vertical Alignment</label>\n          <select id=\"verticalAlignment\" formControlName=\"verticalAlignment\" class=\"form-control\">\n            <option *ngFor=\"let align of verticalAlignments\" [value]=\"align.value\">\n              {{ align.label }}\n            </option>\n          </select>\n        </div>\n      </div>\n    </div>\n\n    <!-- Edit Mode -->\n    <div class=\"form-section\">\n      <h4>Edit Mode</h4>\n      <div class=\"form-group\">\n        <label for=\"editMode\">Edit Trigger</label>\n        <select id=\"editMode\" formControlName=\"editMode\" class=\"form-control\">\n          <option *ngFor=\"let mode of editModes\" [value]=\"mode.value\">\n            {{ mode.label }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <!-- Display -->\n    <div class=\"form-section\">\n      <h4>Display</h4>\n      <div class=\"checkbox-group\">\n        <label class=\"checkbox-label\" [class.disabled]=\"!form.get('hideable')?.value\">\n          <input type=\"checkbox\" \n                 formControlName=\"visible\"\n                 [disabled]=\"!form.get('hideable')?.value\"\n                 [title]=\"!form.get('hideable')?.value ? 'Column visibility cannot be changed when hideable is disabled' : ''\">\n          <span>Visible</span>\n        </label>\n        <label class=\"checkbox-label\">\n          <input type=\"checkbox\" formControlName=\"truncate\">\n          <span>Truncate Text</span>\n        </label>\n      </div>\n    </div>\n  </form>\n</div>\n\n", styles: [".column-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;background-color:#f8f8f8}.editor-header h3{margin:0;font-size:1.125rem;font-weight:600;color:#333}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.875rem;transition:all .2s}.btn.btn-primary{background-color:#2196f3;color:#fff;border-color:#2196f3}.btn.btn-primary:hover{background-color:#1976d2;border-color:#1976d2}.btn.btn-secondary{background-color:#fff;color:#333}.btn.btn-secondary:hover{background-color:#f5f5f5}.editor-form{flex:1;overflow-y:auto;padding:1rem}.form-section{margin-bottom:2rem}.form-section h4{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#333}.form-control{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem;transition:border-color .2s}.form-control:focus{outline:none;border-color:#2196f3}.form-control.error{border-color:#f44336}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:1rem;gap:1rem}.checkbox-group{display:flex;row-gap:1rem;flex-wrap:wrap;gap:.75rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:#333}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label.disabled{opacity:.6;cursor:not-allowed}.checkbox-label.disabled span{color:#999}.error-message{display:block;margin-top:.25rem;font-size:.75rem;color:#f44336}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { column: [{
+                type: Input
+            }], columnIndex: [{
+                type: Input
+            }], columnUpdated: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }] } });
+
+class StColumnEditorModalComponent {
+    constructor() {
+        this.columnCreated = new EventEmitter();
+        this.cancelled = new EventEmitter();
+        this.columnIndex = -1;
+    }
+    ngOnInit() {
+        // Create a default column that will be edited
+        this.newColumn = this.createDefaultColumn();
+    }
+    ngOnDestroy() {
+        // Cleanup if needed
+    }
+    /**
+     * Create a default column configuration
+     */
+    createDefaultColumn() {
+        return ColumnConfigFactory.text('newColumn', {
+            header: 'New Column',
+            editable: true,
+            sortable: true,
+            filterable: true,
+            resizable: true,
+            hideable: true,
+            visible: true
+        });
+    }
+    /**
+     * Trigger save from external button
+     */
+    onSave() {
+        // Call the column editor's save method
+        if (this.columnEditor) {
+            this.columnEditor.onSave();
+        }
+    }
+    /**
+     * Handle column updates from the editor
+     */
+    onColumnUpdated(updates) {
+        // Merge updates into the new column
+        this.newColumn = { ...this.newColumn, ...updates };
+        // Use ColumnConfigFactory to create proper column based on data type
+        let finalColumn;
+        const key = updates.key || this.newColumn.key;
+        const dataType = updates.dataType || this.newColumn.dataType;
+        switch (dataType) {
+            case CellDataType.NUMBER:
+                finalColumn = ColumnConfigFactory.number(key, this.newColumn);
+                break;
+            case CellDataType.DATE:
+                finalColumn = ColumnConfigFactory.date(key, this.newColumn);
+                break;
+            case CellDataType.BOOLEAN:
+                finalColumn = ColumnConfigFactory.boolean(key, this.newColumn);
+                break;
+            default:
+                finalColumn = ColumnConfigFactory.text(key, this.newColumn);
+        }
+        // Emit the created column
+        this.columnCreated.emit(finalColumn);
+    }
+    /**
+     * Handle cancel from the editor
+     */
+    onCancel() {
+        this.cancelled.emit();
+    }
+    /**
+     * Handle backdrop click to close modal
+     */
+    onBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.cancelled.emit();
+        }
+    }
+    /**
+     * Prevent event propagation from modal content
+     */
+    onModalContentClick(event) {
+        event.stopPropagation();
+    }
+}
+StColumnEditorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StColumnEditorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StColumnEditorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StColumnEditorModalComponent, selector: "st-column-editor-modal", outputs: { columnCreated: "columnCreated", cancelled: "cancelled" }, viewQueries: [{ propertyName: "columnEditor", first: true, predicate: ColumnEditorComponent, descendants: true }], ngImport: i0, template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:white;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"], components: [{ type: ColumnEditorComponent, selector: "st-column-editor", inputs: ["column", "columnIndex"], outputs: ["columnUpdated", "cancel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StColumnEditorModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-column-editor-modal', template: "<div class=\"modal-backdrop\" (click)=\"onBackdropClick($event)\">\n  <div class=\"modal-content\" (click)=\"onModalContentClick($event)\">\n    <div class=\"modal-header\">\n      <h2>Add New Column</h2>\n      <button class=\"close-button\" (click)=\"onCancel()\" type=\"button\" aria-label=\"Close\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n    <div class=\"modal-body\">\n      <!-- Now using the shared st-column-editor component from SharedTableComponentsModule -->\n      <st-column-editor\n        [column]=\"newColumn\"\n        [columnIndex]=\"columnIndex\"\n        (columnUpdated)=\"onColumnUpdated($event)\"\n        (cancel)=\"onCancel()\">\n      </st-column-editor>\n    </div>\n    <div class=\"modal-footer\">\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">Cancel</button>\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"onSave()\">Add Column</button>\n    </div>\n  </div>\n</div>\n", styles: [".modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.modal-content{background:white;border-radius:8px;box-shadow:0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f;max-width:600px;max-height:90vh;width:90%;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;flex-shrink:0}.modal-header h2{margin:0;font-size:20px;font-weight:500;color:#212121}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#757575;transition:all .2s ease}.close-button:hover{background-color:#0000000a;color:#212121}.close-button:active{background-color:#00000014}.close-button:focus{outline:none;box-shadow:0 0 0 2px #1976d24d}.close-button svg{width:24px;height:24px}.modal-body{padding:0;overflow-y:auto;flex:1;min-height:0}.modal-body ::ng-deep st-column-editor{display:block}.modal-body ::ng-deep st-column-editor .column-editor{padding:0;border:none;box-shadow:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-header{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-actions{display:none}.modal-body ::ng-deep st-column-editor .column-editor .editor-form{padding:24px}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #e0e0e0;flex-shrink:0;background-color:#f5f5f5}.modal-footer .btn{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.modal-footer .btn:focus{outline:none;box-shadow:0 0 0 2px #0000001a}.modal-footer .btn.btn-secondary{background-color:#fff;color:#424242;border:1px solid #d0d0d0}.modal-footer .btn.btn-secondary:hover{background-color:#f5f5f5}.modal-footer .btn.btn-secondary:active{background-color:#eee}.modal-footer .btn.btn-primary{background-color:#1976d2;color:#fff}.modal-footer .btn.btn-primary:hover{background-color:#1565c0}.modal-footer .btn.btn-primary:active{background-color:#0d47a1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], propDecorators: { columnCreated: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }], columnEditor: [{
+                type: ViewChild,
+                args: [ColumnEditorComponent]
+            }] } });
+
 class StSheetActionsComponent {
     constructor() {
         /**