@acorex/components 20.7.52 → 20.7.53

package/fesm2022/acorex-components-menu.mjs

@@ -116,6 +116,7 @@ class AXMenuItemComponent extends NXComponent {
         this.parent = inject(AXMenuItemComponent, { optional: true, skipSelf: true });
         this.isFirstLevel = computed(() => this.getParentMenuItem() == null, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : []));
         this.childMenuItems = contentChildren(AXMenuItemComponent, ...(ngDevMode ? [{ debugName: "childMenuItems", descendants: false }] : [{ descendants: false }]));
+        this.discoveredSubmenuNodeCount = signal(0, ...(ngDevMode ? [{ debugName: "discoveredSubmenuNodeCount" }] : []));
         this.submenuSlot = viewChild('submenuSlot', ...(ngDevMode ? [{ debugName: "submenuSlot" }] : []));
         this.platformId = inject(PLATFORM_ID);
         this.destroyRef = inject(DestroyRef);
@@ -126,7 +127,9 @@ class AXMenuItemComponent extends NXComponent {
          * because `contentChildren` does not traverse those embedded views.
          */
         this.subItems = input([], ...(ngDevMode ? [{ debugName: "subItems" }] : []));
-        this.hasSubItems = computed(() => (this.subItems()?.length ?? 0) > 0 || this.childMenuItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : []));
+        this.hasSubItems = computed(() => (this.subItems()?.length ?? 0) > 0 ||
+            this.childMenuItems().length > 0 ||
+            this.discoveredSubmenuNodeCount() > 0, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : []));
         this.root = inject(AXRootMenu);
         this.service = inject(AXMenuService);
         this.unsuscriber = inject(AXUnsubscriber);
@@ -153,6 +156,7 @@ class AXMenuItemComponent extends NXComponent {
                 return;
             }
             this.reparentOrphanedChildren();
+            this.updateDiscoveredSubmenuNodeCount();
             this.childObserver = new MutationObserver((records) => {
                 if (!this.hasRelevantChildMutation(records)) {
                     return;
@@ -332,7 +336,7 @@ class AXMenuItemComponent extends NXComponent {
         if (!container) {
             return;
         }
-        for (const el of this.getDirectChildElements()) {
+        for (const el of this.getDirectSubmenuNodes()) {
             if (!container.contains(el)) {
                 try {
                     container.appendChild(el);
@@ -343,15 +347,23 @@ class AXMenuItemComponent extends NXComponent {
             }
         }
     }
-    /** Direct nested `ax-menu-item` hosts for this item only. */
-    getDirectChildElements() {
-        return Array.from(this.nativeElement.querySelectorAll('ax-menu-item')).filter((el) => {
+    /**
+     * Nested submenu nodes rendered by custom recursive templates (direct children of this item only).
+     */
+    getDirectSubmenuNodes() {
+        return Array.from(this.nativeElement.querySelectorAll('ax-menu-item, ax-title, ax-divider')).filter((el) => {
             if (el === this.nativeElement) {
                 return false;
             }
-            return el.parentElement?.closest('ax-menu-item') === this.nativeElement;
+            if (el.tagName === 'AX-MENU-ITEM') {
+                return el.parentElement?.closest('ax-menu-item') === this.nativeElement;
+            }
+            return el.closest('ax-menu-item') === this.nativeElement;
         });
     }
+    updateDiscoveredSubmenuNodeCount() {
+        this.discoveredSubmenuNodeCount.set(this.getDirectSubmenuNodes().length);
+    }
     scheduleChildRefresh() {
         if (this.childRefreshScheduled) {
             return;
@@ -360,6 +372,7 @@ class AXMenuItemComponent extends NXComponent {
         requestAnimationFrame(() => {
             this.childRefreshScheduled = false;
             this.reparentOrphanedChildren();
+            this.updateDiscoveredSubmenuNodeCount();
         });
     }
     hasRelevantChildMutation(records) {
@@ -455,7 +468,7 @@ class AXMenuItemComponent extends NXComponent {
         if (this.nativeElement.contains(node)) {
             return true;
         }
-        return this.getDirectChildElements().some((child) => child.contains(node));
+        return this.getDirectSubmenuNodes().some((child) => child.contains(node));
     }
     ngOnDestroy() {
         if (this.isOpen()) {