@acorex/components 21.0.1-next.7 → 21.0.1-next.71

package/fesm2022/acorex-components-menu.mjs

@@ -2,6 +2,7 @@ import { NXClickEvent, NXComponent, AXComponent, NXEvent } from '@acorex/cdk/com
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
 import { isBrowser } from '@acorex/core/platform';
 import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
+import { AXZIndexService } from '@acorex/core/z-index';
 import { isPlatformBrowser, NgTemplateOutlet } 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';
@@ -17,10 +18,10 @@ class AXMenuService {
         this.openContextMenu$ = new Subject();
         this.closeAllContextMenu$ = new Subject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuService }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuService, decorators: [{
             type: Injectable
         }] });
 
@@ -53,6 +54,8 @@ class AXMenuItemComponent extends NXComponent {
         this.scrollableParents = [];
         this.unsuscriber = inject(AXUnsubscriber);
         this.renderer = inject(Renderer2);
+        this.zIndexService = inject(AXZIndexService);
+        this.zToken = null;
         this.arrowIcon = computed(() => {
             const isRtl = AXHtmlUtil.isRtl(this.nativeElement);
             return this.root.orientation() == 'horizontal' && this.isFirstLevel()
@@ -148,6 +151,10 @@ class AXMenuItemComponent extends NXComponent {
     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);
         }
     }
@@ -158,6 +165,9 @@ class AXMenuItemComponent extends NXComponent {
      */
     close() {
         this.service.close$.next(this);
+        // Release z-index token
+        this.zIndexService.release(this.zToken);
+        this.zToken = null;
     }
     /**
      * Calculate the position of the submenu to avoid it going out of the viewport.
@@ -250,6 +260,10 @@ class AXMenuItemComponent extends NXComponent {
         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));
+        }
     }
     handleClick(e) {
         e.stopPropagation();
@@ -344,8 +358,8 @@ class AXMenuItemComponent extends NXComponent {
         list.push(`ax-${this.color() ?? 'ax-default'}`);
         return list;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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($event)", "window:resize": "onWindowEvent($event)", "document:click": "onClickOutside($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    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: [
             {
                 provide: AXMenuItemComponentBase,
                 useExisting: AXMenuItemComponent,
@@ -357,7 +371,7 @@ class AXMenuItemComponent extends NXComponent {
             },
         ], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -381,10 +395,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['mouseleave', ['$event']]
             }], onWindowEvent: [{
                 type: HostListener,
-                args: ['window:scroll', ['$event']]
+                args: ['window:scroll']
             }, {
                 type: HostListener,
-                args: ['window:resize', ['$event']]
+                args: ['window:resize']
             }], onClickOutside: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -412,16 +426,20 @@ class AXContextMenuComponent extends NXComponent {
         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' }] : [{ alias: 'items' }]));
+        this.originalItems = input([], { ...(ngDevMode ? { debugName: "originalItems" } : {}), alias: 'items' });
         this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
         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" }] : []));
         // Injected Services
         this.service = inject(AXMenuService);
         this.renderer = inject(Renderer2);
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
+        this.zIndexService = inject(AXZIndexService);
+        this.zToken = null;
         this.originalNextSibling = null;
         this.originalParent = null;
         this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -483,8 +501,15 @@ class AXContextMenuComponent extends NXComponent {
      * Closes the context menu and removes the backdrop.
      */
     close() {
+        const wasOpen = this.nativeElement.classList.contains('ax-state-open');
         this.nativeElement.classList.remove('ax-state-open');
         this.removeBackdrop();
+        // Release z-index token
+        this.zIndexService.release(this.zToken);
+        this.zToken = null;
+        if (wasOpen) {
+            this.onClose.emit();
+        }
     }
     // Private Methods (Internal Logic)
     /** @ignore */
@@ -577,13 +602,15 @@ class AXContextMenuComponent extends NXComponent {
             this.originalParent = this.nativeElement.parentElement;
             this.originalNextSibling = this.nativeElement.nextSibling;
         }
+        // Acquire z-index token
+        this.zToken = this.zIndexService.acquire();
         this.backdropElement = this.renderer.createElement('div');
         this.renderer.setStyle(this.backdropElement, 'position', 'fixed');
         this.renderer.setStyle(this.backdropElement, 'top', '0');
         this.renderer.setStyle(this.backdropElement, 'left', '0');
         this.renderer.setStyle(this.backdropElement, 'width', '100%');
         this.renderer.setStyle(this.backdropElement, 'height', '100%');
-        this.renderer.setStyle(this.backdropElement, 'z-index', '1000');
+        this.renderer.setStyle(this.backdropElement, 'z-index', String(this.zToken.zIndex));
         this.renderer.setStyle(this.backdropElement, 'background', 'transparent');
         this.createEventListeners(this.backdropElement);
         this.document.body.appendChild(this.backdropElement);
@@ -611,18 +638,32 @@ class AXContextMenuComponent extends NXComponent {
             l2();
         });
         const l3 = this.renderer.listen(el, 'contextmenu', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const x = e.clientX;
+            const y = e.clientY;
+            // Close first so the full-screen backdrop is gone; otherwise the next target never
+            // receives contextmenu (conversation list / message list / etc.).
             this.close();
-            // Get all elements under the mouse pointer
             if (isPlatformBrowser(this.platformID)) {
-                const elementsUnderMouse = this.document.elementsFromPoint(e.x, e.y);
-                const targetElements = this.getTargetElements();
-                if (targetElements.some((target) => elementsUnderMouse.includes(target))) {
-                    e.preventDefault();
-                    setTimeout(() => {
-                        //this.internalShowAt({ x: e.x, y: e.y });
-                        this.handleContextMenu(e);
+                requestAnimationFrame(() => {
+                    const under = this.document.elementFromPoint(x, y);
+                    if (!under || under === this.document.body || under === this.document.documentElement) {
+                        return;
+                    }
+                    const forward = new MouseEvent('contextmenu', {
+                        bubbles: true,
+                        cancelable: true,
+                        view: this.document.defaultView ?? undefined,
+                        clientX: x,
+                        clientY: y,
+                        screenX: e.screenX,
+                        screenY: e.screenY,
+                        button: 2,
+                        buttons: 2,
                     });
-                }
+                    under.dispatchEvent(forward);
+                });
             }
             l3();
         });
@@ -637,8 +678,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: "20.3.15", ngImport: i0, type: AXContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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" }, host: { listeners: { "window:scroll": "onWindowEvent($event)", "window:resize": "onWindowEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    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: [
             AXMenuService,
             {
                 provide: AXRootMenu,
@@ -648,9 +689,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 }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text }}</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 z-9999 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"] }], 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 [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 }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text }}</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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXMenuService,
@@ -662,13 +703,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             provide: AXComponent,
                             useExisting: AXContextMenuComponent,
                         },
-                    ], imports: [NgTemplateOutlet, AXDecoratorGenericComponent, AXMenuItemComponent, AXDecoratorIconComponent], 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 }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text }}</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 z-9999 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"] }], onWindowEvent: [{
+                    ], imports: [NgTemplateOutlet, AXDecoratorGenericComponent, AXMenuItemComponent, AXDecoratorIconComponent], 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 }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text }}</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: [{
                 type: HostListener,
-                args: ['window:scroll', ['$event']]
+                args: ['window:scroll']
             }, {
                 type: HostListener,
-                args: ['window:resize', ['$event']]
+                args: ['window:resize']
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -706,8 +747,8 @@ class AXMenuComponent extends NXComponent {
     close() {
         this.service.closeAll$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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.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: [
             AXMenuService,
             {
                 provide: AXRootMenu,
@@ -717,9 +758,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 }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text }}</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;z-index:9999;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:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-block:calc(var(--spacing,.25rem)*2);color:var(--color-on-lightest,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.1.18 | 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"] }], 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 [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 }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text }}</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:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-block:calc(var(--spacing,.25rem) * 2);color:var(--color-on-lightest,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.2.4 | 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         AXMenuService,
@@ -731,18 +772,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             provide: AXComponent,
                             useExisting: AXMenuComponent,
                         },
-                    ], imports: [NgTemplateOutlet, AXDecoratorGenericComponent, AXMenuItemComponent, AXDecoratorIconComponent], 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 }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text }}</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;z-index:9999;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:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-block:calc(var(--spacing,.25rem)*2);color:var(--color-on-lightest,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.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], imports: [NgTemplateOutlet, AXDecoratorGenericComponent, AXMenuItemComponent, AXDecoratorIconComponent], 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 }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text }}</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:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding-block:calc(var(--spacing,.25rem) * 2);color:var(--color-on-lightest,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.2.4 | 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: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
 class AXMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXMenuModule, imports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent], exports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuModule, imports: [AXMenuComponent, AXContextMenuComponent] }); }
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent],