@acorex/components 20.7.29 → 20.7.31

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, Injector, DestroyRef, NgModule } from '@angular/core';
+import { Injectable, signal, inject, Renderer2, Injector, computed, output, input, afterNextRender, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, DOCUMENT, PLATFORM_ID, DestroyRef, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationStart } from '@angular/router';
 import { filter } from 'rxjs/operators';
@@ -33,8 +33,6 @@ class AXRootMenu {
 }
 class AXMenuItemComponentBase {
 }
-class AXMenuItem {
-}
 class AXMenuItemClickBaseEvent extends NXClickEvent {
     constructor() {
         super(...arguments);
@@ -58,6 +56,7 @@ class AXMenuItemComponent extends NXComponent {
         this.scrollableParents = [];
         this.unsuscriber = inject(AXUnsubscriber);
         this.renderer = inject(Renderer2);
+        this.injector = inject(Injector);
         this.zIndexService = inject(AXZIndexService);
         this.zToken = null;
         this.arrowIcon = computed(() => {
@@ -84,7 +83,7 @@ class AXMenuItemComponent extends NXComponent {
         this.service.open$.pipe(this.unsuscriber.takeUntilDestroy).subscribe((item) => {
             if (this === item) {
                 this.isOpen.set(true);
-                this.calculatePosition();
+                this.schedulePositionCalculation();
             }
         });
         //
@@ -173,6 +172,17 @@ class AXMenuItemComponent extends NXComponent {
         this.zIndexService.release(this.zToken);
         this.zToken = null;
     }
+    /**
+     * Positions the submenu after layout so nested levels measure their full height.
+     */
+    schedulePositionCalculation() {
+        this.calculatePosition();
+        afterNextRender(() => {
+            if (this.isOpen()) {
+                this.calculatePosition();
+            }
+        }, { injector: this.injector });
+    }
     /**
      * Calculate the position of the submenu to avoid it going out of the viewport.
      */
@@ -180,16 +190,10 @@ class AXMenuItemComponent extends NXComponent {
         const submenu = this.nativeElement.querySelector('.ax-menu-items');
         if (!submenu)
             return;
-        // Temporarily show the menu to measure its dimensions, but keep it invisible
-        this.renderer.setStyle(submenu, 'visibility', 'hidden');
-        this.renderer.setStyle(submenu, 'display', 'block');
-        const submenuRect = submenu.getBoundingClientRect();
+        const submenuRect = this.measureSubmenuRect(submenu);
         const itemRect = this.nativeElement.getBoundingClientRect();
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
-        // Reset temporary styles
-        this.renderer.removeStyle(submenu, 'visibility');
-        this.renderer.removeStyle(submenu, 'display');
         const isRtl = AXHtmlUtil.isRtl(this.nativeElement);
         let finalTop;
         let finalLeft;
@@ -201,15 +205,13 @@ class AXMenuItemComponent extends NXComponent {
         if (preferredTop + submenuRect.height <= windowHeight) {
             finalTop = preferredTop;
         }
-        else if (this.isFirstLevel() && this.root.orientation() === 'horizontal' && alternateTop >= 0) {
+        else if (alternateTop >= 0) {
             finalTop = alternateTop;
         }
         else {
             finalTop = windowHeight - submenuRect.height;
         }
-        if (finalTop < 0) {
-            finalTop = 0;
-        }
+        finalTop = this.clampVerticalPosition(finalTop, submenuRect.height, windowHeight);
         // --- 2. HORIZONTAL POSITIONING ---
         if (this.isFirstLevel() && this.root.orientation() === 'horizontal') {
             const preferredLeft = isRtl ? itemRect.right - submenuRect.width : itemRect.left;
@@ -249,7 +251,7 @@ class AXMenuItemComponent extends NXComponent {
                 }
             }
         }
-        // --- 3. NEW: OVERLAP-AWARE VERTICAL SHIFT ---
+        // --- 3. OVERLAP-AWARE VERTICAL SHIFT ---
         const isNestedMenu = !(this.isFirstLevel() && this.root.orientation() === 'horizontal');
         if (isNestedMenu) {
             const overlapsParent = finalLeft < itemRect.right && itemRect.left < finalLeft + submenuRect.width;
@@ -260,6 +262,7 @@ class AXMenuItemComponent extends NXComponent {
                 }
             }
         }
+        finalTop = this.clampVerticalPosition(finalTop, submenuRect.height, windowHeight);
         // --- 4. APPLY FINAL STYLES ---
         this.renderer.setStyle(submenu, 'position', 'fixed');
         this.renderer.setStyle(submenu, 'top', `${finalTop}px`);
@@ -269,6 +272,25 @@ class AXMenuItemComponent extends NXComponent {
             this.renderer.setStyle(submenu, 'z-index', String(this.zToken.zIndex));
         }
     }
+    /** Measures submenu size using the same flex layout as the rendered menu. */
+    measureSubmenuRect(submenu) {
+        this.renderer.setStyle(submenu, 'visibility', 'hidden');
+        this.renderer.setStyle(submenu, 'display', 'flex');
+        const rect = submenu.getBoundingClientRect();
+        this.renderer.removeStyle(submenu, 'visibility');
+        this.renderer.removeStyle(submenu, 'display');
+        return rect;
+    }
+    /** Keeps the submenu fully inside the viewport vertically. */
+    clampVerticalPosition(top, height, windowHeight) {
+        if (top + height > windowHeight) {
+            top = windowHeight - height;
+        }
+        if (top < 0) {
+            top = 0;
+        }
+        return top;
+    }
     handleClick(e) {
         e.stopPropagation();
         if (this.disabled())
@@ -862,5 +884,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXContextMenuComponent, AXContextMenuOpeningEvent, AXMenuComponent, AXMenuItem, AXMenuItemClickBaseEvent, AXMenuItemComponent, AXMenuItemComponentBase, AXMenuModule, AXMenuService, AXRootMenu };
+export { AXContextMenuComponent, AXContextMenuOpeningEvent, AXMenuComponent, AXMenuItemClickBaseEvent, AXMenuItemComponent, AXMenuItemComponentBase, AXMenuModule, AXMenuService, AXRootMenu };
 //# sourceMappingURL=acorex-components-menu.mjs.map