@acorex/components 21.0.2-next.5 → 21.0.2-next.51

package/fesm2022/acorex-components-menu.mjs

@@ -2,11 +2,14 @@ import { NXClickEvent, NXComponent, AXComponent, NXEvent } from '@acorex/cdk/com
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
 import { isBrowser } from '@acorex/core/platform';
 import { AXTranslatorPipe } from '@acorex/core/translation';
-import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
+import { AXHtmlUtil, AXUnsubscriber } 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 { inject, DestroyRef, DOCUMENT, PLATFORM_ID, Injectable, signal, computed, contentChildren, viewChild, input, Renderer2, Injector, output, afterNextRender, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationStart } from '@angular/router';
+import { filter } from 'rxjs/operators';
 import { cloneDeep } from 'lodash-es';
 import { Subject } from 'rxjs';
 
@@ -15,23 +18,86 @@ class AXMenuService {
         this.closeAll$ = new Subject();
         this.open$ = new Subject();
         this.close$ = new Subject();
-        this.closeExcept$ = new Subject();
         this.openContextMenu$ = new Subject();
         this.closeAllContextMenu$ = new Subject();
+        this.destroyRef = inject(DestroyRef);
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
+        this.openItems = new Set();
+        this.globalListenersBound = false;
+        this.scrollableParents = [];
+        this.onDocumentClick = (event) => {
+            if (this.rootElement && !this.rootElement.contains(event.target)) {
+                this.closeAll$.next();
+            }
+        };
+        this.onWindowOrScrollEvent = () => {
+            this.closeAll$.next();
+        };
+        this.closeAll$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.openItems.clear();
+        });
+    }
+    /**
+     * Registers a single set of document/window/scroll listeners for the whole menu tree.
+     */
+    initGlobalListeners(rootElement) {
+        if (!isPlatformBrowser(this.platformId) || this.globalListenersBound) {
+            return;
+        }
+        this.globalListenersBound = true;
+        this.rootElement = rootElement;
+        this.document.addEventListener('click', this.onDocumentClick);
+        window.addEventListener('scroll', this.onWindowOrScrollEvent, { capture: true });
+        window.addEventListener('resize', this.onWindowOrScrollEvent);
+        this.scrollableParents = AXHtmlUtil.getScrollableParents(rootElement);
+        this.scrollableParents.forEach((parent) => {
+            parent.addEventListener('scroll', this.onWindowOrScrollEvent);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.document.removeEventListener('click', this.onDocumentClick);
+            window.removeEventListener('scroll', this.onWindowOrScrollEvent, { capture: true });
+            window.removeEventListener('resize', this.onWindowOrScrollEvent);
+            this.scrollableParents.forEach((parent) => {
+                parent.removeEventListener('scroll', this.onWindowOrScrollEvent);
+            });
+        });
+    }
+    /**
+     * Closes open submenus that are not on the ancestor path of the item being opened.
+     */
+    closeExcept(opener) {
+        const keepOpen = new Set();
+        let current = opener;
+        while (current) {
+            keepOpen.add(current);
+            current = current.getParentMenuItem?.() ?? current.parent ?? null;
+        }
+        for (const openItem of [...this.openItems]) {
+            if (!keepOpen.has(openItem)) {
+                this.markClosed(openItem);
+            }
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuService }); }
+    markOpen(item) {
+        this.openItems.add(item);
+        this.open$.next(item);
+    }
+    markClosed(item) {
+        this.openItems.delete(item);
+        this.close$.next(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 class AXRootMenu {
 }
 class AXMenuItemComponentBase {
 }
-class AXMenuItem {
-}
 class AXMenuItemClickBaseEvent extends NXClickEvent {
     constructor() {
         super(...arguments);
@@ -46,15 +112,29 @@ class AXMenuItemClickBaseEvent extends NXClickEvent {
 class AXMenuItemComponent extends NXComponent {
     constructor() {
         super();
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.hasSubItems = signal(false, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : []));
-        this.isFirstLevel = signal(false, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.parent = inject(AXMenuItemComponent, { optional: true, skipSelf: true });
+        this.isFirstLevel = computed(() => this.getParentMenuItem() == null, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : /* istanbul ignore next */ []));
+        this.childMenuItems = contentChildren(AXMenuItemComponent, { ...(ngDevMode ? { debugName: "childMenuItems" } : /* istanbul ignore next */ {}), descendants: false });
+        this.discoveredSubmenuNodeCount = signal(0, ...(ngDevMode ? [{ debugName: "discoveredSubmenuNodeCount" }] : /* istanbul ignore next */ []));
+        this.submenuSlot = viewChild('submenuSlot', ...(ngDevMode ? [{ debugName: "submenuSlot" }] : /* istanbul ignore next */ []));
+        this.platformId = inject(PLATFORM_ID);
+        this.destroyRef = inject(DestroyRef);
+        this.childObserver = null;
+        this.childRefreshScheduled = false;
+        /**
+         * Nested items from the data model. Required for recursive `ngTemplateOutlet` templates
+         * because `contentChildren` does not traverse those embedded views.
+         */
+        this.subItems = input([], ...(ngDevMode ? [{ debugName: "subItems" }] : /* istanbul ignore next */ []));
+        this.hasSubItems = computed(() => (this.subItems()?.length ?? 0) > 0 ||
+            this.childMenuItems().length > 0 ||
+            this.discoveredSubmenuNodeCount() > 0, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : /* istanbul ignore next */ []));
         this.root = inject(AXRootMenu);
-        this.isRoot = () => this.parent == null;
         this.service = inject(AXMenuService);
-        this.scrollableParents = [];
         this.unsuscriber = inject(AXUnsubscriber);
         this.renderer = inject(Renderer2);
+        this.injector = inject(Injector);
         this.zIndexService = inject(AXZIndexService);
         this.zToken = null;
         this.arrowIcon = computed(() => {
@@ -64,150 +144,124 @@ class AXMenuItemComponent extends NXComponent {
                 : isRtl
                     ? 'ax-icon-chevron-left'
                     : 'ax-icon-chevron-right';
-        }, ...(ngDevMode ? [{ debugName: "arrowIcon" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "arrowIcon" }] : /* istanbul ignore next */ []));
         this.onClick = output();
-        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
-        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
-        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
-        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
-        //
+        this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+        this.mouseLeaveTimeout = null;
         afterNextRender(() => {
-            this.detectSubItems();
-            this.observeMutations();
-            this.bindScrollEvents();
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            this.reparentOrphanedChildren();
+            this.updateDiscoveredSubmenuNodeCount();
+            this.childObserver = new MutationObserver((records) => {
+                if (!this.hasRelevantChildMutation(records)) {
+                    return;
+                }
+                this.scheduleChildRefresh();
+            });
+            this.childObserver.observe(this.nativeElement, { childList: true, subtree: true });
+            this.destroyRef.onDestroy(() => this.childObserver?.disconnect());
         });
-        //
         this.service.closeAll$.pipe(this.unsuscriber.takeUntilDestroy).subscribe(() => this.close());
         this.service.open$.pipe(this.unsuscriber.takeUntilDestroy).subscribe((item) => {
             if (this === item) {
                 this.isOpen.set(true);
-                this.calculatePosition();
+                this.schedulePositionCalculation();
             }
         });
-        //
         this.service.close$.pipe(this.unsuscriber.takeUntilDestroy).subscribe((item) => {
             if (this == item) {
                 this.isOpen.set(false);
             }
         });
-        //
-        this.service.closeExcept$.pipe(this.unsuscriber.takeUntilDestroy).subscribe((item) => {
-            this.closeExcept(item);
-        });
-    }
-    closeExcept(item) {
-        const list = [item];
-        // TODO: Check for better solution
-        const parentEl = this.nativeElement.parentElement?.parentElement;
-        this.parent = parentEl?.tagName == 'AX-MENU-ITEM' ? parentEl?.['__axContext__'] : null;
-        //
-        let parent = item.parent;
-        while (parent != null) {
-            list.push(parent);
-            parent = parent.parent;
-        }
-        //
-        if (!list.includes(this)) {
-            this.close();
-        }
-    }
-    observeMutations() {
-        this.mutationObserver = new MutationObserver(() => {
-            this.detectSubItems();
-        });
-        // Start observing changes in child elements
-        this.mutationObserver.observe(this.nativeElement, {
-            childList: true,
-            subtree: true,
-        });
     }
     getText() {
         return this.nativeElement.querySelector('ax-text')?.innerText;
     }
     /**
-     * Manually detect all `ax-menu-item` elements and check if this menu item has sub-items.
+     * Resolves the parent menu item. Items rendered via recursive `ngTemplateOutlet` do not
+     * receive a DI parent, so we fall back to the DOM tree after reparenting.
      */
-    detectSubItems() {
-        //
-        const parentEl = this.nativeElement.parentElement?.parentElement;
-        this.parent = parentEl?.tagName == 'AX-MENU-ITEM' ? parentEl?.['__axContext__'] : null;
-        //
-        const tag = this.nativeElement.parentElement?.tagName;
-        this.isFirstLevel.set(tag == 'AX-MENU' || tag == 'AX-CONTEXT-MENU');
-        const subItems = this.nativeElement.querySelectorAll('ax-menu-item');
-        if (subItems.length > 0) {
-            this.hasSubItems.set(true);
+    getParentMenuItem() {
+        if (this.parent) {
+            return this.parent;
         }
-        else {
-            this.hasSubItems.set(false);
+        const parentHost = this.nativeElement.parentElement?.closest('ax-menu-item');
+        if (!parentHost || parentHost === this.nativeElement) {
+            return null;
         }
+        const ctx = parentHost.__axContext__;
+        return ctx instanceof AXMenuItemComponent ? ctx : null;
     }
     /**
      * Opens the submenu of this menu item if it has sub-items and is not disabled.
-     *
-     * Inherited behavior: Uses the injected service to notify other items to close.
-     *
-     * @returns void - No return value. Triggers submenu opening side-effects.
      */
     open() {
-        this.service.closeExcept$.next(this);
-        if (!this.disabled() && this.hasSubItems()) {
-            // Acquire z-index token for this submenu
-            if (!this.zToken) {
-                this.zToken = this.zIndexService.acquire();
-            }
-            this.service.open$.next(this);
+        if (this.disabled() || !this.hasSubItems()) {
+            return;
         }
+        this.reparentOrphanedChildren();
+        this.service.closeExcept(this);
+        if (!this.zToken) {
+            this.zToken = this.zIndexService.acquire();
+        }
+        this.service.markOpen(this);
     }
     /**
      * Closes the submenu of this menu item if open.
-     *
-     * @returns void - No return value. Triggers submenu closing side-effects.
      */
     close() {
-        this.service.close$.next(this);
-        // Release z-index token
+        this.service.markClosed(this);
         this.zIndexService.release(this.zToken);
         this.zToken = null;
     }
+    /**
+     * Positions the submenu after layout so nested levels measure their full height.
+     */
+    schedulePositionCalculation() {
+        afterNextRender(() => {
+            if (this.isOpen()) {
+                this.calculatePosition();
+                afterNextRender(() => {
+                    if (this.isOpen()) {
+                        this.calculatePosition();
+                    }
+                }, { injector: this.injector });
+            }
+        }, { injector: this.injector });
+    }
     /**
      * Calculate the position of the submenu to avoid it going out of the viewport.
      */
     calculatePosition() {
-        const submenu = this.nativeElement.querySelector('.ax-menu-items');
+        const submenu = this.submenuSlot()?.nativeElement;
         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;
-        // --- 1. VERTICAL POSITIONING ---
         const preferredTop = this.isFirstLevel() && this.root.orientation() === 'horizontal'
-            ? itemRect.bottom // For horizontal menu, open below
-            : itemRect.top; // For vertical menu, align with parent top
-        const alternateTop = itemRect.top - submenuRect.height; // Position for opening upwards
+            ? itemRect.bottom
+            : itemRect.top;
+        const alternateTop = itemRect.top - submenuRect.height;
         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;
-        }
-        // --- 2. HORIZONTAL POSITIONING ---
+        finalTop = this.clampVerticalPosition(finalTop, submenuRect.height, windowHeight);
         if (this.isFirstLevel() && this.root.orientation() === 'horizontal') {
             const preferredLeft = isRtl ? itemRect.right - submenuRect.width : itemRect.left;
             const alternateLeft = isRtl ? itemRect.left : itemRect.right - submenuRect.width;
@@ -246,7 +300,6 @@ class AXMenuItemComponent extends NXComponent {
                 }
             }
         }
-        // --- 3. NEW: OVERLAP-AWARE VERTICAL SHIFT ---
         const isNestedMenu = !(this.isFirstLevel() && this.root.orientation() === 'horizontal');
         if (isNestedMenu) {
             const overlapsParent = finalLeft < itemRect.right && itemRect.left < finalLeft + submenuRect.width;
@@ -257,20 +310,109 @@ class AXMenuItemComponent extends NXComponent {
                 }
             }
         }
-        // --- 4. APPLY FINAL STYLES ---
+        finalTop = this.clampVerticalPosition(finalTop, submenuRect.height, windowHeight);
         this.renderer.setStyle(submenu, 'position', 'fixed');
         this.renderer.setStyle(submenu, 'top', `${finalTop}px`);
         this.renderer.setStyle(submenu, 'left', `${finalLeft}px`);
-        // Apply z-index from token
         if (this.zToken) {
             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;
+    }
+    /**
+     * Moves nested `ax-menu-item` nodes rendered by recursive `ngTemplateOutlet` templates
+     * into the submenu slot. Angular content queries do not traverse those embedded views.
+     */
+    reparentOrphanedChildren() {
+        const container = this.submenuSlot()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        for (const el of this.getDirectSubmenuNodes()) {
+            if (!container.contains(el)) {
+                try {
+                    container.appendChild(el);
+                }
+                catch {
+                    // HierarchyRequestError when the node is already being moved.
+                }
+            }
+        }
+    }
+    /**
+     * 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;
+            }
+            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;
+        }
+        this.childRefreshScheduled = true;
+        requestAnimationFrame(() => {
+            this.childRefreshScheduled = false;
+            this.reparentOrphanedChildren();
+            this.updateDiscoveredSubmenuNodeCount();
+        });
+    }
+    hasRelevantChildMutation(records) {
+        for (const record of records) {
+            if (this.nodeListContainsMenuStructuralNode(record.addedNodes) ||
+                this.nodeListContainsMenuStructuralNode(record.removedNodes)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    nodeListContainsMenuStructuralNode(nodes) {
+        for (const node of Array.from(nodes)) {
+            if (!(node instanceof Element)) {
+                continue;
+            }
+            const tagName = node.tagName;
+            if (tagName === 'AX-MENU-ITEM' || tagName === 'AX-TITLE' || tagName === 'AX-DIVIDER') {
+                return true;
+            }
+            if (node.querySelector?.('ax-menu-item,ax-title,ax-divider')) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /** 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())
             return;
-        //
         const event = {
             sender: this,
             nativeEvent: e,
@@ -281,10 +423,8 @@ class AXMenuItemComponent extends NXComponent {
                 data: this.data(),
             },
         };
-        //
         this.onClick.emit(event);
         this.root.onItemClick.emit({ ...event, ...{ sender: this.root } });
-        //
         if (this.hasSubItems() && !event.canceled) {
             this.open();
         }
@@ -295,10 +435,9 @@ class AXMenuItemComponent extends NXComponent {
     }
     handleMouseEnter(event) {
         event.stopPropagation();
-        // Cancel the close delay if the mouse re-enters the element
         if (this.mouseLeaveTimeout) {
             clearTimeout(this.mouseLeaveTimeout);
-            this.mouseLeaveTimeout = null; // Reset the timeout
+            this.mouseLeaveTimeout = null;
         }
         if (!this.isFirstLevel() || this.root.openOn() == 'hover') {
             this.open();
@@ -306,49 +445,35 @@ class AXMenuItemComponent extends NXComponent {
     }
     handleMouseLeave(event) {
         event.stopPropagation();
-        if (this.hasSubItems() && this.root.closeOn() === 'leave') {
-            // Clear any previous timeout to avoid multiple triggers
-            if (this.mouseLeaveTimeout) {
-                clearTimeout(this.mouseLeaveTimeout);
-            }
-            // Set a delay before closing the submenu
-            this.mouseLeaveTimeout = setTimeout(() => {
-                this.close();
-            }, 500); // Adjust the delay (500ms in this case) as per your requirement
+        if (!this.hasSubItems() || this.root.closeOn() !== 'leave') {
+            return;
         }
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget instanceof Node && this.containsSubmenuPointer(relatedTarget)) {
+            return;
+        }
+        if (this.mouseLeaveTimeout) {
+            clearTimeout(this.mouseLeaveTimeout);
+        }
+        this.mouseLeaveTimeout = setTimeout(() => {
+            this.close();
+        }, 500);
     }
-    onWindowEvent() {
-        this.service.closeAll$.next(); // Close all menus on scroll or resize
-    }
-    /**
-     * Close all menus if clicking outside the root menu and all sub-items.
-     */
-    onClickOutside(event) {
-        const hostElement = this.root.nativeElement;
-        if (!hostElement.contains(event.target)) {
-            this.service.closeAll$.next(); // Close all menus if click is outside the root and sub-items
+    /** True when the pointer moved into this item's submenu panel or a nested open submenu. */
+    containsSubmenuPointer(node) {
+        const submenu = this.submenuSlot()?.nativeElement;
+        if (submenu?.contains(node)) {
+            return true;
+        }
+        if (this.nativeElement.contains(node)) {
+            return true;
         }
+        return this.getDirectSubmenuNodes().some((child) => child.contains(node));
     }
     ngOnDestroy() {
-        this.removeScrollEvents();
-    }
-    bindScrollEvents() {
-        this.scrollableParents = AXHtmlUtil.getScrollableParents(this.nativeElement);
-        this.scrollableParents.forEach((parent) => {
-            parent.addEventListener('scroll', this.onContainerScroll.bind(this));
-        });
-    }
-    // Remove scroll event listeners
-    removeScrollEvents() {
-        this.scrollableParents.forEach((parent) => {
-            parent.removeEventListener('scroll', this.onContainerScroll.bind(this));
-        });
-    }
-    /**
-     * Handler for scroll events (window or scrollable parent containers)
-     */
-    onContainerScroll() {
-        this.service.closeAll$.next(); // Close all menus on scroll
+        if (this.isOpen()) {
+            this.close();
+        }
     }
     /** @ignore */
     get __hostClass() {
@@ -356,11 +481,11 @@ class AXMenuItemComponent extends NXComponent {
         if (this.disabled()) {
             list.push('ax-state-disabled');
         }
-        list.push(`ax-${this.color() ?? 'ax-default'}`);
+        list.push(`${this.color() ?? 'ax-default'}`);
         return list;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXMenuItemComponent, isStandalone: true, selector: "ax-menu-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "handleMouseEnter($event)", "mouseleave": "handleMouseLeave($event)", "window:scroll": "onWindowEvent()", "window:resize": "onWindowEvent()", "document:click": "onClickOutside($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMenuItemComponent, isStandalone: true, selector: "ax-menu-item", inputs: { subItems: { classPropertyName: "subItems", publicName: "subItems", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "handleMouseEnter($event)", "mouseleave": "handleMouseLeave($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXMenuItemComponentBase,
                 useExisting: AXMenuItemComponent,
@@ -370,9 +495,9 @@ class AXMenuItemComponent extends NXComponent {
                 provide: AXComponent,
                 useExisting: AXMenuItemComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!isRoot() || root?.hasArrow())) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} \"></i>\n  }\n</div>\n<div class=\"ax-menu-items ax-action-list ax-action-list-vertical\" [class.ax-state-open]=\"isOpen()\">\n  <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "childMenuItems", predicate: AXMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "submenuSlot", first: true, predicate: ["submenuSlot"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!isFirstLevel() || root.hasArrow())) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} \"></i>\n  }\n</div>\n<div\n  #submenuSlot\n  class=\"ax-menu-items ax-action-list ax-action-list-vertical\"\n  [class.ax-state-open]=\"isOpen()\"\n>\n  <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container,[ngTemplateOutlet]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -384,8 +509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                             provide: AXComponent,
                             useExisting: AXMenuItemComponent,
                         },
-                    ], template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!isRoot() || root?.hasArrow())) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} \"></i>\n  }\n</div>\n<div class=\"ax-menu-items ax-action-list ax-action-list-vertical\" [class.ax-state-open]=\"isOpen()\">\n  <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container\"></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], handleClick: [{
+                    ], template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!isFirstLevel() || root.hasArrow())) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} \"></i>\n  }\n</div>\n<div\n  #submenuSlot\n  class=\"ax-menu-items ax-action-list ax-action-list-vertical\"\n  [class.ax-state-open]=\"isOpen()\"\n>\n  <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container,[ngTemplateOutlet]\"></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { childMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXMenuItemComponent), { ...{ descendants: false }, isSignal: true }] }], submenuSlot: [{ type: i0.ViewChild, args: ['submenuSlot', { isSignal: true }] }], subItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItems", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], handleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], handleMouseEnter: [{
@@ -394,15 +519,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             }], handleMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave', ['$event']]
-            }], onWindowEvent: [{
-                type: HostListener,
-                args: ['window:scroll']
-            }, {
-                type: HostListener,
-                args: ['window:resize']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -424,30 +540,38 @@ class AXContextMenuComponent extends NXComponent {
     constructor() {
         super();
         // Inputs and Outputs
-        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-        this.openOn = input('hover', ...(ngDevMode ? [{ debugName: "openOn" }] : []));
-        this.closeOn = input('click', ...(ngDevMode ? [{ debugName: "closeOn" }] : []));
-        this.originalItems = input([], { ...(ngDevMode ? { debugName: "originalItems" } : {}), alias: 'items' });
-        this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
+        this.orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.openOn = input('hover', ...(ngDevMode ? [{ debugName: "openOn" }] : /* istanbul ignore next */ []));
+        this.closeOn = input('click', ...(ngDevMode ? [{ debugName: "closeOn" }] : /* istanbul ignore next */ []));
+        /** When true, closes the menu on router navigation (e.g. side-menu route changes). */
+        this.closeOnRouteChange = input(false, ...(ngDevMode ? [{ debugName: "closeOnRouteChange" }] : /* istanbul ignore next */ []));
+        this.originalItems = input([], { ...(ngDevMode ? { debugName: "originalItems" } : /* istanbul ignore next */ {}), alias: 'items' });
+        this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
         this.onItemClick = output();
         this.onOpening = output();
         /** Emitted when the menu closes (backdrop, item click, scroll, another menu opening, etc.). */
         this.onClose = output();
-        this.hasArrow = signal(true, ...(ngDevMode ? [{ debugName: "hasArrow" }] : []));
+        this.hasArrow = signal(true, ...(ngDevMode ? [{ debugName: "hasArrow" }] : /* istanbul ignore next */ []));
         // Injected Services
         this.service = inject(AXMenuService);
         this.renderer = inject(Renderer2);
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
         this.zIndexService = inject(AXZIndexService);
+        this.injector = inject(Injector);
         this.zToken = null;
+        this.lastOpenPoint = null;
+        this.router = inject(Router, { optional: true });
+        this.destroyRef = inject(DestroyRef);
         this.originalNextSibling = null;
         this.originalParent = null;
-        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         //
         afterNextRender(() => {
             this.bindContextEvent();
+            this.service.initGlobalListeners(this.nativeElement);
         });
+        this.setupCloseOnRouteChange();
         this.service.closeAllContextMenu$.subscribe(() => {
             this.service.closeAll$.next();
             this.close();
@@ -479,7 +603,6 @@ class AXContextMenuComponent extends NXComponent {
     showAt(point, targetElement, event) {
         const sender = this;
         this.service.closeAllContextMenu$.next({ sender });
-        this.service.openContextMenu$.next({ sender, point });
         if (isPlatformBrowser(this.platformID)) {
             if (!targetElement) {
                 targetElement = this.document.elementFromPoint(point.x, point.y);
@@ -497,6 +620,7 @@ class AXContextMenuComponent extends NXComponent {
             this.onOpening.emit(event);
             this.items.set(event.items);
         }
+        this.service.openContextMenu$.next({ sender, point });
     }
     /**
      * Closes the context menu and removes the backdrop.
@@ -504,6 +628,12 @@ class AXContextMenuComponent extends NXComponent {
     close() {
         const wasOpen = this.nativeElement.classList.contains('ax-state-open');
         this.nativeElement.classList.remove('ax-state-open');
+        this.lastOpenPoint = null;
+        // Drop rendered items before moving DOM nodes back to the original parent.
+        // This prevents a large menu tree from being re-parented/removed as a single heavy DOM operation.
+        if (wasOpen) {
+            this.items.set([]);
+        }
         this.removeBackdrop();
         // Release z-index token
         this.zIndexService.release(this.zToken);
@@ -514,6 +644,19 @@ class AXContextMenuComponent extends NXComponent {
     }
     // Private Methods (Internal Logic)
     /** @ignore */
+    setupCloseOnRouteChange() {
+        if (!this.router || !isPlatformBrowser(this.platformID)) {
+            return;
+        }
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationStart), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (this.closeOnRouteChange()) {
+                this.close();
+            }
+        });
+    }
+    /** @ignore */
     getTargetElements() {
         if (isPlatformBrowser(this.platformID)) {
             const elements = typeof this.target() == 'string'
@@ -561,12 +704,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 +753,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() {
@@ -679,8 +845,8 @@ class AXContextMenuComponent extends NXComponent {
     get __hostClass() {
         return ['ax-menu-container', `ax-orientation-${this.orientation()}`, 'ax-action-list', 'ax-action-list-vertical'];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXContextMenuComponent, isStandalone: true, selector: "ax-context-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: true, isRequired: false, transformFunction: null }, originalItems: { classPropertyName: "originalItems", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick", onOpening: "onOpening", onClose: "onClose" }, host: { listeners: { "window:scroll": "onWindowEvent()", "window:resize": "onWindowEvent()" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXContextMenuComponent, isStandalone: true, selector: "ax-context-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: true, isRequired: false, transformFunction: null }, closeOnRouteChange: { classPropertyName: "closeOnRouteChange", publicName: "closeOnRouteChange", isSignal: true, isRequired: false, transformFunction: null }, originalItems: { classPropertyName: "originalItems", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick", onOpening: "onOpening", onClose: "onClose" }, host: { listeners: { "window:scroll": "onWindowEvent()", "window:resize": "onWindowEvent()" }, properties: { "class": "this.__hostClass" } }, providers: [
             AXMenuService,
             {
                 provide: AXRootMenu,
@@ -690,9 +856,9 @@ class AXContextMenuComponent extends NXComponent {
                 provide: AXComponent,
                 useExisting: AXContextMenuComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-context-menu,ax-menu{@apply flex w-max text-inherit;}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{@apply text-on-lightest bg-lightest border-border-lightest invisible fixed flex h-max w-max min-w-48 flex-col rounded-lg border py-2 opacity-0 shadow transition-all;}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{@apply visible opacity-100;}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{@apply text-(--ax-comp-bg);}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){@apply bg-(--ax-comp-bg) text-(--ax-comp-bg);}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{@apply text-(--ax-comp-bg);}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{@apply font-normal!;}ax-context-menu.ax-action-list-horizontal{@apply px-4;}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){@apply gap-2;}ax-menu.ax-action-list-horizontal{@apply min-w-48 gap-5;}ax-menu.ax-action-list-horizontal>ax-title{@apply hidden;}ax-menu.ax-action-list-horizontal>ax-menu-item{@apply font-medium;}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{@apply ps-0!;}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item .ax-action-item-suffix:empty){@apply me-0! ps-0!;}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item:hover.ax-state-disabled){@apply bg-transparent!;}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{@apply opacity-70;}ax-menu.ax-action-list-vertical{@apply w-max min-w-48;}ax-menu.ax-action-list-vertical>ax-menu-item{@apply font-medium;}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item:hover.ax-state-disabled){@apply bg-transparent!;}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{@apply opacity-70;}ax-menu>ax-menu-item{@apply py-2;}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){@apply rounded-lg;}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled)>ax-text{@apply opacity-70;}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item\n    [name]=\"item.name\"\n    [data]=\"item.data\"\n    [disabled]=\"item.disabled\"\n    [color]=\"item.color\"\n    [subItems]=\"item.items ?? []\"\n  >\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{visibility:hidden;position:fixed;display:flex;height:max-content;width:max-content;min-width:calc(var(--spacing, .25rem) * 48);flex-direction:column;border-radius:var(--radius-default, var(--ax-sys-border-radius));border-width:1px;border-style:solid;border-color:var(--color-border-lightest, rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest, rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-lightest, rgba(var(--ax-sys-color-on-lightest-surface)));padding-block:calc(var(--spacing, .25rem) * 2);opacity:0;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{visibility:visible;opacity:1}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:var(--ax-comp-bg)}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){background-color:var(--ax-comp-bg);color:var(--ax-comp-bg)}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:var(--ax-comp-bg)}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:calc(var(--spacing, .25rem) * 2)}ax-menu.ax-action-list-horizontal{min-width:calc(var(--spacing, .25rem) * 48);gap:calc(var(--spacing, .25rem) * 5)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item .ax-action-item-suffix:empty){margin-inline-end:0!important;padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu.ax-action-list-vertical{width:max-content;min-width:calc(var(--spacing, .25rem) * 48)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu>ax-menu-item{padding-block:calc(var(--spacing, .25rem) * 2)}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled){border-radius:var(--radius-default, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled)>ax-text{opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXMenuService,
@@ -711,8 +877,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXDecoratorIconComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-context-menu,ax-menu{@apply flex w-max text-inherit;}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{@apply text-on-lightest bg-lightest border-border-lightest invisible fixed flex h-max w-max min-w-48 flex-col rounded-lg border py-2 opacity-0 shadow transition-all;}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{@apply visible opacity-100;}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{@apply text-(--ax-comp-bg);}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){@apply bg-(--ax-comp-bg) text-(--ax-comp-bg);}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{@apply text-(--ax-comp-bg);}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{@apply font-normal!;}ax-context-menu.ax-action-list-horizontal{@apply px-4;}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){@apply gap-2;}ax-menu.ax-action-list-horizontal{@apply min-w-48 gap-5;}ax-menu.ax-action-list-horizontal>ax-title{@apply hidden;}ax-menu.ax-action-list-horizontal>ax-menu-item{@apply font-medium;}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{@apply ps-0!;}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item .ax-action-item-suffix:empty){@apply me-0! ps-0!;}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item:hover.ax-state-disabled){@apply bg-transparent!;}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{@apply opacity-70;}ax-menu.ax-action-list-vertical{@apply w-max min-w-48;}ax-menu.ax-action-list-vertical>ax-menu-item{@apply font-medium;}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item:hover.ax-state-disabled){@apply bg-transparent!;}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{@apply opacity-70;}ax-menu>ax-menu-item{@apply py-2;}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){@apply rounded-lg;}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled)>ax-text{@apply opacity-70;}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], closeOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOn", required: false }] }], originalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onOpening: [{ type: i0.Output, args: ["onOpening"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onWindowEvent: [{
+                    ], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item\n    [name]=\"item.name\"\n    [data]=\"item.data\"\n    [disabled]=\"item.disabled\"\n    [color]=\"item.color\"\n    [subItems]=\"item.items ?? []\"\n  >\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{visibility:hidden;position:fixed;display:flex;height:max-content;width:max-content;min-width:calc(var(--spacing, .25rem) * 48);flex-direction:column;border-radius:var(--radius-default, var(--ax-sys-border-radius));border-width:1px;border-style:solid;border-color:var(--color-border-lightest, rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest, rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-lightest, rgba(var(--ax-sys-color-on-lightest-surface)));padding-block:calc(var(--spacing, .25rem) * 2);opacity:0;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{visibility:visible;opacity:1}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:var(--ax-comp-bg)}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled),ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled),ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled){background-color:var(--ax-comp-bg);color:var(--ax-comp-bg)}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:var(--ax-comp-bg)}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:calc(var(--spacing, .25rem) * 4)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:calc(var(--spacing, .25rem) * 2)}ax-menu.ax-action-list-horizontal{min-width:calc(var(--spacing, .25rem) * 48);gap:calc(var(--spacing, .25rem) * 5)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item .ax-action-item-suffix:empty){margin-inline-end:0!important;padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu.ax-action-list-vertical{width:max-content;min-width:calc(var(--spacing, .25rem) * 48)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item.ax-state-disabled){background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu>ax-menu-item{padding-block:calc(var(--spacing, .25rem) * 2)}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled){border-radius:var(--radius-default, var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled)>ax-text{opacity:.7}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], closeOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOn", required: false }] }], closeOnRouteChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnRouteChange", required: false }] }], originalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onOpening: [{ type: i0.Output, args: ["onOpening"] }], onClose: [{ type: i0.Output, args: ["onClose"] }], onWindowEvent: [{
                 type: HostListener,
                 args: ['window:scroll']
             }, {
@@ -729,14 +895,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class AXMenuComponent extends NXComponent {
     constructor() {
-        super(...arguments);
-        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-        this.openOn = input('hover', ...(ngDevMode ? [{ debugName: "openOn" }] : []));
-        this.closeOn = input('leave', ...(ngDevMode ? [{ debugName: "closeOn" }] : []));
+        super();
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.openOn = input('hover', ...(ngDevMode ? [{ debugName: "openOn" }] : /* istanbul ignore next */ []));
+        this.closeOn = input('leave', ...(ngDevMode ? [{ debugName: "closeOn" }] : /* istanbul ignore next */ []));
         this.service = inject(AXMenuService);
         this.onItemClick = output();
-        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-        this.hasArrow = input(true, ...(ngDevMode ? [{ debugName: "hasArrow" }] : []));
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.hasArrow = input(true, ...(ngDevMode ? [{ debugName: "hasArrow" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.service.initGlobalListeners(this.nativeElement);
+        });
     }
     /** @ignore */
     get __hostClass() {
@@ -755,8 +924,8 @@ class AXMenuComponent extends NXComponent {
     close() {
         this.service.closeAll$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXMenuComponent, isStandalone: true, selector: "ax-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMenuComponent, isStandalone: true, selector: "ax-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             AXMenuService,
             {
                 provide: AXRootMenu,
@@ -766,9 +935,9 @@ class AXMenuComponent extends NXComponent {
                 provide: AXComponent,
                 useExisting: AXMenuComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial}}}@layer components{ax-context-menu,ax-menu{width:max-content;color:inherit;display:flex}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;width:max-content;height:max-content;min-width:calc(var(--spacing,.25rem) * 48);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding-block:calc(var(--spacing,.25rem) * 2);color:rgba(var(--ax-sys-color-on-lightest-surface));opacity:0;--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));flex-direction:column;display:flex;position:fixed}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items).ax-state-open{visibility:visible;opacity:1}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){background-color:var(--ax-comp-bg);color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item ax-suffix ax-text{--tw-font-weight:var(--font-weight-normal,400)!important;font-weight:var(--font-weight-normal,400)!important}ax-context-menu.ax-action-list-horizontal{padding-inline:calc(var(--spacing,.25rem) * 4)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:calc(var(--spacing,.25rem) * 2)}ax-menu.ax-action-list-horizontal{min-width:calc(var(--spacing,.25rem) * 48);gap:calc(var(--spacing,.25rem) * 5)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:calc(var(--spacing,.25rem) * 0)!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){margin-inline-end:calc(var(--spacing,.25rem) * 0)!important;padding-inline-start:calc(var(--spacing,.25rem) * 0)!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu.ax-action-list-vertical{width:max-content;min-width:calc(var(--spacing,.25rem) * 48)}ax-menu.ax-action-list-vertical>ax-menu-item{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu>ax-menu-item{padding-block:calc(var(--spacing,.25rem) * 2)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--radius-lg,.5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:.7}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item\n    [name]=\"item.name\"\n    [data]=\"item.data\"\n    [disabled]=\"item.disabled\"\n    [color]=\"item.color\"\n    [subItems]=\"item.items ?? []\"\n  >\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{width:max-content;color:inherit;display:flex}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;width:max-content;height:max-content;min-width:calc(var(--spacing,.25rem) * 48);border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:solid;border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));padding-block:calc(var(--spacing,.25rem) * 2);opacity:0;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);flex-direction:column;display:flex;position:fixed;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items).ax-state-open{visibility:visible;opacity:1}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){background-color:var(--ax-comp-bg);color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:calc(var(--spacing,.25rem) * 4)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:calc(var(--spacing,.25rem) * 2)}ax-menu.ax-action-list-horizontal{min-width:calc(var(--spacing,.25rem) * 48);gap:calc(var(--spacing,.25rem) * 5)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){margin-inline-end:0!important;padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu.ax-action-list-vertical{width:max-content;min-width:calc(var(--spacing,.25rem) * 48)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu>ax-menu-item{padding-block:calc(var(--spacing,.25rem) * 2)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled){border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled)>ax-text{opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         AXMenuService,
@@ -787,18 +956,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXDecoratorIconComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial}}}@layer components{ax-context-menu,ax-menu{width:max-content;color:inherit;display:flex}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;width:max-content;height:max-content;min-width:calc(var(--spacing,.25rem) * 48);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding-block:calc(var(--spacing,.25rem) * 2);color:rgba(var(--ax-sys-color-on-lightest-surface));opacity:0;--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));flex-direction:column;display:flex;position:fixed}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items).ax-state-open{visibility:visible;opacity:1}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){background-color:var(--ax-comp-bg);color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item ax-suffix ax-text{--tw-font-weight:var(--font-weight-normal,400)!important;font-weight:var(--font-weight-normal,400)!important}ax-context-menu.ax-action-list-horizontal{padding-inline:calc(var(--spacing,.25rem) * 4)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:calc(var(--spacing,.25rem) * 2)}ax-menu.ax-action-list-horizontal{min-width:calc(var(--spacing,.25rem) * 48);gap:calc(var(--spacing,.25rem) * 5)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:calc(var(--spacing,.25rem) * 0)!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){margin-inline-end:calc(var(--spacing,.25rem) * 0)!important;padding-inline-start:calc(var(--spacing,.25rem) * 0)!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu.ax-action-list-vertical{width:max-content;min-width:calc(var(--spacing,.25rem) * 48)}ax-menu.ax-action-list-vertical>ax-menu-item{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item:hover.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu>ax-menu-item{padding-block:calc(var(--spacing,.25rem) * 2)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled){border-radius:var(--radius-lg,.5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{opacity:.7}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], closeOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOn", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], hasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasArrow", required: false }] }], __hostClass: [{
+                    ], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item\n    [name]=\"item.name\"\n    [data]=\"item.data\"\n    [disabled]=\"item.disabled\"\n    [color]=\"item.color\"\n    [subItems]=\"item.items ?? []\"\n  >\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{width:max-content;color:inherit;display:flex}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;width:max-content;height:max-content;min-width:calc(var(--spacing,.25rem) * 48);border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:solid;border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));padding-block:calc(var(--spacing,.25rem) * 2);opacity:0;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);flex-direction:column;display:flex;position:fixed;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items).ax-state-open{visibility:visible;opacity:1}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){background-color:var(--ax-comp-bg);color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:calc(var(--spacing,.25rem) * 4)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:calc(var(--spacing,.25rem) * 2)}ax-menu.ax-action-list-horizontal{min-width:calc(var(--spacing,.25rem) * 48);gap:calc(var(--spacing,.25rem) * 5)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){margin-inline-end:0!important;padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu.ax-action-list-vertical{width:max-content;min-width:calc(var(--spacing,.25rem) * 48)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu>ax-menu-item{padding-block:calc(var(--spacing,.25rem) * 2)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled){border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled)>ax-text{opacity:.7}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], closeOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOn", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], hasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasArrow", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class AXMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AXMenuModule, imports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent], exports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuModule, imports: [AXMenuComponent, AXContextMenuComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXMenuModule, imports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent], exports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuModule, imports: [AXMenuComponent, AXContextMenuComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent],
@@ -810,5 +979,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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