@acorex/components 20.7.22 → 20.7.24

package/fesm2022/acorex-components-menu.mjs

@@ -6,7 +6,7 @@ import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
 import { AXZIndexService } from '@acorex/core/z-index';
 import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, signal, inject, Renderer2, computed, output, input, afterNextRender, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, DOCUMENT, PLATFORM_ID, NgModule } from '@angular/core';
+import { Injectable, signal, inject, Renderer2, computed, output, input, afterNextRender, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, DOCUMENT, PLATFORM_ID, Injector, NgModule } from '@angular/core';
 import { cloneDeep } from 'lodash-es';
 import { Subject } from 'rxjs';
 
@@ -440,7 +440,9 @@ class AXContextMenuComponent extends NXComponent {
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
         this.zIndexService = inject(AXZIndexService);
+        this.injector = inject(Injector);
         this.zToken = null;
+        this.lastOpenPoint = null;
         this.originalNextSibling = null;
         this.originalParent = null;
         this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -504,6 +506,7 @@ class AXContextMenuComponent extends NXComponent {
     close() {
         const wasOpen = this.nativeElement.classList.contains('ax-state-open');
         this.nativeElement.classList.remove('ax-state-open');
+        this.lastOpenPoint = null;
         this.removeBackdrop();
         // Release z-index token
         this.zIndexService.release(this.zToken);
@@ -561,12 +564,27 @@ class AXContextMenuComponent extends NXComponent {
     }
     /** @ignore */
     internalShowAt(point) {
+        this.lastOpenPoint = point;
         const elementRef = this.nativeElement;
         elementRef.classList.add('ax-state-open');
-        const itemRect = elementRef.getBoundingClientRect();
+        this.positionAtPoint(point);
+        this.createBackdrop();
+        // Items may render after the signal update (e.g. compact side-menu); reposition once laid out.
+        afterNextRender(() => {
+            if (this.lastOpenPoint && elementRef.classList.contains('ax-state-open')) {
+                this.positionAtPoint(this.lastOpenPoint);
+            }
+        }, { injector: this.injector });
+    }
+    /**
+     * Positions the menu at `point`, flipping when it would overflow the viewport.
+     * Uses a temporary visible layout pass so parents that hide the host (e.g. side-menu `display: none`) do not yield a zero-sized rect.
+     */
+    positionAtPoint(point) {
+        const elementRef = this.nativeElement;
+        const itemRect = this.measureMenuRect(elementRef);
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
-        // Detect RTL (Right-To-Left) mode
         const isRtl = AXHtmlUtil.isRtl(elementRef);
         let left;
         if (isRtl) {
@@ -595,7 +613,15 @@ class AXContextMenuComponent extends NXComponent {
         this.renderer.setStyle(elementRef, 'left', `${left}px`);
         this.renderer.setStyle(elementRef, 'top', `${top}px`);
         this.renderer.setStyle(elementRef, 'position', 'fixed');
-        this.createBackdrop();
+    }
+    /** Measures menu size even when an ancestor hides the host with `display: none`. */
+    measureMenuRect(elementRef) {
+        this.renderer.setStyle(elementRef, 'visibility', 'hidden');
+        this.renderer.setStyle(elementRef, 'display', 'flex');
+        const rect = elementRef.getBoundingClientRect();
+        this.renderer.removeStyle(elementRef, 'visibility');
+        this.renderer.removeStyle(elementRef, 'display');
+        return rect;
     }
     /** @ignore */
     createBackdrop() {