@aquera/ngx-smart-table 0.0.26 → 0.0.27

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

@@ -4946,6 +4946,7 @@ class NileChipEditor {
         this.acceptsInitialKeypress = false;
         this.eventListeners = [];
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     edit(context) {
         if (!context.container) {
@@ -5098,6 +5099,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
@@ -5166,6 +5168,7 @@ class NileChipEditor {
         this.chip = undefined;
         this.cellContainer = undefined;
         this.trackedValues = [];
+        this.hasChangeOccurred = false;
     }
     focus() {
         try {
@@ -5174,7 +5177,7 @@ class NileChipEditor {
         catch { /* ignore */ }
     }
     getCurrentValue() {
-        if (this.trackedValues.length > 0) {
+        if (this.hasChangeOccurred) {
             return [...this.trackedValues];
         }
         if (!this.chip)
@@ -8391,7 +8394,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 };
         /**
@@ -8504,25 +8507,40 @@ 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 (hidden until measured)
         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);
+            if (el) {
+                el.style.left = `${x}px`;
+                el.style.top = `${y}px`;
+                el.style.visibility = 'visible';
+            }
+        });
     }
     /**
      * Check if an action is disabled
@@ -8588,11 +8606,11 @@ class StColumnMenuDropdownComponent {
         return (this.context?.columnIndex || 0) <= 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnMenuDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StColumnMenuDropdownComponent, isStandalone: true, 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@if (isOpen && context) {\n  <div class=\"dropdown-container\">\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      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\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      }\n    </div>\n  </div>\n}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StColumnMenuDropdownComponent, isStandalone: true, 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@if (isOpen && context) {\n  <div class=\"dropdown-container\">\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      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\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      }\n    </div>\n  </div>\n}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: StColumnFilterComponent, selector: "st-column-filter", inputs: ["column", "tableState", "columnIndex", "isFirstColumn", "isLastColumn", "isOpen", "filterContext"], outputs: ["closed", "filterApplied", "filterCleared"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StColumnMenuDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-column-menu-dropdown', standalone: true, imports: [CommonModule, StColumnFilterComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n  <div class=\"dropdown-container\">\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      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\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      }\n    </div>\n  </div>\n}\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', standalone: true, imports: [CommonModule, StColumnFilterComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Dropdown container with backdrop -->\n@if (isOpen && context) {\n  <div class=\"dropdown-container\">\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      @if (!isFilterOpen) {\n        <nile-menu>\n          <!-- Dynamically render all visible actions -->\n          @for (action of visibleActions; track action.id; let i = $index, last = $last) {\n            <nile-menu-item \n              (click)=\"onActionClick(action)\"\n              [class.disabled]=\"isActionDisabled(action)\"\n              [class.active]=\"isActionActive(action)\">\n              @if (isActionActive(action)) {\n                <span class=\"checkmark\">\u2713</span>\n              }\n              @if (action.icon && !isActionActive(action)) {\n                <nile-icon slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              <span class=\"action-label\">{{ action.label }}</span>\n            </nile-menu-item>\n            \n            <!-- Add divider after action groups -->\n            @if (shouldShowDividerAfter(action, i, last)) {\n              <nile-divider></nile-divider>\n            }\n          }\n          \n          <!-- Fallback if no actions -->\n          @if (visibleActions.length === 0) {\n            <nile-menu-item>\n              No actions available\n            </nile-menu-item>\n          }\n        </nile-menu>\n      }\n      \n      <!-- Filter popup (conditionally rendered) -->\n      @if (isFilterOpen && context) {\n        <st-column-filter\n          #filterPopup\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      }\n    </div>\n  </div>\n}\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: [{
@@ -8606,6 +8624,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }], filterPopup: [{
                 type: ViewChild,
                 args: ['filterPopup']
+            }], dropdownPanel: [{
+                type: ViewChild,
+                args: ['dropdownPanel']
             }], onBackdropClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -8618,7 +8639,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 };
         /**
@@ -8673,35 +8694,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
@@ -8754,11 +8779,11 @@ class StRowActionsDropdownComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StRowActionsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StRowActionsDropdownComponent, isStandalone: true, 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: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: StRowActionsDropdownComponent, isStandalone: true, 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: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu>\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: StRowActionsDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-row-actions-dropdown', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu class=\"dropdown-menu\" [style.left.px]=\"dropdownStyle.left\" [style.top.px]=\"dropdownStyle.top\">\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\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', standalone: true, imports: [CommonModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isOpen && context) {\n  <div class=\"dropdown-container\">\n    <!-- Backdrop -->\n    <div class=\"dropdown-overlay\" (click)=\"closed.emit()\"></div>\n    \n    <!-- Dropdown menu -->\n    <div class=\"dropdown-menu\" #dropdownPanel [ngStyle]=\"dropdownStyle\">\n      @if (isOpen) {\n        <nile-menu>\n          @for (action of visibleActions; track action.id) {\n            <nile-menu-item [class.disabled]=\"isActionDisabled(action)\" (click)=\"onActionClick(action)\" class=\"action-label\">\n              @if (action.icon) {\n                <nile-icon size=\"14\" slot=\"prefix\" [name]=\"action.icon\"></nile-icon>\n              }\n              {{ action.label }}\n            </nile-menu-item>\n          }\n        \n          @if (visibleActions.length === 0) {\n            <nile-menu-item>No actions available</nile-menu-item>\n          }\n        </nile-menu>\n      }\n    </div>\n  </div>\n}\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: [{
@@ -8769,6 +8794,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                 type: Output
             }], closed: [{
                 type: Output
+            }], dropdownPanel: [{
+                type: ViewChild,
+                args: ['dropdownPanel']
             }], onEscapeKey: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -9610,7 +9638,8 @@ class StTableComponent {
         const rect = target.getBoundingClientRect();
         const position = {
             x: rect.left,
-            y: rect.bottom + 4
+            y: rect.bottom + 4,
+            triggerTop: rect.top
         };
         const context = {
             rowData,
@@ -9649,7 +9678,8 @@ class StTableComponent {
         const rect = target.getBoundingClientRect();
         const position = {
             x: rect.left,
-            y: rect.bottom + 4
+            y: rect.bottom + 4,
+            triggerTop: rect.top
         };
         const context = {
             column,