@acorex/components 20.7.50 → 20.7.52

package/fesm2022/acorex-components-menu.mjs

@@ -6,7 +6,7 @@ import { AXHtmlUtil, AXUnsubscriber } from '@acorex/core/utils';
 import { AXZIndexService } from '@acorex/core/z-index';
 import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, DOCUMENT, PLATFORM_ID, Injectable, signal, computed, contentChildren, Renderer2, Injector, output, input, afterNextRender, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { inject, DestroyRef, DOCUMENT, PLATFORM_ID, Injectable, signal, computed, contentChildren, viewChild, input, Renderer2, Injector, output, afterNextRender, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationStart } from '@angular/router';
 import { filter } from 'rxjs/operators';
@@ -71,7 +71,7 @@ class AXMenuService {
         let current = opener;
         while (current) {
             keepOpen.add(current);
-            current = current.parent;
+            current = current.getParentMenuItem?.() ?? current.parent ?? null;
         }
         for (const openItem of [...this.openItems]) {
             if (!keepOpen.has(openItem)) {
@@ -113,12 +113,20 @@ class AXMenuItemComponent extends NXComponent {
     constructor() {
         super();
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-        this.submenuRendered = signal(false, ...(ngDevMode ? [{ debugName: "submenuRendered" }] : []));
         this.parent = inject(AXMenuItemComponent, { optional: true, skipSelf: true });
-        this.isRoot = computed(() => this.parent == null, ...(ngDevMode ? [{ debugName: "isRoot" }] : []));
-        this.isFirstLevel = computed(() => this.parent == null, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : []));
+        this.isFirstLevel = computed(() => this.getParentMenuItem() == null, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : []));
         this.childMenuItems = contentChildren(AXMenuItemComponent, ...(ngDevMode ? [{ debugName: "childMenuItems", descendants: false }] : [{ descendants: false }]));
-        this.hasSubItems = computed(() => this.childMenuItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : []));
+        this.submenuSlot = viewChild('submenuSlot', ...(ngDevMode ? [{ debugName: "submenuSlot" }] : []));
+        this.platformId = inject(PLATFORM_ID);
+        this.destroyRef = inject(DestroyRef);
+        this.childObserver = null;
+        this.childRefreshScheduled = false;
+        /**
+         * Nested items from the data model. Required for recursive `ngTemplateOutlet` templates
+         * because `contentChildren` does not traverse those embedded views.
+         */
+        this.subItems = input([], ...(ngDevMode ? [{ debugName: "subItems" }] : []));
+        this.hasSubItems = computed(() => (this.subItems()?.length ?? 0) > 0 || this.childMenuItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : []));
         this.root = inject(AXRootMenu);
         this.service = inject(AXMenuService);
         this.unsuscriber = inject(AXUnsubscriber);
@@ -140,6 +148,20 @@ class AXMenuItemComponent extends NXComponent {
         this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
         this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
         this.mouseLeaveTimeout = null;
+        afterNextRender(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            this.reparentOrphanedChildren();
+            this.childObserver = new MutationObserver((records) => {
+                if (!this.hasRelevantChildMutation(records)) {
+                    return;
+                }
+                this.scheduleChildRefresh();
+            });
+            this.childObserver.observe(this.nativeElement, { childList: true, subtree: true });
+            this.destroyRef.onDestroy(() => this.childObserver?.disconnect());
+        });
         this.service.closeAll$.pipe(this.unsuscriber.takeUntilDestroy).subscribe(() => this.close());
         this.service.open$.pipe(this.unsuscriber.takeUntilDestroy).subscribe((item) => {
             if (this === item) {
@@ -156,6 +178,21 @@ class AXMenuItemComponent extends NXComponent {
     getText() {
         return this.nativeElement.querySelector('ax-text')?.innerText;
     }
+    /**
+     * Resolves the parent menu item. Items rendered via recursive `ngTemplateOutlet` do not
+     * receive a DI parent, so we fall back to the DOM tree after reparenting.
+     */
+    getParentMenuItem() {
+        if (this.parent) {
+            return this.parent;
+        }
+        const parentHost = this.nativeElement.parentElement?.closest('ax-menu-item');
+        if (!parentHost || parentHost === this.nativeElement) {
+            return null;
+        }
+        const ctx = parentHost.__axContext__;
+        return ctx instanceof AXMenuItemComponent ? ctx : null;
+    }
     /**
      * Opens the submenu of this menu item if it has sub-items and is not disabled.
      */
@@ -163,7 +200,7 @@ class AXMenuItemComponent extends NXComponent {
         if (this.disabled() || !this.hasSubItems()) {
             return;
         }
-        this.submenuRendered.set(true);
+        this.reparentOrphanedChildren();
         this.service.closeExcept(this);
         if (!this.zToken) {
             this.zToken = this.zIndexService.acquire();
@@ -197,7 +234,7 @@ class AXMenuItemComponent extends NXComponent {
      * Calculate the position of the submenu to avoid it going out of the viewport.
      */
     calculatePosition() {
-        const submenu = this.nativeElement.querySelector('.ax-menu-items');
+        const submenu = this.submenuSlot()?.nativeElement;
         if (!submenu)
             return;
         const submenuRect = this.measureSubmenuRect(submenu);
@@ -286,6 +323,69 @@ class AXMenuItemComponent extends NXComponent {
         this.renderer.removeStyle(submenu, 'display');
         return rect;
     }
+    /**
+     * Moves nested `ax-menu-item` nodes rendered by recursive `ngTemplateOutlet` templates
+     * into the submenu slot. Angular content queries do not traverse those embedded views.
+     */
+    reparentOrphanedChildren() {
+        const container = this.submenuSlot()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        for (const el of this.getDirectChildElements()) {
+            if (!container.contains(el)) {
+                try {
+                    container.appendChild(el);
+                }
+                catch {
+                    // HierarchyRequestError when the node is already being moved.
+                }
+            }
+        }
+    }
+    /** Direct nested `ax-menu-item` hosts for this item only. */
+    getDirectChildElements() {
+        return Array.from(this.nativeElement.querySelectorAll('ax-menu-item')).filter((el) => {
+            if (el === this.nativeElement) {
+                return false;
+            }
+            return el.parentElement?.closest('ax-menu-item') === this.nativeElement;
+        });
+    }
+    scheduleChildRefresh() {
+        if (this.childRefreshScheduled) {
+            return;
+        }
+        this.childRefreshScheduled = true;
+        requestAnimationFrame(() => {
+            this.childRefreshScheduled = false;
+            this.reparentOrphanedChildren();
+        });
+    }
+    hasRelevantChildMutation(records) {
+        for (const record of records) {
+            if (this.nodeListContainsMenuStructuralNode(record.addedNodes) ||
+                this.nodeListContainsMenuStructuralNode(record.removedNodes)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    nodeListContainsMenuStructuralNode(nodes) {
+        for (const node of Array.from(nodes)) {
+            if (!(node instanceof Element)) {
+                continue;
+            }
+            const tagName = node.tagName;
+            if (tagName === 'AX-MENU-ITEM' || tagName === 'AX-TITLE' || tagName === 'AX-DIVIDER') {
+                return true;
+            }
+            if (node.querySelector?.('ax-menu-item,ax-title,ax-divider')) {
+                return true;
+            }
+        }
+        return false;
+    }
     /** Keeps the submenu fully inside the viewport vertically. */
     clampVerticalPosition(top, height, windowHeight) {
         if (top + height > windowHeight) {
@@ -332,14 +432,30 @@ class AXMenuItemComponent extends NXComponent {
     }
     handleMouseLeave(event) {
         event.stopPropagation();
-        if (this.hasSubItems() && this.root.closeOn() === 'leave') {
-            if (this.mouseLeaveTimeout) {
-                clearTimeout(this.mouseLeaveTimeout);
-            }
-            this.mouseLeaveTimeout = setTimeout(() => {
-                this.close();
-            }, 500);
+        if (!this.hasSubItems() || this.root.closeOn() !== 'leave') {
+            return;
+        }
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget instanceof Node && this.containsSubmenuPointer(relatedTarget)) {
+            return;
+        }
+        if (this.mouseLeaveTimeout) {
+            clearTimeout(this.mouseLeaveTimeout);
+        }
+        this.mouseLeaveTimeout = setTimeout(() => {
+            this.close();
+        }, 500);
+    }
+    /** True when the pointer moved into this item's submenu panel or a nested open submenu. */
+    containsSubmenuPointer(node) {
+        const submenu = this.submenuSlot()?.nativeElement;
+        if (submenu?.contains(node)) {
+            return true;
+        }
+        if (this.nativeElement.contains(node)) {
+            return true;
         }
+        return this.getDirectChildElements().some((child) => child.contains(node));
     }
     ngOnDestroy() {
         if (this.isOpen()) {
@@ -356,7 +472,7 @@ class AXMenuItemComponent extends NXComponent {
         return list;
     }
     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)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXMenuItemComponent, isStandalone: true, selector: "ax-menu-item", inputs: { subItems: { classPropertyName: "subItems", publicName: "subItems", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "handleMouseEnter($event)", "mouseleave": "handleMouseLeave($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXMenuItemComponentBase,
                 useExisting: AXMenuItemComponent,
@@ -366,7 +482,7 @@ class AXMenuItemComponent extends NXComponent {
                 provide: AXComponent,
                 useExisting: AXMenuItemComponent,
             },
-        ], queries: [{ propertyName: "childMenuItems", predicate: AXMenuItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!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  @if (submenuRendered()) {\n    <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container\"></ng-content>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "childMenuItems", predicate: AXMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "submenuSlot", first: true, predicate: ["submenuSlot"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!isFirstLevel() || root.hasArrow())) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} \"></i>\n  }\n</div>\n<div\n  #submenuSlot\n  class=\"ax-menu-items ax-action-list ax-action-list-vertical\"\n  [class.ax-state-open]=\"isOpen()\"\n>\n  <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container,[ngTemplateOutlet]\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuItemComponent, decorators: [{
             type: Component,
@@ -380,7 +496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                             provide: AXComponent,
                             useExisting: AXMenuItemComponent,
                         },
-                    ], template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!isRoot() || root.hasArrow())) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} \"></i>\n  }\n</div>\n<div class=\"ax-menu-items ax-action-list ax-action-list-vertical\" [class.ax-state-open]=\"isOpen()\">\n  @if (submenuRendered()) {\n    <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container\"></ng-content>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!isFirstLevel() || root.hasArrow())) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} \"></i>\n  }\n</div>\n<div\n  #submenuSlot\n  class=\"ax-menu-items ax-action-list ax-action-list-vertical\"\n  [class.ax-state-open]=\"isOpen()\"\n>\n  <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container,[ngTemplateOutlet]\"></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { handleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -727,7 +843,7 @@ class AXContextMenuComponent extends NXComponent {
                 provide: AXComponent,
                 useExisting: AXContextMenuComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["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;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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item\n    [name]=\"item.name\"\n    [data]=\"item.data\"\n    [disabled]=\"item.disabled\"\n    [color]=\"item.color\"\n    [subItems]=\"item.items ?? []\"\n  >\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--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;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: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
@@ -748,7 +864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         AXDecoratorIconComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["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;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"] }]
+                    ], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item\n    [name]=\"item.name\"\n    [data]=\"item.data\"\n    [disabled]=\"item.disabled\"\n    [color]=\"item.color\"\n    [subItems]=\"item.items ?? []\"\n  >\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--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;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']]
@@ -806,7 +922,7 @@ class AXMenuComponent extends NXComponent {
                 provide: AXComponent,
                 useExisting: AXMenuComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["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;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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item\n    [name]=\"item.name\"\n    [data]=\"item.data\"\n    [disabled]=\"item.disabled\"\n    [color]=\"item.color\"\n    [subItems]=\"item.items ?? []\"\n  >\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--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;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: ["subItems", "name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
@@ -827,7 +943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         AXDecoratorIconComponent,
                         AsyncPipe,
                         AXTranslatorPipe,
-                    ], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item [name]=\"item.name\" [data]=\"item.data\" [disabled]=\"item.disabled\" [color]=\"item.color\">\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["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;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"] }]
+                    ], template: "<ng-content select=\"ax-menu-item,ax-divider,ax-title,ng-container\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n\n<ng-template #Recursion let-item>\n  @if (item.group?.title) {\n    <ax-title>{{ item.group?.title }}</ax-title>\n  }\n  <ax-menu-item\n    [name]=\"item.name\"\n    [data]=\"item.data\"\n    [disabled]=\"item.disabled\"\n    [color]=\"item.color\"\n    [subItems]=\"item.items ?? []\"\n  >\n    @if (item.icon) {\n      <ax-prefix>\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      </ax-prefix>\n    }\n    @if (item.text) {\n      <ax-text>{{ item.text | translate | async }}</ax-text>\n    }\n    @if (item.suffix) {\n      <ax-suffix>\n        <ax-text>{{ item.suffix.text | translate | async }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ax-menu-item>\n  @if (item.break) {\n    <ax-divider></ax-divider>\n  }\n</ng-template>\n", styles: ["ax-context-menu,ax-menu{--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;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: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']