@acorex/components 22.0.0-next.2 → 22.0.0-next.21

package/fesm2022/acorex-components-menu.mjs

@@ -105,6 +105,16 @@ class AXMenuItemClickBaseEvent extends NXClickEvent {
     }
 }
 
+/** Edge padding when clamping floating menu panels to the viewport. */
+const AX_MENU_VIEWPORT_MARGIN = 8;
+/** Limits a fixed menu panel so it stays within the viewport below `top`. */
+function axFitMenuPanelHeight(renderer, el, top) {
+    renderer.setStyle(el, 'max-height', `${Math.max(0, window.innerHeight - top - AX_MENU_VIEWPORT_MARGIN)}px`);
+}
+function axClearMenuPanelHeight(renderer, el) {
+    renderer.removeStyle(el, 'max-height');
+}
+
 /**
  * Represents a menu item component used within an `ax-menu`.
  * @category Components
@@ -139,8 +149,16 @@ class AXMenuItemComponent extends NXComponent {
         this.unsuscriber = inject(AXUnsubscriber);
         this.renderer = inject(Renderer2);
         this.injector = inject(Injector);
+        this.document = inject(DOCUMENT);
         this.zIndexService = inject(AXZIndexService);
         this.zToken = null;
+        this.submenuPortalParent = null;
+        this.submenuPortalNextSibling = null;
+        /** Survives submenu portaling when the DOM parent chain is broken. */
+        this.linkedParent = null;
+        this.mouseLeaveTimeout = null;
+        this.submenuUnlistenEnter = null;
+        this.submenuUnlistenLeave = null;
         this.arrowIcon = computed(() => {
             const isRtl = AXHtmlUtil.isRtl(this.nativeElement);
             return this.root.orientation() == 'horizontal' && this.isFirstLevel()
@@ -159,12 +177,12 @@ class AXMenuItemComponent extends NXComponent {
         ...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.color = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
-        this.mouseLeaveTimeout = null;
         afterNextRender(() => {
             if (!isPlatformBrowser(this.platformId)) {
                 return;
             }
             this.reparentOrphanedChildren();
+            this.linkChildItems();
             this.updateDiscoveredSubmenuNodeCount();
             this.childObserver = new MutationObserver((records) => {
                 if (!this.hasRelevantChildMutation(records)) {
@@ -185,6 +203,10 @@ class AXMenuItemComponent extends NXComponent {
         this.service.close$.pipe(this.unsuscriber.takeUntilDestroy).subscribe((item) => {
             if (this == item) {
                 this.isOpen.set(false);
+                this.clearCloseTimeout();
+                this.restoreSubmenuPortal();
+                this.zIndexService.release(this.zToken);
+                this.zToken = null;
             }
         });
     }
@@ -192,10 +214,13 @@ class AXMenuItemComponent extends NXComponent {
         return this.nativeElement.querySelector('ax-text')?.innerText;
     }
     /**
-     * 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.
+     * Resolves the parent menu item. Prefers an explicit link (survives submenu portaling),
+     * then DI, then the DOM tree.
      */
     getParentMenuItem() {
+        if (this.linkedParent) {
+            return this.linkedParent;
+        }
         if (this.parent) {
             return this.parent;
         }
@@ -203,8 +228,7 @@ class AXMenuItemComponent extends NXComponent {
         if (!parentHost || parentHost === this.nativeElement) {
             return null;
         }
-        const ctx = parentHost.__axContext__;
-        return ctx instanceof AXMenuItemComponent ? ctx : null;
+        return this.getInstanceFromElement(parentHost) ?? null;
     }
     /**
      * Opens the submenu of this menu item if it has sub-items and is not disabled.
@@ -214,7 +238,13 @@ class AXMenuItemComponent extends NXComponent {
             return;
         }
         this.reparentOrphanedChildren();
+        this.linkChildItems();
         this.service.closeExcept(this);
+        const submenu = this.submenuSlot()?.nativeElement;
+        if (submenu) {
+            // Portal before `isOpen` so ancestor overflow cannot clip the first paint.
+            this.portalSubmenu(submenu);
+        }
         if (!this.zToken) {
             this.zToken = this.zIndexService.acquire();
         }
@@ -224,9 +254,8 @@ class AXMenuItemComponent extends NXComponent {
      * Closes the submenu of this menu item if open.
      */
     close() {
+        this.clearCloseTimeout();
         this.service.markClosed(this);
-        this.zIndexService.release(this.zToken);
-        this.zToken = null;
     }
     /**
      * Positions the submenu after layout so nested levels measure their full height.
@@ -245,30 +274,35 @@ class AXMenuItemComponent extends NXComponent {
     }
     /**
      * Calculate the position of the submenu to avoid it going out of the viewport.
+     * Tall panels are height-clamped; the panel is portaled so parent overflow cannot clip it.
      */
     calculatePosition() {
         const submenu = this.submenuSlot()?.nativeElement;
         if (!submenu)
             return;
+        this.portalSubmenu(submenu);
+        axClearMenuPanelHeight(this.renderer, submenu);
         const submenuRect = this.measureSubmenuRect(submenu);
         const itemRect = this.nativeElement.getBoundingClientRect();
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
+        const margin = AX_MENU_VIEWPORT_MARGIN;
         const isRtl = AXHtmlUtil.isRtl(this.nativeElement);
+        const effectiveHeight = Math.min(submenuRect.height, Math.max(0, windowHeight - margin * 2));
         let finalTop;
         let finalLeft;
         const preferredTop = this.isFirstLevel() && this.root.orientation() === 'horizontal' ? itemRect.bottom : itemRect.top;
-        const alternateTop = itemRect.top - submenuRect.height;
-        if (preferredTop + submenuRect.height <= windowHeight) {
+        const alternateTop = itemRect.top - effectiveHeight;
+        if (preferredTop + effectiveHeight <= windowHeight - margin) {
             finalTop = preferredTop;
         }
-        else if (alternateTop >= 0) {
+        else if (alternateTop >= margin) {
             finalTop = alternateTop;
         }
         else {
-            finalTop = windowHeight - submenuRect.height;
+            finalTop = margin;
         }
-        finalTop = this.clampVerticalPosition(finalTop, submenuRect.height, windowHeight);
+        finalTop = this.clampVerticalPosition(finalTop, effectiveHeight, windowHeight, margin);
         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;
@@ -280,47 +314,30 @@ class AXMenuItemComponent extends NXComponent {
             }
         }
         else {
-            const preferredLeftRtl = itemRect.left - submenuRect.width;
-            const alternateLeftRtl = itemRect.right;
-            const preferredLeftLtr = itemRect.right;
-            const alternateLeftLtr = itemRect.left - submenuRect.width;
-            if (isRtl) {
-                if (preferredLeftRtl >= 0) {
-                    finalLeft = preferredLeftRtl;
-                }
-                else if (alternateLeftRtl + submenuRect.width <= windowWidth) {
-                    finalLeft = alternateLeftRtl;
-                }
-                else {
-                    finalLeft = 0;
-                }
+            const preferredLeft = isRtl ? itemRect.left - submenuRect.width : itemRect.right;
+            const alternateLeft = isRtl ? itemRect.right : itemRect.left - submenuRect.width;
+            if (isRtl ? preferredLeft >= 0 : preferredLeft + submenuRect.width <= windowWidth) {
+                finalLeft = preferredLeft;
+            }
+            else if (isRtl ? alternateLeft + submenuRect.width <= windowWidth : alternateLeft >= 0) {
+                finalLeft = alternateLeft;
             }
             else {
-                if (preferredLeftLtr + submenuRect.width <= windowWidth) {
-                    finalLeft = preferredLeftLtr;
-                }
-                else if (alternateLeftLtr >= 0) {
-                    finalLeft = alternateLeftLtr;
-                }
-                else {
-                    finalLeft = windowWidth - submenuRect.width;
-                }
+                finalLeft = isRtl ? 0 : windowWidth - submenuRect.width;
             }
         }
         const isNestedMenu = !(this.isFirstLevel() && this.root.orientation() === 'horizontal');
         if (isNestedMenu) {
             const overlapsParent = finalLeft < itemRect.right && itemRect.left < finalLeft + submenuRect.width;
-            if (overlapsParent) {
-                const shiftedTop = itemRect.bottom;
-                if (shiftedTop + submenuRect.height <= windowHeight) {
-                    finalTop = shiftedTop;
-                }
+            if (overlapsParent && itemRect.bottom + effectiveHeight <= windowHeight - margin) {
+                finalTop = itemRect.bottom;
             }
         }
-        finalTop = this.clampVerticalPosition(finalTop, submenuRect.height, windowHeight);
+        finalTop = this.clampVerticalPosition(finalTop, effectiveHeight, windowHeight, margin);
         this.renderer.setStyle(submenu, 'position', 'fixed');
         this.renderer.setStyle(submenu, 'top', `${finalTop}px`);
         this.renderer.setStyle(submenu, 'left', `${finalLeft}px`);
+        axFitMenuPanelHeight(this.renderer, submenu, finalTop);
         if (this.zToken) {
             this.renderer.setStyle(submenu, 'z-index', String(this.zToken.zIndex));
         }
@@ -334,6 +351,83 @@ class AXMenuItemComponent extends NXComponent {
         this.renderer.removeStyle(submenu, 'display');
         return rect;
     }
+    /** Moves the submenu under the context-menu backdrop (or body) to escape ancestor overflow. */
+    portalSubmenu(submenu) {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        submenu.__axMenuOwner__ = this;
+        this.bindSubmenuPointerListeners(submenu);
+        if (this.submenuPortalParent) {
+            return;
+        }
+        const parent = submenu.parentElement;
+        if (!parent) {
+            return;
+        }
+        this.submenuPortalParent = parent;
+        this.submenuPortalNextSibling = submenu.nextSibling;
+        const rootEl = this.root.nativeElement;
+        const rootParent = rootEl.parentElement;
+        const portalHost = rootEl.tagName === 'AX-CONTEXT-MENU' && rootParent && rootParent !== this.document.body
+            ? rootParent
+            : this.document.body;
+        if (submenu.parentElement !== portalHost) {
+            portalHost.appendChild(submenu);
+        }
+    }
+    restoreSubmenuPortal() {
+        const submenu = this.submenuSlot()?.nativeElement;
+        this.unbindSubmenuPointerListeners();
+        if (submenu) {
+            axClearMenuPanelHeight(this.renderer, submenu);
+            delete submenu.__axMenuOwner__;
+        }
+        if (submenu && this.submenuPortalParent) {
+            try {
+                this.submenuPortalParent.insertBefore(submenu, this.submenuPortalNextSibling);
+            }
+            catch {
+                // Host may already be torn down while the context menu is closing.
+            }
+        }
+        this.submenuPortalParent = null;
+        this.submenuPortalNextSibling = null;
+    }
+    /** Keep this item open while the pointer is over its portaled submenu panel. */
+    bindSubmenuPointerListeners(submenu) {
+        this.unbindSubmenuPointerListeners();
+        this.submenuUnlistenEnter = this.renderer.listen(submenu, 'mouseenter', () => {
+            this.clearCloseTimeout();
+            this.clearAncestorCloseTimeouts();
+        });
+        this.submenuUnlistenLeave = this.renderer.listen(submenu, 'mouseleave', (event) => {
+            this.handlePointerLeave(event);
+        });
+    }
+    unbindSubmenuPointerListeners() {
+        this.submenuUnlistenEnter?.();
+        this.submenuUnlistenLeave?.();
+        this.submenuUnlistenEnter = null;
+        this.submenuUnlistenLeave = null;
+    }
+    /** Links direct children so parent resolution still works after the panel is portaled. */
+    linkChildItems() {
+        const submenu = this.submenuSlot()?.nativeElement;
+        if (!submenu) {
+            return;
+        }
+        submenu.querySelectorAll(':scope > ax-menu-item').forEach((el) => {
+            const child = this.getInstanceFromElement(el);
+            if (child) {
+                child.linkedParent = this;
+            }
+        });
+    }
+    getInstanceFromElement(el) {
+        const ctx = el.__axContext__;
+        return ctx instanceof AXMenuItemComponent ? ctx : undefined;
+    }
     /**
      * Moves nested `ax-menu-item` nodes rendered by recursive `ngTemplateOutlet` templates
      * into the submenu slot. Angular content queries do not traverse those embedded views.
@@ -369,7 +463,13 @@ class AXMenuItemComponent extends NXComponent {
         });
     }
     updateDiscoveredSubmenuNodeCount() {
-        this.discoveredSubmenuNodeCount.set(this.getDirectSubmenuNodes().length);
+        const fromHost = this.getDirectSubmenuNodes().length;
+        const submenu = this.submenuSlot()?.nativeElement;
+        const fromPanel = submenu
+            ? submenu.querySelectorAll(':scope > ax-menu-item, :scope > ax-title, :scope > ax-divider').length
+            : 0;
+        // After portaling, projected children live in the panel outside this host.
+        this.discoveredSubmenuNodeCount.set(Math.max(fromHost, fromPanel));
     }
     scheduleChildRefresh() {
         if (this.childRefreshScheduled) {
@@ -379,6 +479,7 @@ class AXMenuItemComponent extends NXComponent {
         requestAnimationFrame(() => {
             this.childRefreshScheduled = false;
             this.reparentOrphanedChildren();
+            this.linkChildItems();
             this.updateDiscoveredSubmenuNodeCount();
         });
     }
@@ -407,12 +508,12 @@ class AXMenuItemComponent extends NXComponent {
         return false;
     }
     /** Keeps the submenu fully inside the viewport vertically. */
-    clampVerticalPosition(top, height, windowHeight) {
-        if (top + height > windowHeight) {
-            top = windowHeight - height;
+    clampVerticalPosition(top, height, windowHeight, margin = 0) {
+        if (top + height > windowHeight - margin) {
+            top = windowHeight - margin - height;
         }
-        if (top < 0) {
-            top = 0;
+        if (top < margin) {
+            top = margin;
         }
         return top;
     }
@@ -442,16 +543,17 @@ class AXMenuItemComponent extends NXComponent {
     }
     handleMouseEnter(event) {
         event.stopPropagation();
-        if (this.mouseLeaveTimeout) {
-            clearTimeout(this.mouseLeaveTimeout);
-            this.mouseLeaveTimeout = null;
-        }
+        this.clearCloseTimeout();
+        this.clearAncestorCloseTimeouts();
         if (!this.isFirstLevel() || this.root.openOn() == 'hover') {
             this.open();
         }
     }
     handleMouseLeave(event) {
         event.stopPropagation();
+        this.handlePointerLeave(event);
+    }
+    handlePointerLeave(event) {
         if (!this.hasSubItems() || this.root.closeOn() !== 'leave') {
             return;
         }
@@ -459,25 +561,54 @@ class AXMenuItemComponent extends NXComponent {
         if (relatedTarget instanceof Node && this.containsSubmenuPointer(relatedTarget)) {
             return;
         }
-        if (this.mouseLeaveTimeout) {
-            clearTimeout(this.mouseLeaveTimeout);
-        }
+        this.scheduleClose();
+    }
+    scheduleClose() {
+        this.clearCloseTimeout();
         this.mouseLeaveTimeout = setTimeout(() => {
+            this.mouseLeaveTimeout = null;
             this.close();
         }, 500);
     }
-    /** True when the pointer moved into this item's submenu panel or a nested open submenu. */
+    clearCloseTimeout() {
+        if (this.mouseLeaveTimeout) {
+            clearTimeout(this.mouseLeaveTimeout);
+            this.mouseLeaveTimeout = null;
+        }
+    }
+    clearAncestorCloseTimeouts() {
+        let current = this.getParentMenuItem();
+        while (current) {
+            current.clearCloseTimeout();
+            current = current.getParentMenuItem();
+        }
+    }
+    /** True when the pointer is still inside this item's submenu tree (including portaled panels). */
     containsSubmenuPointer(node) {
-        const submenu = this.submenuSlot()?.nativeElement;
-        if (submenu?.contains(node)) {
+        if (this.submenuSlot()?.nativeElement?.contains(node) || this.nativeElement.contains(node)) {
             return true;
         }
-        if (this.nativeElement.contains(node)) {
-            return true;
+        const el = node instanceof Element ? node : node.parentElement;
+        if (!el) {
+            return false;
         }
-        return this.getDirectSubmenuNodes().some((child) => child.contains(node));
+        const item = this.getInstanceFromElement(el.closest('ax-menu-item') ?? el) ??
+            el.closest('.ax-menu-items')?.__axMenuOwner__;
+        return !!item && this.isSelfOrAncestorOf(item);
+    }
+    isSelfOrAncestorOf(item) {
+        let current = item;
+        while (current) {
+            if (current === this) {
+                return true;
+            }
+            current = current.getParentMenuItem();
+        }
+        return false;
     }
     ngOnDestroy() {
+        this.clearCloseTimeout();
+        this.unbindSubmenuPointerListeners();
         if (this.isOpen()) {
             this.close();
         }
@@ -643,6 +774,7 @@ class AXContextMenuComponent extends NXComponent {
         const wasOpen = this.nativeElement.classList.contains('ax-state-open');
         this.nativeElement.classList.remove('ax-state-open');
         this.lastOpenPoint = null;
+        axClearMenuPanelHeight(this.renderer, this.nativeElement);
         // 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) {
@@ -739,6 +871,7 @@ class AXContextMenuComponent extends NXComponent {
         const itemRect = this.measureMenuRect(elementRef);
         const windowWidth = window.innerWidth;
         const windowHeight = window.innerHeight;
+        const margin = AX_MENU_VIEWPORT_MARGIN;
         const isRtl = AXHtmlUtil.isRtl(elementRef);
         let left;
         if (isRtl) {
@@ -753,23 +886,22 @@ class AXContextMenuComponent extends NXComponent {
                 left = point.x - itemRect.width;
             }
         }
-        const bottom = point.y + itemRect.height;
-        let top;
-        if (bottom > windowHeight) {
-            top = point.y - itemRect.height;
-            if (top < 0) {
-                top = 0;
-            }
+        const effectiveHeight = Math.min(itemRect.height, Math.max(0, windowHeight - margin * 2));
+        let top = point.y;
+        if (top + effectiveHeight > windowHeight - margin) {
+            top = windowHeight - margin - effectiveHeight;
         }
-        else {
-            top = point.y;
+        if (top < margin) {
+            top = margin;
         }
         this.renderer.setStyle(elementRef, 'left', `${left}px`);
         this.renderer.setStyle(elementRef, 'top', `${top}px`);
         this.renderer.setStyle(elementRef, 'position', 'fixed');
+        axFitMenuPanelHeight(this.renderer, elementRef, top);
     }
     /** Measures menu size even when an ancestor hides the host with `display: none`. */
     measureMenuRect(elementRef) {
+        axClearMenuPanelHeight(this.renderer, elementRef);
         this.renderer.setStyle(elementRef, 'visibility', 'hidden');
         this.renderer.setStyle(elementRef, 'display', 'flex');
         const rect = elementRef.getBoundingClientRect();
@@ -814,7 +946,12 @@ class AXContextMenuComponent extends NXComponent {
             this.close();
             l1();
         });
-        const l2 = this.renderer.listen(el, 'wheel', () => {
+        const l2 = this.renderer.listen(el, 'wheel', (e) => {
+            const target = e.target;
+            if (target instanceof Element &&
+                (this.nativeElement.contains(target) || target.closest('.ax-menu-items'))) {
+                return;
+            }
             this.close();
             l2();
         });
@@ -870,7 +1007,7 @@ 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\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: ["@layer properties;@layer components{ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;position:fixed;display:flex;height:max-content;width:max-content;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;padding-block:calc(var(--spacing, .25rem) * 2);opacity:0%;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));min-width:calc(var(--spacing, .25rem) * 48);border-radius:var(--radius-default, var(--ax-sys-border-radius));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)));box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}: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:100%}: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.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:70%}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.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:70%}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:70%}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | 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: ["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" }], 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: ["@layer properties;@layer components{ax-context-menu,ax-menu,.ax-menu-items{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}ax-context-menu.ax-menu-container,.ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;max-height:calc(100dvh - 1rem);flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-style:solid;border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 #0000),var(--ax-ring-shadow, 0 0 #0000),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-context-menu.ax-menu-container,.ax-menu-items).ax-state-open{opacity:1;visibility:visible}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color));--tw-font-weight: var(--font-weight-normal, 400) !important;font-weight:var(--font-weight-normal, 400)!important}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0;padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, 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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}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){padding-inline-end:0!important;margin-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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}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.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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | 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: ["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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
@@ -891,7 +1028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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\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: ["@layer properties;@layer components{ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;position:fixed;display:flex;height:max-content;width:max-content;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;padding-block:calc(var(--spacing, .25rem) * 2);opacity:0%;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));min-width:calc(var(--spacing, .25rem) * 48);border-radius:var(--radius-default, var(--ax-sys-border-radius));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)));box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}: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:100%}: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.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:70%}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.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:70%}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:70%}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], 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: ["@layer properties;@layer components{ax-context-menu,ax-menu,.ax-menu-items{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}ax-context-menu.ax-menu-container,.ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;max-height:calc(100dvh - 1rem);flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-style:solid;border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 #0000),var(--ax-ring-shadow, 0 0 #0000),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-context-menu.ax-menu-container,.ax-menu-items).ax-state-open{opacity:1;visibility:visible}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color));--tw-font-weight: var(--font-weight-normal, 400) !important;font-weight:var(--font-weight-normal, 400)!important}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0;padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, 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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}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){padding-inline-end:0!important;margin-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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}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.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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\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']
@@ -954,7 +1091,7 @@ 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\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: ["@layer properties;@layer components{ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;position:fixed;display:flex;height:max-content;width:max-content;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;padding-block:calc(var(--spacing, .25rem) * 2);opacity:0%;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));min-width:calc(var(--spacing, .25rem) * 48);border-radius:var(--radius-default, var(--ax-sys-border-radius));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)));box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}: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:100%}: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.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:70%}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.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:70%}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:70%}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | 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: ["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" }], 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: ["@layer properties;@layer components{ax-context-menu,ax-menu,.ax-menu-items{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}ax-context-menu.ax-menu-container,.ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;max-height:calc(100dvh - 1rem);flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-style:solid;border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 #0000),var(--ax-ring-shadow, 0 0 #0000),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-context-menu.ax-menu-container,.ax-menu-items).ax-state-open{opacity:1;visibility:visible}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color));--tw-font-weight: var(--font-weight-normal, 400) !important;font-weight:var(--font-weight-normal, 400)!important}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0;padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, 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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}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){padding-inline-end:0!important;margin-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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}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.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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | 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: ["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" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
@@ -975,7 +1112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", 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\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: ["@layer properties;@layer components{ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;position:fixed;display:flex;height:max-content;width:max-content;flex-direction:column;border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;padding-block:calc(var(--spacing, .25rem) * 2);opacity:0%;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));min-width:calc(var(--spacing, .25rem) * 48);border-radius:var(--radius-default, var(--ax-sys-border-radius));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)));box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}: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:100%}: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.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:70%}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.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:70%}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:70%}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], 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: ["@layer properties;@layer components{ax-context-menu,ax-menu,.ax-menu-items{--ax-comp-menu-items-min-width: 12rem;--ax-comp-menu-action-list-hover-decorator-opacity: .7;--ax-comp-menu-action-list-horizontal-min-width: 12rem;--ax-comp-menu-action-list-horizontal-gap: 1.25rem;--ax-comp-menu-action-list-vertical-min-width: 12rem}ax-context-menu,ax-menu{display:flex;width:max-content;color:inherit}ax-context-menu.ax-menu-container,.ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;max-height:calc(100dvh - 1rem);flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-width:var(--ax-comp-menu-items-min-width);color:rgba(var(--ax-comp-menu-items-text-color, var(--ax-sys-color-on-lightest-surface)));background-color:rgba(var(--ax-comp-menu-sub-item-bg-color, var(--ax-sys-color-lightest-surface)));padding-block:var(--ax-comp-menu-items-padding-block, .5rem);border-width:var(--ax-comp-menu-items-border-width, 1px);border-style:solid;border-radius:var(--ax-comp-menu-items-border-radius, var(--ax-sys-border-radius));border-color:rgba(var(--ax-comp-menu-items-border-color, var(--ax-sys-color-border-lightest-surface)));--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 #0000),var(--ax-ring-shadow, 0 0 #0000),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}:is(ax-context-menu.ax-menu-container,.ax-menu-items).ax-state-open{opacity:1;visibility:visible}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-suffix-text-color));--tw-font-weight: var(--font-weight-normal, 400) !important;font-weight:var(--font-weight-normal, 400)!important}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-menu-item-hover-text-color, var(--ax-sys-color-on-surface)));background-color:rgba(var(--ax-comp-menu-item-hover-bg-color, var(--ax-sys-color-surface)))!important}:is(ax-context-menu.ax-menu-container,.ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0;padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}ax-menu>ax-menu-item:hover:not(ax-menu ax-menu-item.ax-state-disabled){border-radius:var(--ax-comp-menu-items-border-radius, 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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-horizontal{min-width:var(--ax-comp-menu-action-list-horizontal-min-width);gap:var(--ax-comp-menu-action-list-horizontal-gap)}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){padding-inline-end:0!important;margin-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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu.ax-action-list-vertical{width:max-content;min-width:var(--ax-comp-menu-action-list-vertical-min-width)}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.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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\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']