@acorex/components 20.2.0-next.9 → 20.2.1

package/fesm2022/acorex-components-menu.mjs

@@ -1,16 +1,12 @@
 import { NXClickEvent, NXComponent, AXComponent, NXEvent } from '@acorex/cdk/common';
-import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
 import { isBrowser } from '@acorex/core/platform';
 import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
-import { isPlatformBrowser, NgTemplateOutlet, CommonModule } from '@angular/common';
+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';
 import { cloneDeep } from 'lodash-es';
 import { Subject } from 'rxjs';
-import { AXLoadingModule } from '@acorex/components/loading';
-import { AXPopoverModule } from '@acorex/components/popover';
-import { AXTranslationModule } from '@acorex/core/translation';
-import { OverlayModule } from '@angular/cdk/overlay';
 
 class AXMenuService {
     constructor() {
@@ -21,10 +17,10 @@ class AXMenuService {
         this.openContextMenu$ = new Subject();
         this.closeAllContextMenu$ = new Subject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMenuService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuService, decorators: [{
             type: Injectable
         }] });
 
@@ -142,12 +138,24 @@ class AXMenuItemComponent extends NXComponent {
             this.hasSubItems.set(false);
         }
     }
+    /**
+     * Opens the submenu of this menu item if it has sub-items and is not disabled.
+     *
+     * Inherited behavior: Uses the injected service to notify other items to close.
+     *
+     * @returns void - No return value. Triggers submenu opening side-effects.
+     */
     open() {
         this.service.closeExcept$.next(this);
         if (!this.disabled() && this.hasSubItems()) {
             this.service.open$.next(this);
         }
     }
+    /**
+     * Closes the submenu of this menu item if open.
+     *
+     * @returns void - No return value. Triggers submenu closing side-effects.
+     */
     close() {
         this.service.close$.next(this);
     }
@@ -336,8 +344,8 @@ class AXMenuItemComponent extends NXComponent {
         list.push(`ax-${this.color() ?? 'default'}`);
         return list;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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($event)", "window:resize": "onWindowEvent($event)", "document:click": "onClickOutside($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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($event)", "window:resize": "onWindowEvent($event)", "document:click": "onClickOutside($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXMenuItemComponentBase,
                 useExisting: AXMenuItemComponent,
@@ -349,7 +357,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.1.3", ngImport: i0, type: AXMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -404,7 +412,7 @@ 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.orginalItems = input([], ...(ngDevMode ? [{ debugName: "orginalItems", alias: 'items' }] : [{ alias: 'items' }]));
+        this.originalItems = input([], ...(ngDevMode ? [{ debugName: "originalItems", alias: 'items' }] : [{ alias: 'items' }]));
         this.target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
         this.onItemClick = output();
         this.onOpening = output();
@@ -414,6 +422,8 @@ class AXContextMenuComponent extends NXComponent {
         this.renderer = inject(Renderer2);
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
+        this.originalNextSibling = null;
+        this.originalParent = null;
         this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
         //
         afterNextRender(() => {
@@ -435,10 +445,18 @@ class AXContextMenuComponent extends NXComponent {
             this.removeContextEvent();
         }
     }
+    /**
+     * Refreshes the context menu by rebinding event listeners to target elements.
+     */
     refresh() {
         this.bindContextEvent();
     }
-    // Public Methods
+    /**
+     * Shows the context menu at a specific point.
+     * @param point - The coordinates where the menu should appear
+     * @param targetElement - Optional target element for the context menu
+     * @param event - Optional opening event with menu items
+     */
     showAt(point, targetElement, event) {
         const sender = this;
         this.service.closeAllContextMenu$.next({ sender });
@@ -452,7 +470,7 @@ class AXContextMenuComponent extends NXComponent {
                     sender: this,
                     canceled: false,
                     targetElement: targetElement,
-                    items: cloneDeep(this.orginalItems()),
+                    items: cloneDeep(this.originalItems()),
                 };
                 if (event.canceled)
                     return;
@@ -461,6 +479,9 @@ class AXContextMenuComponent extends NXComponent {
             this.items.set(event.items);
         }
     }
+    /**
+     * Closes the context menu and removes the backdrop.
+     */
     close() {
         this.nativeElement.classList.remove('ax-state-open');
         this.removeBackdrop();
@@ -504,7 +525,7 @@ class AXContextMenuComponent extends NXComponent {
                 sender: this,
                 canceled: false,
                 targetElement: targetElement,
-                items: cloneDeep(this.orginalItems()),
+                items: cloneDeep(this.originalItems()),
             };
             //
             if (!event.canceled) {
@@ -552,13 +573,17 @@ class AXContextMenuComponent extends NXComponent {
     }
     /** @ignore */
     createBackdrop() {
+        if (!this.originalParent) {
+            this.originalParent = this.nativeElement.parentElement;
+            this.originalNextSibling = this.nativeElement.nextSibling;
+        }
         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'); // Ensure it's below the context menu
+        this.renderer.setStyle(this.backdropElement, 'z-index', '1000');
         this.renderer.setStyle(this.backdropElement, 'background', 'transparent');
         this.createEventListeners(this.backdropElement);
         this.document.body.appendChild(this.backdropElement);
@@ -567,8 +592,11 @@ class AXContextMenuComponent extends NXComponent {
     /** @ignore */
     removeBackdrop() {
         if (this.backdropElement) {
+            if (this.originalParent) {
+                this.renderer.insertBefore(this.originalParent, this.nativeElement, this.originalNextSibling);
+            }
             if (this.backdropElement.parentNode) {
-                this.backdropElement.parentNode.removeChild(this.backdropElement);
+                this.renderer.removeChild(this.backdropElement.parentNode, this.backdropElement);
             }
             this.backdropElement = null;
         }
@@ -609,8 +637,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.1.3", ngImport: i0, type: AXContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.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 }, orginalItems: { classPropertyName: "orginalItems", 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: "20.3.3", ngImport: i0, type: AXContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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" }, host: { listeners: { "window:scroll": "onWindowEvent($event)", "window:resize": "onWindowEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             AXMenuService,
             {
                 provide: AXRootMenu,
@@ -620,9 +648,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: ["ax-context-menu,ax-menu{--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-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accnt6,ax-menu ax-menu-item.ax-accnt6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accnt6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;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-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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}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{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}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){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}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}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{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.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{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.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: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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\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: ["ax-context-menu,ax-menu{--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-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;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-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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}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{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}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){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}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}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{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){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:hover.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: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: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{font-weight: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:transparent!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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.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: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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\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.1.3", ngImport: i0, type: AXContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         AXMenuService,
@@ -634,7 +662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             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: ["ax-context-menu,ax-menu{--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-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accnt6,ax-menu ax-menu-item.ax-accnt6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accnt6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;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-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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}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{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}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){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}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}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{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.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{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.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: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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\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: ["ax-context-menu,ax-menu{--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-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;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-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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}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{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}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){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}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}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{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){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:hover.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: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: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{font-weight: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:transparent!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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.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: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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onWindowEvent: [{
                 type: HostListener,
                 args: ['window:scroll', ['$event']]
@@ -670,11 +698,16 @@ class AXMenuComponent extends NXComponent {
             `${!this.hasArrow() ? 'ax-hide-arrow' : ''}`,
         ];
     }
+    /**
+     * Closes all open menus and submenus for this root menu.
+     *
+     * @returns void - No return value. All open menu overlays are closed and hidden.
+     */
     close() {
         this.service.closeAll$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXMenuComponent, isStandalone: true, selector: "ax-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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,
@@ -684,9 +717,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: ["ax-context-menu,ax-menu{--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-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accnt6,ax-menu ax-menu-item.ax-accnt6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accnt6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;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-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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}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{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}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){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}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}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{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.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{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.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: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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\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: ["ax-context-menu,ax-menu{--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-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;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-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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}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{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}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){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}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}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{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){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:hover.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: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: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{font-weight: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:transparent!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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.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: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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\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.1.3", ngImport: i0, type: AXMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         AXMenuService,
@@ -698,25 +731,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             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: ["ax-context-menu,ax-menu{--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-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accnt6,ax-menu ax-menu-item.ax-accnt6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accnt6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accnt6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accnt6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;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-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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}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{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}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){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}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}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{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.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{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover>.ax-action-item-suffix{opacity:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.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: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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\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: ["ax-context-menu,ax-menu{--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-item.ax-primary,ax-menu ax-menu-item.ax-primary{--ax-comp-menu-item-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-primary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-primary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-primary-surface)}ax-context-menu ax-menu-item.ax-secondary,ax-menu ax-menu-item.ax-secondary{--ax-comp-menu-item-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-secondary-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-secondary-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-secondary-surface)}ax-context-menu ax-menu-item.ax-success,ax-menu ax-menu-item.ax-success{--ax-comp-menu-item-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-success-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-success-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-success-surface)}ax-context-menu ax-menu-item.ax-warning,ax-menu ax-menu-item.ax-warning{--ax-comp-menu-item-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-warning-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-warning-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-warning-surface)}ax-context-menu ax-menu-item.ax-danger,ax-menu ax-menu-item.ax-danger{--ax-comp-menu-item-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-danger-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-danger-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-danger-surface)}ax-context-menu ax-menu-item.ax-accent1,ax-menu ax-menu-item.ax-accent1{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent1-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent1-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent1-surface)}ax-context-menu ax-menu-item.ax-accent2,ax-menu ax-menu-item.ax-accent2{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent2-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent2-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent2-surface)}ax-context-menu ax-menu-item.ax-accent3,ax-menu ax-menu-item.ax-accent3{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent3-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent3-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent3-surface)}ax-context-menu ax-menu-item.ax-accent4,ax-menu ax-menu-item.ax-accent4{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent4-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent4-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent4-surface)}ax-context-menu ax-menu-item.ax-accent5,ax-menu ax-menu-item.ax-accent5{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent5-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent5-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent5-surface)}ax-context-menu ax-menu-item.ax-accent6,ax-menu ax-menu-item.ax-accent6{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent6-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent6-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent6-surface)}ax-context-menu ax-menu-item.ax-accent7,ax-menu ax-menu-item.ax-accent7{--ax-comp-menu-item-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-text-color: var(--ax-sys-color-accent7-surface);--ax-comp-menu-item-hover-bg-color: var(--ax-sys-color-accent7-surface), .1;--ax-comp-menu-item-hover-suffix-text-color: var(--ax-sys-color-accent7-surface)}ax-context-menu,ax-menu{width:100%;color:inherit;display:flex;width:max-content}ax-context-menu.ax-menu-container,ax-context-menu .ax-menu-items,ax-menu.ax-menu-container,ax-menu .ax-menu-items{--ax-comp-action-item-padding-inline: .875rem;opacity:0;z-index:9999;display:flex;position:fixed;visibility:hidden;width:max-content;height:max-content;flex-direction:column;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-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 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);transition-property:opacity,color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-context-menu.ax-menu-container.ax-state-open,ax-context-menu .ax-menu-items.ax-state-open,ax-menu.ax-menu-container.ax-state-open,ax-menu .ax-menu-items.ax-state-open{opacity:1;visibility:visible}ax-context-menu.ax-menu-container ax-menu-item,ax-context-menu .ax-menu-items ax-menu-item,ax-menu.ax-menu-container ax-menu-item,ax-menu .ax-menu-items ax-menu-item{color:rgba(var(--ax-comp-menu-item-text-color, var(--ax-sys-color-on-surface)))}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{color:rgba(var(--ax-comp-menu-item-suffix-text-color))}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){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}ax-context-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:rgba(var(--ax-comp-menu-item-hover-suffix-text-color))}ax-context-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-context-menu .ax-menu-items ax-menu-item ax-suffix ax-text,ax-menu.ax-menu-container ax-menu-item ax-suffix ax-text,ax-menu .ax-menu-items ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:var(--ax-comp-menu-action-list-horizontal-padding-inline, 1rem)}ax-menu>ax-menu-item{--ax-comp-action-item-padding-inline: 0}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:.5rem}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{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){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:hover.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: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: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{font-weight: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:transparent!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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}ax-menu>ax-menu-item{padding-block:var(--ax-comp-menu-items-padding-block, .5rem)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.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: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:var(--ax-comp-menu-action-list-hover-decorator-opacity)}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-const COMPONENT = [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent];
-const MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];
 class AXMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXMenuModule, imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule, AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent], exports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES, AXMenuComponent, AXContextMenuComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXMenuModule, imports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent], exports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuModule, imports: [AXMenuComponent, AXContextMenuComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ...MODULES, ...COMPONENT],
-                    exports: [...COMPONENT],
-                    providers: [],
+                    imports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent],
+                    exports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent],
                 }]
         }] });