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

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

@@ -3889,15 +3889,128 @@ 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(() => {
+            void this.activateSelectAfterMount(openOnEdit);
+        }, 50);
+    }
+    async activateSelectAfterMount(openOnEdit) {
+        try {
+            this.select?.focus();
+        }
+        catch {
+            // ignore
+        }
+        if (!openOnEdit || !this.select || this.options.disabled) {
+            return;
+        }
+        await this.openNileSelectDropdownSafely();
+    }
+    /** Lit @query('nile-popup') / .select — must exist before handleOpenChange touches this.popup.popup */
+    isNileSelectPopupMounted(select) {
+        return !!select.shadowRoot?.querySelector('nile-popup');
+    }
+    async invokeShowHandlingPromise(host) {
+        if (typeof host.show !== 'function') {
+            return;
+        }
+        try {
+            const out = host.show();
+            if (out != null && typeof out.then === 'function') {
+                await out.catch(() => undefined);
+            }
+        }
+        catch {
+            // sync throw from show()
+        }
+    }
+    async openNileSelectDropdownSafely() {
+        const select = this.select;
+        if (!select) {
+            return;
+        }
+        try {
+            await customElements.whenDefined('nile-select');
+        }
+        catch {
+            // ignore
+        }
+        if (this.options.enableVirtualScroll) {
             try {
-                this.select?.focus();
+                await customElements.whenDefined('nile-virtual-select');
             }
-            catch (e) {
-                // Ignore errors
+            catch {
+                // 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 = select.shadowRoot?.querySelector('nile-virtual-select');
+                if (vs) {
+                    await this.invokeShowHandlingPromise(vs);
+                    return;
+                }
+                const lit = select;
+                if (lit.updateComplete?.then) {
+                    try {
+                        await lit.updateComplete;
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+                await new Promise(resolve => requestAnimationFrame(() => resolve()));
             }
-        }, 50);
+            return;
+        }
+        const maxWaitPasses = 50;
+        for (let i = 0; i < maxWaitPasses; i++) {
+            if (this.isNileSelectPopupMounted(select)) {
+                break;
+            }
+            const lit = select;
+            if (lit.updateComplete?.then) {
+                try {
+                    await lit.updateComplete;
+                }
+                catch {
+                    // ignore
+                }
+            }
+            await 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') {
+                    await this.invokeShowHandlingPromise(host);
+                }
+                else {
+                    host.open = true;
+                }
+                return;
+            }
+            catch {
+                // ignore
+            }
+            await new Promise(resolve => setTimeout(resolve, 40));
+            const lit = select;
+            if (lit.updateComplete?.then) {
+                try {
+                    await lit.updateComplete;
+                }
+                catch {
+                    // ignore
+                }
+            }
+        }
     }
     /**
      * Set the initial value for the select
@@ -4945,6 +5058,7 @@ class NileChipEditor {
         this.acceptsInitialKeypress = false;
         this.eventListeners = [];
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     edit(context) {
         if (!context.container) {
@@ -5097,6 +5211,7 @@ class NileChipEditor {
             const detail = e.detail;
             const newValue = Array.isArray(detail?.value) ? [...detail.value] : (this.chip?.value ? [...this.chip.value] : []);
             this.trackedValues = newValue;
+            this.hasChangeOccurred = true;
             context.onChange(newValue);
         });
         // Keyboard handling on the chip element
@@ -5165,6 +5280,7 @@ class NileChipEditor {
         this.chip = undefined;
         this.cellContainer = undefined;
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     focus() {
         try {
@@ -5173,7 +5289,7 @@ class NileChipEditor {
         catch { /* ignore */ }
     }
     getCurrentValue() {
-        if (this.trackedValues.length > 0) {
+        if (this.hasChangeOccurred) {
             return [...this.trackedValues];
         }
         if (!this.chip)
@@ -6381,8 +6497,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)
@@ -8096,7 +8218,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 };
         /**
@@ -8209,25 +8331,41 @@ 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(() => {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const el = this.dropdownPanel?.nativeElement;
+            const dropdownWidth = el?.offsetWidth || 280;
+            const dropdownHeight = 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 = this.position.triggerTop ?? 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
@@ -8294,10 +8432,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: [{
@@ -8311,6 +8449,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']]
@@ -8323,7 +8464,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 };
         /**
@@ -8378,35 +8519,39 @@ 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(() => {
+            const el = this.dropdownPanel?.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 = this.position.triggerTop ?? 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
@@ -8460,10 +8605,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: [{
@@ -8474,6 +8619,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']]
@@ -9751,10 +9899,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 = {
@@ -9815,10 +9963,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 = {