@aquera/ngx-smart-table 0.0.17-patch-0.6 → 0.0.17-patch-0.8

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

@@ -1,5 +1,6 @@
 import { BehaviorSubject, Subject, isObservable, fromEvent, merge } from 'rxjs';
 import { distinctUntilChanged, map, throttleTime, takeUntil, tap, debounceTime } from 'rxjs/operators';
+import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
 import { EventEmitter, ElementRef, Component, Input, Output, ViewChild, HostListener, Injectable, ChangeDetectionStrategy, Directive, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
@@ -7,7 +8,6 @@ import { CommonModule } from '@angular/common';
 import Ajv from 'ajv';
 import * as i1$1 from '@angular/forms';
 import { Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { __awaiter } from 'tslib';
 
 /**
  * Base type definitions for cell configuration model
@@ -3678,10 +3678,6 @@ class NileInputEditor {
     }
 }
 
-/**
- * Custom editor using NileSelect from @aquera/nile-elements
- * This demonstrates how to create dropdown/select editors for ngx-smart-table
- */
 /**
  * Inject global styles for nile-select dropdown height limit
  */
@@ -3814,16 +3810,137 @@ class NileSelectEditor {
         // Clear container and append select
         context.container.innerHTML = '';
         context.container.appendChild(this.select);
-        // Focus the select after render
+        // Focus after mount; open dropdown only once nile-popup exists (avoids null this.popup in nile-select)
+        const openOnEdit = this.options.openDropdownOnEdit !== false;
         setTimeout(() => {
-            var _a;
+            void this.activateSelectAfterMount(openOnEdit);
+        }, 50);
+    }
+    activateSelectAfterMount(openOnEdit) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
             try {
                 (_a = this.select) === null || _a === void 0 ? void 0 : _a.focus();
             }
-            catch (e) {
-                // Ignore errors
+            catch (_b) {
+                // ignore
             }
-        }, 50);
+            if (!openOnEdit || !this.select || this.options.disabled) {
+                return;
+            }
+            yield this.openNileSelectDropdownSafely();
+        });
+    }
+    /** Lit @query('nile-popup') / .select — must exist before handleOpenChange touches this.popup.popup */
+    isNileSelectPopupMounted(select) {
+        var _a;
+        return !!((_a = select.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nile-popup'));
+    }
+    invokeShowHandlingPromise(host) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (typeof host.show !== 'function') {
+                return;
+            }
+            try {
+                const out = host.show();
+                if (out != null && typeof out.then === 'function') {
+                    yield out.catch(() => undefined);
+                }
+            }
+            catch (_a) {
+                // sync throw from show()
+            }
+        });
+    }
+    openNileSelectDropdownSafely() {
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function* () {
+            const select = this.select;
+            if (!select) {
+                return;
+            }
+            try {
+                yield customElements.whenDefined('nile-select');
+            }
+            catch (_e) {
+                // ignore
+            }
+            if (this.options.enableVirtualScroll) {
+                try {
+                    yield customElements.whenDefined('nile-virtual-select');
+                }
+                catch (_f) {
+                    // ignore — not registered in all environments
+                }
+                // Same idea as nile-popup: inner host may not exist until Lit finishes a pass (or several).
+                const maxVirtualWaitPasses = 50;
+                for (let i = 0; i < maxVirtualWaitPasses; i++) {
+                    const vs = (_a = select.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nile-virtual-select');
+                    if (vs) {
+                        yield this.invokeShowHandlingPromise(vs);
+                        return;
+                    }
+                    const lit = select;
+                    if ((_b = lit.updateComplete) === null || _b === void 0 ? void 0 : _b.then) {
+                        try {
+                            yield lit.updateComplete;
+                        }
+                        catch (_g) {
+                            // ignore
+                        }
+                    }
+                    yield new Promise(resolve => requestAnimationFrame(() => resolve()));
+                }
+                return;
+            }
+            const maxWaitPasses = 50;
+            for (let i = 0; i < maxWaitPasses; i++) {
+                if (this.isNileSelectPopupMounted(select)) {
+                    break;
+                }
+                const lit = select;
+                if ((_c = lit.updateComplete) === null || _c === void 0 ? void 0 : _c.then) {
+                    try {
+                        yield lit.updateComplete;
+                    }
+                    catch (_h) {
+                        // ignore
+                    }
+                }
+                yield new Promise(resolve => requestAnimationFrame(() => resolve()));
+            }
+            if (!this.isNileSelectPopupMounted(select)) {
+                return;
+            }
+            const host = select;
+            for (let attempt = 0; attempt < 5; attempt++) {
+                if (!this.isNileSelectPopupMounted(select)) {
+                    return;
+                }
+                try {
+                    if (typeof host.show === 'function') {
+                        yield this.invokeShowHandlingPromise(host);
+                    }
+                    else {
+                        host.open = true;
+                    }
+                    return;
+                }
+                catch (_j) {
+                    // ignore
+                }
+                yield new Promise(resolve => setTimeout(resolve, 40));
+                const lit = select;
+                if ((_d = lit.updateComplete) === null || _d === void 0 ? void 0 : _d.then) {
+                    try {
+                        yield lit.updateComplete;
+                    }
+                    catch (_k) {
+                        // ignore
+                    }
+                }
+            }
+        });
     }
     /**
      * Set the initial value for the select
@@ -4898,6 +5015,7 @@ class NileChipEditor {
         this.acceptsInitialKeypress = false;
         this.eventListeners = [];
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     edit(context) {
         var _a, _b;
@@ -5054,6 +5172,7 @@ class NileChipEditor {
             const detail = e.detail;
             const newValue = Array.isArray(detail === null || detail === void 0 ? void 0 : detail.value) ? [...detail.value] : (((_a = this.chip) === null || _a === void 0 ? void 0 : _a.value) ? [...this.chip.value] : []);
             this.trackedValues = newValue;
+            this.hasChangeOccurred = true;
             context.onChange(newValue);
         });
         // Keyboard handling on the chip element
@@ -5123,6 +5242,7 @@ class NileChipEditor {
         this.chip = undefined;
         this.cellContainer = undefined;
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     focus() {
         var _a;
@@ -5132,7 +5252,7 @@ class NileChipEditor {
         catch ( /* ignore */_b) { /* ignore */ }
     }
     getCurrentValue() {
-        if (this.trackedValues.length > 0) {
+        if (this.hasChangeOccurred) {
             return [...this.trackedValues];
         }
         if (!this.chip)
@@ -6330,8 +6450,14 @@ class StCellComponent {
         }
     }
     onCellClick() {
-        // Single click now only focuses, doesn't start editing
-        // Focus is handled by parent st-table component
+        // First click: parent <td> focuses this cell (bubbles after this handler).
+        // Second click while already focused: enter edit (spreadsheet-style).
+        if (this.isEditable &&
+            !this.cellLoading &&
+            !this.cell.isEditing() &&
+            this.cell.isFocused()) {
+            this.startEdit();
+        }
     }
     onCellDoubleClick() {
         // Double-click starts editing regardless of EditMode (Excel-like behavior)
@@ -8056,7 +8182,7 @@ class StColumnMenuDropdownComponent {
          */
         this.isOpen = false;
         /**
-         * Position of the dropdown (x, y coordinates)
+         * Position of the dropdown (x, y coordinates, triggerTop for flip positioning)
          */
         this.position = { x: 0, y: 0 };
         /**
@@ -8170,25 +8296,42 @@ class StColumnMenuDropdownComponent {
             this.dropdownStyle = {};
             return;
         }
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const dropdownWidth = 280; // Approximate dropdown width
-        const dropdownHeight = 300; // Approximate max dropdown height
         let { x, y } = this.position;
-        // 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 = Math.max(10, viewportHeight - dropdownHeight - 10);
-        }
+        // Render at initial position first
         this.dropdownStyle = {
             position: 'fixed',
             left: `${x}px`,
             top: `${y}px`,
-            'z-index': 9999
+            'z-index': 9999,
+            visibility: 'hidden'
         };
+        // After rendering, measure actual size and adjust if needed
+        requestAnimationFrame(() => {
+            var _a, _b;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const el = (_a = this.dropdownPanel) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            const dropdownWidth = (el === null || el === void 0 ? void 0 : el.offsetWidth) || 280;
+            const dropdownHeight = (el === null || el === void 0 ? void 0 : el.offsetHeight) || 200;
+            // Adjust horizontal position if dropdown would overflow
+            if (x + dropdownWidth > viewportWidth) {
+                x = Math.max(10, viewportWidth - dropdownWidth - 10);
+            }
+            // Adjust vertical position — flip above the trigger if it overflows bottom
+            if (y + dropdownHeight > viewportHeight) {
+                const triggerTop = (_b = this.position.triggerTop) !== null && _b !== void 0 ? _b : this.position.y;
+                y = triggerTop - dropdownHeight - 4;
+            }
+            // Clamp to viewport edges
+            x = Math.max(10, x);
+            y = Math.max(10, y);
+            this.dropdownStyle = {
+                position: 'fixed',
+                left: `${x}px`,
+                top: `${y}px`,
+                'z-index': 9999
+            };
+        });
     }
     /**
      * Check if an action is disabled
@@ -8256,10 +8399,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%;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 }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], 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\" #dropdownPanel [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%;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\" #dropdownPanel [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: [{
@@ -8273,6 +8416,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }], filterPopup: [{
                 type: ViewChild,
                 args: ['filterPopup']
+            }], dropdownPanel: [{
+                type: ViewChild,
+                args: ['dropdownPanel']
             }], onBackdropClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -8285,7 +8431,7 @@ class StRowActionsDropdownComponent {
          */
         this.isOpen = false;
         /**
-         * Position of the dropdown (x, y coordinates)
+         * Position of the dropdown (x, y coordinates, triggerTop for flip positioning)
          */
         this.position = { x: 0, y: 0 };
         /**
@@ -8340,35 +8486,40 @@ class StRowActionsDropdownComponent {
             this.dropdownStyle = {};
             return;
         }
-        const DROPDOWN_WIDTH = 200; // Approximate width
-        const DROPDOWN_HEIGHT = this.visibleActions.length * 40 + 16; // Approximate height
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
         let left = this.position.x;
         let top = this.position.y;
-        // Check if dropdown would overflow right edge
-        if (left + DROPDOWN_WIDTH > viewportWidth) {
-            left = viewportWidth - DROPDOWN_WIDTH - 10;
-        }
-        // Check if dropdown would overflow bottom edge
-        if (top + DROPDOWN_HEIGHT > viewportHeight) {
-            // Position above the trigger
-            top = this.position.y - DROPDOWN_HEIGHT;
-        }
-        // Ensure dropdown doesn't go off-screen on the left
-        if (left < 10) {
-            left = 10;
-        }
-        // Ensure dropdown doesn't go off-screen on the top
-        if (top < 10) {
-            top = 10;
-        }
+        // Render at initial position first (hidden until measured)
         this.dropdownStyle = {
             position: 'fixed',
             left: `${left}px`,
             top: `${top}px`,
-            zIndex: TableZIndex.ROW_ACTIONS_DROPDOWN
+            zIndex: TableZIndex.ROW_ACTIONS_DROPDOWN,
+            visibility: 'hidden'
         };
+        // After rendering, measure actual size and adjust position directly on the DOM
+        // (OnPush change detection won't pick up property changes inside requestAnimationFrame)
+        requestAnimationFrame(() => {
+            var _a, _b;
+            const el = (_a = this.dropdownPanel) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            if (!el)
+                return;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const dropdownWidth = el.offsetWidth || 200;
+            const dropdownHeight = el.offsetHeight || (this.visibleActions.length * 40 + 16);
+            if (left + dropdownWidth > viewportWidth) {
+                left = viewportWidth - dropdownWidth - 10;
+            }
+            if (top + dropdownHeight > viewportHeight) {
+                const triggerTop = (_b = this.position.triggerTop) !== null && _b !== void 0 ? _b : this.position.y;
+                top = triggerTop - dropdownHeight - 4;
+            }
+            left = Math.max(10, left);
+            top = Math.max(10, top);
+            el.style.left = `${left}px`;
+            el.style.top = `${top}px`;
+            el.style.visibility = 'visible';
+        });
     }
     /**
      * Handle action click
@@ -8422,10 +8573,10 @@ class StRowActionsDropdownComponent {
     }
 }
 StRowActionsDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StRowActionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n    <nile-menu *ngIf=\"isOpen\" class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n      <ng-container *ngFor=\"let action of visibleActions\">\n        <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n          <nile-icon  *ngIf=\"action.icon\" size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n          {{ action.label }}\n        </nile-menu-item>\n      </ng-container>\n    \n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">No actions available</nile-menu-item>\n    </nile-menu>\n    </div>\n\n  </div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StRowActionsDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StRowActionsDropdownComponent, selector: "st-row-actions-dropdown", inputs: { isOpen: "isOpen", position: "position", context: "context" }, outputs: { actionClicked: "actionClicked", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"dropdown-menu\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n    <nile-menu *ngIf=\"isOpen\">\n      <ng-container *ngFor=\"let action of visibleActions\">\n        <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n          <nile-icon *ngIf=\"action.icon\" size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n          {{ action.label }}\n        </nile-menu-item>\n      </ng-container>\n    \n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">No actions available</nile-menu-item>\n    </nile-menu>\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-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-row-actions-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n    <nile-menu *ngIf=\"isOpen\" class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n      <ng-container *ngFor=\"let action of visibleActions\">\n        <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n          <nile-icon  *ngIf=\"action.icon\" size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n          {{ action.label }}\n        </nile-menu-item>\n      </ng-container>\n    \n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">No actions available</nile-menu-item>\n    </nile-menu>\n    </div>\n\n  </div>\n", styles: [".dropdown-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998}.dropdown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"] }]
+            args: [{ selector: 'st-row-actions-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropdown-container\" *ngIf=\"isOpen && context\">\n  <!-- Backdrop -->\n  <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n  \n  <!-- Dropdown menu -->\n  <div class=\"dropdown-menu\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n    <nile-menu *ngIf=\"isOpen\">\n      <ng-container *ngFor=\"let action of visibleActions\">\n        <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n          <nile-icon *ngIf=\"action.icon\" size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n          {{ action.label }}\n        </nile-menu-item>\n      </ng-container>\n    \n      <nile-menu-item *ngIf=\"visibleActions.length === 0\">No actions available</nile-menu-item>\n    </nile-menu>\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-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;pointer-events:auto;z-index:9998}.dropdown-menu{position:fixed;background-color:#fff;box-shadow:0 5px 15px #0000004d,0 0 0 1px #0000001a;overflow:hidden;pointer-events:auto;z-index:9999}.action-icon{display:flex;align-items:center;justify-content:center;font-size:16px;width:20px;flex-shrink:0}.action-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown-empty{padding:16px;text-align:center;color:#a0aec0;font-size:14px;font-style:italic}nile-menu{height:fit-content}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], position: [{
@@ -8436,6 +8587,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], closed: [{
                 type: Output
+            }], dropdownPanel: [{
+                type: ViewChild,
+                args: ['dropdownPanel']
             }], onEscapeKey: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -9730,10 +9884,10 @@ class StTableComponent {
         event.stopPropagation();
         const target = event.currentTarget;
         const rect = target.getBoundingClientRect();
-        // Calculate position (below the button by default)
         const position = {
             x: rect.left,
-            y: rect.bottom + 4 // 4px gap
+            y: rect.bottom + 4,
+            triggerTop: rect.top
         };
         // Create context
         const context = {
@@ -9795,10 +9949,10 @@ class StTableComponent {
         event.stopPropagation();
         const target = event.currentTarget;
         const rect = target.getBoundingClientRect();
-        // Calculate position (below the button by default)
         const position = {
             x: rect.left,
-            y: rect.bottom + 4 // 4px gap
+            y: rect.bottom + 4,
+            triggerTop: rect.top
         };
         // Create context
         const context = {