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

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

@@ -4898,6 +4898,7 @@ class NileChipEditor {
         this.acceptsInitialKeypress = false;
         this.eventListeners = [];
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     edit(context) {
         var _a, _b;
@@ -5054,6 +5055,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 +5125,7 @@ class NileChipEditor {
         this.chip = undefined;
         this.cellContainer = undefined;
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     focus() {
         var _a;
@@ -5132,7 +5135,7 @@ class NileChipEditor {
         catch ( /* ignore */_b) { /* ignore */ }
     }
     getCurrentValue() {
-        if (this.trackedValues.length > 0) {
+        if (this.hasChangeOccurred) {
             return [...this.trackedValues];
         }
         if (!this.chip)
@@ -8056,7 +8059,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 +8173,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 +8276,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 +8293,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 +8308,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 +8363,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 +8450,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 +8464,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 +9761,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 +9826,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 = {