@acorex/components 18.10.16 → 18.11.1

package/fesm2022/acorex-components-menu.mjs

@@ -1,254 +1,629 @@
+import { NXClickEvent, NXComponent, NXEvent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, input, output, afterNextRender, Component, ViewEncapsulation, ViewChild, ContentChildren, HostBinding, HostListener, NgModule } from '@angular/core';
-import { MXInteractiveComponent, MXBaseComponent } from '@acorex/components/common';
-import * as i1 from '@acorex/components/popover';
-import { AXPopoverComponent, AXPopoverModule } from '@acorex/components/popover';
-import { BehaviorSubject } from 'rxjs';
-import { AXButtonModule } from '@acorex/components/button';
+import { Injectable, signal, inject, Renderer2, computed, output, input, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, HostListener, HostBinding, NgModule } from '@angular/core';
+import { Subject } from 'rxjs';
+import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
+import { cloneDeep } from 'lodash-es';
+import { isBrowser } from '@acorex/core/platform';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXLoadingModule } from '@acorex/components/loading';
+import { AXPopoverModule } from '@acorex/components/popover';
 import { AXTranslationModule } from '@acorex/core/translation';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
 
 class AXRootMenu {
+}
+class AXMenuItemComponentBase {
+}
+class AXMenuItem {
+}
+class AXMenuItemClickBaseEvent extends NXClickEvent {
     constructor() {
-        this.orientation = signal('horizontal');
-        this.openOn = signal('toggle');
+        super(...arguments);
+        this.canceled = false;
     }
 }
 
 class AXMenuService {
     constructor() {
-        this.activeMenus$ = new BehaviorSubject([]);
+        this.closeAll$ = new Subject();
+        this.open$ = new Subject();
+        this.close$ = new Subject();
+        this.closeExcept$ = new Subject();
+        this.openContextMenu$ = new Subject();
+        this.closeAllContextMenu$ = new Subject();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuService, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            type: Injectable
         }] });
 
 /**
  * Represents a menu item component used within an `ax-menu`.
  * @category Components
  */
-class AXMenuItemComponent extends MXInteractiveComponent {
-    /** @ignore */
+class AXMenuItemComponent extends NXComponent {
     constructor() {
         super();
+        this.isOpen = signal(false);
+        this.hasSubItems = signal(false);
+        this.isFirstLevel = signal(false);
+        this.root = inject(AXRootMenu);
         this.service = inject(AXMenuService);
-        /**
-         * Injects the `AXMenuService` for managing menu interactions.
-         */
-        this.menuService = inject(AXMenuService);
-        /**
-         * The vertical offset for positioning, initialized to 0.
-         */
-        this.offsetY = signal(0);
-        /**
-         * The horizontal offset for positioning, initialized to 0.
-         */
-        this.offsetX = signal(0);
-        /**
-         * The text content, initialized to an empty string.
-         */
-        // text = input<string>();
-        /**
-         * Indicates whether the item is active.
-         */
-        this.active = input();
-        /**
-         * Emitted when the active state changes.
-         */
-        this.activeChange = output();
-        /**
-         * Emitted when the element is clicked.
-         */
+        this.scrollableParents = [];
+        this.unsuscriber = inject(AXUnsubscriber);
+        this.renderer = inject(Renderer2);
+        this.arrowIcon = computed(() => {
+            const isRtl = AXHtmlUtil.isRtl(this.nativeElement);
+            return this.root.orientation() == 'horizontal' && this.isFirstLevel() ?
+                "ax-icon-chevron-down" :
+                isRtl ? "ax-icon-chevron-left" : "ax-icon-chevron-right";
+        });
         this.onClick = output();
-        /**
-         * Indicates whether the component is a root menu item.
-         * @defaultValue false
-         */
-        this.isRoot = false;
-        /**
-         * Injects the root menu service.
-         */
-        this.rootMenu = inject(AXRootMenu);
-        this.arrowState = input(true);
+        this.name = input();
+        this.data = input();
+        this.disabled = input();
+        this.color = input();
+        //
         afterNextRender(() => {
-            this.children.forEach((c) => {
-                c.parent = this;
-            });
-            this.offsetY.set(this.isRoot ? 8 : 0);
-            this.offsetX.set(this.isRoot ? 0 : 4);
-            this.getPlacement();
+            this.detectSubItems();
+            this.observeMutations();
+            this.bindScrollEvents();
+        });
+        //
+        this.service.closeAll$
+            .pipe(this.unsuscriber.takeUntilDestroy)
+            .subscribe(() => this.close());
+        this.service.open$
+            .pipe(this.unsuscriber.takeUntilDestroy)
+            .subscribe((item) => {
+            if (this === item) {
+                this.isOpen.set(true);
+                this.calculatePosition();
+            }
+        });
+        //
+        this.service.close$
+            .pipe(this.unsuscriber.takeUntilDestroy)
+            .subscribe(item => {
+            if (this == item) {
+                this.isOpen.set(false);
+            }
+        });
+        //
+        this.service.closeExcept$
+            .pipe(this.unsuscriber.takeUntilDestroy)
+            .subscribe((item) => {
+            this.closeExcept(item);
         });
     }
+    closeExcept(item) {
+        const list = [item];
+        //
+        let parent = item.parent;
+        while (parent != null) {
+            list.push(parent);
+            parent = parent.parent;
+        }
+        //
+        if (!list.includes(this)) {
+            this.close();
+        }
+    }
+    observeMutations() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.detectSubItems();
+        });
+        // Start observing changes in child elements
+        this.mutationObserver.observe(this.nativeElement, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    getText() {
+        return this.nativeElement.querySelector('ax-text')?.innerText;
+    }
     /**
-     * Closes the popover if it is open.
-     */
+      * Manually detect all `ax-menu-item` elements and check if this menu item has sub-items.
+      */
+    detectSubItems() {
+        //
+        const parentEl = this.nativeElement.parentElement?.parentElement;
+        this.parent = parentEl?.tagName == "AX-MENU-ITEM" ? parentEl?.["__axContext__"] : null;
+        //
+        const tag = this.nativeElement.parentElement?.tagName;
+        this.isFirstLevel.set(tag == "AX-MENU" || tag == "AX-CONTEXT-MENU");
+        const subItems = this.nativeElement.querySelectorAll('ax-menu-item');
+        if (subItems.length > 0) {
+            this.hasSubItems.set(true);
+        }
+        else {
+            this.hasSubItems.set(false);
+        }
+    }
+    open() {
+        this.service.closeExcept$.next(this);
+        if (!this.disabled() && this.hasSubItems()) {
+            this.service.open$.next(this);
+        }
+    }
     close() {
-        this.popover?.close();
+        this.service.close$.next(this);
+    }
+    /**
+   * Calculate the position of the submenu to avoid it going out of the viewport.
+   */
+    calculatePosition() {
+        const submenu = this.nativeElement.querySelector('.ax-menu-items');
+        if (!submenu)
+            return;
+        const submenuRect = submenu.getBoundingClientRect();
+        const itemRect = this.nativeElement.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const isRtl = AXHtmlUtil.isRtl(this.nativeElement);
+        let top = null;
+        let left = null;
+        // For first-level menu items
+        if (this.isFirstLevel() && this.root.orientation() === 'horizontal') {
+            top = itemRect.bottom + submenuRect.height > windowHeight
+                ? itemRect.top - submenuRect.height // Open upwards
+                : itemRect.bottom; // Open downwards
+            if (isRtl) {
+                // RTL: Align to the right of the parent item
+                left = itemRect.right - submenuRect.width < 0
+                    ? itemRect.left // Align to the left if not enough space on the right
+                    : itemRect.right - submenuRect.width; // Open to the left in RTL
+            }
+            else {
+                // LTR: Align to the left of the parent item
+                left = itemRect.left + submenuRect.width > windowWidth
+                    ? itemRect.right - submenuRect.width // Align to the right edge in LTR
+                    : itemRect.left; // Open to the left
+            }
+        }
+        else {
+            // For nested submenus
+            if (isRtl) {
+                // RTL: Nested submenu opens to the left
+                left = itemRect.left - submenuRect.width < 0
+                    ? itemRect.right // Align to the right if not enough space on the left
+                    : itemRect.left - submenuRect.width; // Open to the left in RTL
+            }
+            else {
+                // LTR: Nested submenu opens to the right
+                left = itemRect.right + submenuRect.width > windowWidth
+                    ? itemRect.left - submenuRect.width // Open to the left if not enough space
+                    : itemRect.right; // Open to the right in LTR
+            }
+            // Adjust top position (align vertically with parent)
+            top = itemRect.top + submenuRect.height > windowHeight
+                ? itemRect.top - (itemRect.bottom + submenuRect.height - windowHeight) // Adjust upwards
+                : itemRect.top; // Align with the parent item
+        }
+        // Apply calculated styles for RTL/LTR
+        this.renderer.setStyle(submenu, 'left', `${left}px`);
+        this.renderer.setStyle(submenu, 'top', `${top}px`);
+        this.renderer.setStyle(submenu, 'position', 'fixed'); // Fixed position relative to the viewport
+    }
+    handleClick(e) {
+        e.stopPropagation();
+        if (this.disabled())
+            return;
+        //
+        const event = {
+            sender: this,
+            nativeEvent: e,
+            canceled: false,
+            item: {
+                name: this.name(),
+                text: this.getText(),
+                data: this.data()
+            }
+        };
+        //
+        this.onClick.emit(event);
+        this.root.onItemClick.emit({ ...event, ...{ sender: this.root } });
+        //
+        if (this.hasSubItems() && !event.canceled) {
+            this.open();
+        }
+        else if (!event.canceled) {
+            this.service.closeAll$.next();
+            this.service.closeAllContextMenu$.next({ sender: this.root });
+        }
+    }
+    handleMouseEnter(event) {
+        event.stopPropagation();
+        // Cancel the close delay if the mouse re-enters the element
+        if (this.mouseLeaveTimeout) {
+            clearTimeout(this.mouseLeaveTimeout);
+            this.mouseLeaveTimeout = null; // Reset the timeout
+        }
+        if (!this.isFirstLevel() || this.root.openOn() == 'hover') {
+            this.open();
+        }
+    }
+    handleMouseLeave(event) {
+        event.stopPropagation();
+        if (this.hasSubItems() && this.root.closeOn() === 'leave') {
+            // Clear any previous timeout to avoid multiple triggers
+            if (this.mouseLeaveTimeout) {
+                clearTimeout(this.mouseLeaveTimeout);
+            }
+            // Set a delay before closing the submenu
+            this.mouseLeaveTimeout = setTimeout(() => {
+                this.close();
+            }, 500); // Adjust the delay (500ms in this case) as per your requirement
+        }
+    }
+    onWindowEvent() {
+        this.service.closeAll$.next(); // Close all menus on scroll or resize
+    }
+    /**
+     * Close all menus if clicking outside the root menu and all sub-items.
+     */
+    onClickOutside(event) {
+        const hostElement = this.root.nativeElement;
+        if (!hostElement.contains(event.target)) {
+            this.service.closeAll$.next(); // Close all menus if click is outside the root and sub-items
+        }
+    }
+    ngOnDestroy() {
+        this.removeScrollEvents();
+    }
+    bindScrollEvents() {
+        this.scrollableParents = AXHtmlUtil.getScrollableParents(this.nativeElement);
+        this.scrollableParents.forEach((parent) => {
+            parent.addEventListener('scroll', this.onContainerScroll.bind(this));
+        });
+    }
+    // Remove scroll event listeners 
+    removeScrollEvents() {
+        this.scrollableParents.forEach((parent) => {
+            parent.removeEventListener('scroll', this.onContainerScroll.bind(this));
+        });
+    }
+    /**
+     * Handler for scroll events (window or scrollable parent containers)
+     */
+    onContainerScroll() {
+        this.service.closeAll$.next(); // Close all menus on scroll
+    }
+    /** @ignore */
+    get __hostClass() {
+        const list = ['ax-el-interactive', 'ax-action-item'];
+        if (this.disabled()) {
+            list.push('ax-state-disabled');
+        }
+        if (this.color()) {
+            list.push(`ax-el-${this.color()}-blank`);
+        }
+        return list;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "handleMouseEnter($event)", "mouseleave": "handleMouseLeave($event)", "window:scroll": "onWindowEvent($event)", "window:resize": "onWindowEvent($event)", "document:click": "onClickOutside($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+            {
+                provide: AXMenuItemComponentBase,
+                useExisting: AXMenuItemComponent
+            },
+            AXUnsubscriber
+        ], 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()) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} ax-menu-item-child-icon\"></i>\n  }\n</div>\n<div class=\"ax-menu-items ax-action-list ax-action-list-vertical\" [class.ax-state-open]=\"isOpen()\">\n  <ng-content select=\"ax-menu-item,ax-title,ng-container\"></ng-content>\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-menu-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXMenuItemComponentBase,
+                            useExisting: AXMenuItemComponent
+                        },
+                        AXUnsubscriber
+                    ], 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()) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} ax-menu-item-child-icon\"></i>\n  }\n</div>\n<div class=\"ax-menu-items ax-action-list ax-action-list-vertical\" [class.ax-state-open]=\"isOpen()\">\n  <ng-content select=\"ax-menu-item,ax-title,ng-container\"></ng-content>\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { handleClick: [{
+                type: HostListener,
+                args: ["click", ['$event']]
+            }], handleMouseEnter: [{
+                type: HostListener,
+                args: ["mouseenter", ['$event']]
+            }], handleMouseLeave: [{
+                type: HostListener,
+                args: ["mouseleave", ['$event']]
+            }], onWindowEvent: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXContextMenuOpeningEvent extends NXEvent {
+    constructor() {
+        super(...arguments);
+        this.canceled = false;
     }
+}
+/**
+ * Represents a menu component that displays context menu.
+ * @category Components
+ */
+class AXContextMenuComponent extends NXComponent {
+    // Constructor (Dependency Injection)
     /** @ignore */
-    _handleOnOpened() {
-        this.parent.children.forEach((c) => {
-            if (c != this) {
-                c.close();
+    constructor() {
+        super();
+        // Inputs and Outputs
+        this.orientation = input('vertical');
+        this.openOn = input('hover');
+        this.closeOn = input('click');
+        this.orginalItems = input([], { alias: "items" });
+        this.target = input();
+        this.onItemClick = output();
+        this.onOpening = output();
+        // Injected Services
+        this.service = inject(AXMenuService);
+        this.renderer = inject(Renderer2);
+        this.items = signal([]);
+        //
+        afterNextRender(() => {
+            this.bindContextEvent();
+        });
+        this.service.closeAllContextMenu$.subscribe(() => {
+            this.service.closeAll$.next();
+            this.close();
+        });
+        this.service.openContextMenu$.subscribe((e) => {
+            if (e.sender == this) {
+                this.internalShowAt(e.point);
             }
         });
-        if (this.children.length) {
-            this.menuService.activeMenus$.next(this.menuService.activeMenus$.getValue().concat(this));
+    }
+    // Lifecycle Hooks
+    ngOnDestroy() {
+        if (isBrowser()) {
+            this.removeContextEvent();
         }
     }
+    // Public Methods
+    showAt(point) {
+        const sender = this;
+        this.service.closeAllContextMenu$.next({ sender });
+        this.service.openContextMenu$.next({ sender, point });
+    }
+    close() {
+        this.nativeElement.classList.remove('ax-state-open');
+        this.removeBackdrop();
+    }
+    // Private Methods (Internal Logic)
     /** @ignore */
-    _handleOnClosed() {
-        this.children.forEach((c) => {
-            c.close();
+    getTargetElements() {
+        const elements = typeof this.target() == 'string' ?
+            Array.from(document.querySelectorAll(this.target())) :
+            Array.isArray(this.target()) ?
+                this.target() :
+                [this.target()];
+        return elements;
+    }
+    /** @ignore */
+    bindContextEvent() {
+        this.getTargetElements().forEach((e) => {
+            e.addEventListener('contextmenu', this.handleContextMenu.bind(this));
         });
     }
-    /**
-     * Returns the icon based on the orientation of the root menu.
-     */
-    getIcon() {
-        if (this.rootMenu.orientation() === 'vertical') {
-            return 'ax-icon-chevron-right';
+    /** @ignore */
+    removeContextEvent() {
+        this.getTargetElements().forEach((e) => {
+            e.removeEventListener('contextmenu', this.handleContextMenu.bind(this));
+        });
+    }
+    /** @ignore */
+    handleContextMenu(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        //
+        const elementsUnderMouse = document.elementsFromPoint(e.x, e.y);
+        const targetElements = this.getTargetElements();
+        const targetElement = targetElements.find(target => elementsUnderMouse.includes(target));
+        //
+        const event = {
+            sender: this,
+            canceled: false,
+            targetElement: targetElement,
+            items: cloneDeep(this.orginalItems()),
+        };
+        this.onOpening.emit(event);
+        this.items.set(event.items);
+        //
+        if (!event.canceled) {
+            this.showAt({ x: e.clientX, y: e.clientY });
+        }
+    }
+    /** @ignore */
+    internalShowAt(point) {
+        const elementRef = this.nativeElement;
+        elementRef.classList.add('ax-state-open');
+        const itemRect = elementRef.getBoundingClientRect();
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        // Detect RTL (Right-To-Left) mode
+        const isRtl = AXHtmlUtil.isRtl(elementRef);
+        let left;
+        if (isRtl) {
+            left = point.x - itemRect.width;
+            if (left < 0) {
+                left = point.x;
+            }
         }
         else {
-            return 'ax-icon-chevron-down';
+            left = point.x;
+            if (left + itemRect.width > windowWidth) {
+                left = point.x - itemRect.width;
+            }
         }
-    }
-    /**
-     * Determines the placement based on the root menu's orientation: 'bottom-start' for horizontal root, 'end-top' otherwise.
-     */
-    getPlacement() {
-        switch (this.rootMenu.orientation()) {
-            case 'horizontal':
-                if (this.isRoot) {
-                    return 'bottom-start';
-                }
-                else {
-                    return 'end-top';
-                }
-                break;
-            case 'vertical':
-                if (this.isRoot) {
-                    return 'end-top';
-                }
-                else {
-                    return 'end-top';
-                }
-                break;
-            default:
-                return 'bottom-start';
+        const bottom = point.y + itemRect.height;
+        let top;
+        if (bottom > windowHeight) {
+            top = point.y - itemRect.height;
+            if (top < 0) {
+                top = 0;
+            }
+        }
+        else {
+            top = point.y;
         }
+        this.renderer.setStyle(elementRef, 'left', `${left}px`);
+        this.renderer.setStyle(elementRef, 'top', `${top}px`);
+        this.renderer.setStyle(elementRef, 'position', 'fixed');
+        this.createBackdrop();
     }
     /** @ignore */
-    get __hostClass() {
-        return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.active() ? 'ax-state-active' : ''}`];
+    createBackdrop() {
+        this.backdropElement = this.renderer.createElement('div');
+        this.renderer.setStyle(this.backdropElement, 'position', 'fixed');
+        this.renderer.setStyle(this.backdropElement, 'top', '0');
+        this.renderer.setStyle(this.backdropElement, 'left', '0');
+        this.renderer.setStyle(this.backdropElement, 'width', '100%');
+        this.renderer.setStyle(this.backdropElement, 'height', '100%');
+        this.renderer.setStyle(this.backdropElement, 'z-index', '999'); // Ensure it's below the context menu
+        this.renderer.setStyle(this.backdropElement, 'background', 'transparent');
+        const l1 = this.renderer.listen(this.backdropElement, 'click', () => {
+            this.close();
+            l1();
+        });
+        const l2 = this.renderer.listen(this.backdropElement, 'wheel', () => {
+            this.close();
+            l2();
+        });
+        const l3 = this.renderer.listen(this.backdropElement, 'contextmenu', (e) => {
+            this.close();
+            // Get all elements under the mouse pointer
+            const elementsUnderMouse = document.elementsFromPoint(e.x, e.y);
+            const targetElements = this.getTargetElements();
+            if (targetElements.some(target => elementsUnderMouse.includes(target))) {
+                e.preventDefault();
+                setTimeout(() => {
+                    //this.internalShowAt({ x: e.x, y: e.y });
+                    this.handleContextMenu(e);
+                });
+            }
+            l3();
+        });
+        document.body.appendChild(this.backdropElement);
     }
     /** @ignore */
-    __hostClick(e) {
-        if (!this.disabled) {
-            this.onClick.emit({
-                component: this,
-                htmlElement: this.getHostElement(),
-                nativeEvent: e,
-            });
-            if (!this.children.length) {
-                this.menuService.activeMenus$.subscribe((c) => c.forEach((x) => x.close())).unsubscribe();
-                this.menuService.activeMenus$.next([]);
+    removeBackdrop() {
+        if (this.backdropElement) {
+            if (this.backdropElement.parentNode) {
+                this.backdropElement.parentNode.removeChild(this.backdropElement);
             }
+            this.backdropElement = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, arrowState: { classPropertyName: "arrowState", publicName: "arrowState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange", onClick: "onClick" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "click": "__hostClick($event)" }, properties: { "class": "this.__hostClass" } }, queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], viewQueries: [{ propertyName: "popover", first: true, predicate: AXPopoverComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-menu-item-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length && arrowState()) {\n  <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n  #popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"rootMenu.openOn()\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"offsetY()\"\n  [offsetX]=\"offsetX()\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "component", type: i1.AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    // Host Listeners (UI Interaction Handling)
+    /** @ignore */
+    onWindowEvent() {
+        const sender = this;
+        this.service.closeAllContextMenu$.next({ sender: sender }); // Close all menus on scroll or resize
+    }
+    /** @ignore */
+    get __hostClass() {
+        return ['ax-menu-container', `ax-orientation-${this.orientation()}`, 'ax-action-list', 'ax-action-list-vertical'];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: true, isRequired: false, transformFunction: null }, orginalItems: { classPropertyName: "orginalItems", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick", onOpening: "onOpening" }, host: { listeners: { "window:scroll": "onWindowEvent($event)", "window:resize": "onWindowEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+            AXMenuService,
+            {
+                provide: AXRootMenu,
+                useExisting: AXContextMenuComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-title,ng-container\"></ng-content>\n\n<ng-container *ngFor=\"let node of items()\" [ngTemplateOutlet]=\"Recursion\"\n    [ngTemplateOutletContext]=\"{ $implicit: node }\">\n</ng-container>\n<ng-template #Recursion let-item>\n    @if(item.group?.title)\n    {\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        <ax-prefix>\n            @if(item.icon)\n            {\n            <ax-icon [icon]=\"item.icon\">\n            </ax-icon>\n            }\n        </ax-prefix>\n        @if(item.text)\n        {\n        <ax-text>{{ item.text }}</ax-text>\n        }\n        @if(item.suffix)\n        {\n        <ax-suffix>\n            <ax-text>{{ item.suffix.text }}</ax-text>\n        </ax-suffix>\n        }\n        <ng-container *ngFor=\"let child of item.items\" [ngTemplateOutlet]=\"Recursion\"\n            [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    </ax-menu-item>\n    @if(item.break)\n    {\n    <ax-divider></ax-divider>\n    }\n</ng-template>", styles: ["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{padding-block:.5rem;display:flex;opacity:0;visibility:hidden;transition:opacity .3s;width:max-content;min-width:12rem;height:max-content;position:fixed;flex-direction:column;border-radius:0;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-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);border-radius:var(--ax-rounded-border-default);z-index:9999}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-action-list-horizontal{padding-inline:1rem}ax-menu.ax-action-list-horizontal{min-width:12rem;gap:.875rem}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-prefix{color:rgba(var(--ax-color-primary-500))}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-suffix{color:rgba(var(--ax-color-primary-500))}ax-menu.ax-action-list-vertical{width:max-content;min-width:12rem}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu>ax-menu-item{padding-block:.5rem}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{color:rgba(var(--ax-color-primary-500))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu-item', inputs: ['disabled'], host: { ngSkipHydration: 'true' }, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-menu-item-start-side\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"ax-suffix\"></ng-content>\n@if (children.length && arrowState()) {\n  <i class=\"ax-icon ax-icon-solid {{ getIcon() }} ax-menu-item-child-icon\"></i>\n}\n\n<ax-popover\n  #popover\n  [closeOn]=\"'clickOut'\"\n  [openOn]=\"rootMenu.openOn()\"\n  [target]=\"getHostElement()\"\n  [offsetY]=\"offsetY()\"\n  [offsetX]=\"offsetX()\"\n  [placement]=\"getPlacement()\"\n  (onOpened)=\"_handleOnOpened()\"\n  (onClosed)=\"_handleOnClosed()\"\n>\n  <div class=\"ax-menu-item-children ax-parent-{{ this.rootMenu.orientation() }}\">\n    <ng-content select=\"ax-menu-item\"></ng-content>\n  </div>\n</ax-popover>\n" }]
-        }], ctorParameters: () => [], propDecorators: { popover: [{
-                type: ViewChild,
-                args: [AXPopoverComponent]
-            }], children: [{
-                type: ContentChildren,
-                args: [AXMenuItemComponent]
+            args: [{ selector: 'ax-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        AXMenuService,
+                        {
+                            provide: AXRootMenu,
+                            useExisting: AXContextMenuComponent
+                        }
+                    ], template: "<ng-content select=\"ax-menu-item,ax-title,ng-container\"></ng-content>\n\n<ng-container *ngFor=\"let node of items()\" [ngTemplateOutlet]=\"Recursion\"\n    [ngTemplateOutletContext]=\"{ $implicit: node }\">\n</ng-container>\n<ng-template #Recursion let-item>\n    @if(item.group?.title)\n    {\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        <ax-prefix>\n            @if(item.icon)\n            {\n            <ax-icon [icon]=\"item.icon\">\n            </ax-icon>\n            }\n        </ax-prefix>\n        @if(item.text)\n        {\n        <ax-text>{{ item.text }}</ax-text>\n        }\n        @if(item.suffix)\n        {\n        <ax-suffix>\n            <ax-text>{{ item.suffix.text }}</ax-text>\n        </ax-suffix>\n        }\n        <ng-container *ngFor=\"let child of item.items\" [ngTemplateOutlet]=\"Recursion\"\n            [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    </ax-menu-item>\n    @if(item.break)\n    {\n    <ax-divider></ax-divider>\n    }\n</ng-template>", styles: ["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{padding-block:.5rem;display:flex;opacity:0;visibility:hidden;transition:opacity .3s;width:max-content;min-width:12rem;height:max-content;position:fixed;flex-direction:column;border-radius:0;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-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);border-radius:var(--ax-rounded-border-default);z-index:9999}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-action-list-horizontal{padding-inline:1rem}ax-menu.ax-action-list-horizontal{min-width:12rem;gap:.875rem}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-prefix{color:rgba(var(--ax-color-primary-500))}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-suffix{color:rgba(var(--ax-color-primary-500))}ax-menu.ax-action-list-vertical{width:max-content;min-width:12rem}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu>ax-menu-item{padding-block:.5rem}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{color:rgba(var(--ax-color-primary-500))}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onWindowEvent: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
-            }], __hostClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
             }] } });
 
 /**
  * Represents a menu component that displays menu items.
  * @category Components
  */
-class AXMenuComponent extends MXBaseComponent {
+class AXMenuComponent extends NXComponent {
     constructor() {
         super(...arguments);
         this.orientation = input('horizontal');
-        this.openOn = input('toggle');
+        this.openOn = input('hover');
+        this.closeOn = input('leave');
         this.service = inject(AXMenuService);
-    }
-    /** @ignore */
-    ngAfterViewInit() {
-        this.children.forEach((c) => {
-            c.isRoot = true;
-            c.parent = this;
-        });
+        this.onItemClick = output();
+        this.items = input([]);
     }
     /** @ignore */
     get __hostClass() {
-        return `ax-orientation-${this.orientation()}`;
+        return `ax-action-list-${this.orientation()} ax-action-list`;
+    }
+    close() {
+        this.service.closeAll$.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AXMenuComponent, selector: "ax-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXMenuComponent, selector: "ax-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+            AXMenuService,
             {
                 provide: AXRootMenu,
-                useExisting: AXMenuComponent,
-            },
-            {
-                provide: AXMenuService,
-            },
-        ], queries: [{ propertyName: "children", predicate: AXMenuItemComponent }], usesInheritance: true, ngImport: i0, template: ` <ng-content select="ax-menu-item,ng-container"></ng-content>`, isInline: true, styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit;position:relative}ax-menu.ax-orientation-horizontal{display:flex}ax-menu.ax-orientation-horizontal ax-menu-item:not(ax-menu.ax-orientation-horizontal ax-menu-item:last-child){margin-inline-end:1rem}ax-menu.ax-orientation-vertical{display:flex;flex-direction:column}ax-menu.ax-orientation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-orientation-vertical ax-menu-item:not(ax-menu.ax-orientation-vertical ax-menu-item:last-child){margin-bottom:1rem}ax-menu ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;justify-content:space-between;color:rgba(var(--ax-color-text-default))}ax-menu-item .ax-menu-item-text{white-space:nowrap}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item .ax-menu-item-start-side{display:flex;align-items:center;gap:.5rem}ax-menu-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{width:fit-content;line-height:1;font-size:10px}ax-menu-item ax-popover{position:absolute}.ax-menu-item-children{padding-top:.5rem;padding-bottom:.5rem}.ax-menu-item-children:not(.ax-menu-item-children:empty){display:flex;min-width:12rem;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.75}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1 1 0%}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon:before{-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);-o-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scaleY(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+                useExisting: AXMenuComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-menu-item,ax-title,ng-container\"></ng-content>\n\n<ng-container *ngFor=\"let node of items()\" [ngTemplateOutlet]=\"Recursion\"\n    [ngTemplateOutletContext]=\"{ $implicit: node }\">\n</ng-container>\n<ng-template #Recursion let-item>\n    @if(item.group?.title)\n    {\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        <ax-prefix>\n            @if(item.icon)\n            {\n            <ax-icon [icon]=\"item.icon\">\n            </ax-icon>\n            }\n        </ax-prefix>\n        @if(item.text)\n        {\n        <ax-text>{{ item.text }}</ax-text>\n        }\n        @if(item.suffix)\n        {\n        <ax-suffix>\n            <ax-text>{{ item.suffix.text }}</ax-text>\n        </ax-suffix>\n        }\n        <ng-container *ngFor=\"let child of item.items\" [ngTemplateOutlet]=\"Recursion\"\n            [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    </ax-menu-item>\n    @if(item.break)\n    {\n    <ax-divider></ax-divider>\n    }\n</ng-template>", styles: ["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{padding-block:.5rem;display:flex;opacity:0;visibility:hidden;transition:opacity .3s;width:max-content;min-width:12rem;height:max-content;position:fixed;flex-direction:column;border-radius:0;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-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);border-radius:var(--ax-rounded-border-default);z-index:9999}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-action-list-horizontal{padding-inline:1rem}ax-menu.ax-action-list-horizontal{min-width:12rem;gap:.875rem}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-prefix{color:rgba(var(--ax-color-primary-500))}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-suffix{color:rgba(var(--ax-color-primary-500))}ax-menu.ax-action-list-vertical{width:max-content;min-width:12rem}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu>ax-menu-item{padding-block:.5rem}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{color:rgba(var(--ax-color-primary-500))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-sub-title, ax-placeholder, ax-overlay" }, { kind: "component", type: AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-menu', template: ` <ng-content select="ax-menu-item,ng-container"></ng-content>`, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        AXMenuService,
                         {
                             provide: AXRootMenu,
-                            useExisting: AXMenuComponent,
-                        },
-                        {
-                            provide: AXMenuService,
-                        },
-                    ], styles: ["ax-menu{width:100%;font-size:.875rem;line-height:1.25rem;color:inherit;position:relative}ax-menu.ax-orientation-horizontal{display:flex}ax-menu.ax-orientation-horizontal ax-menu-item:not(ax-menu.ax-orientation-horizontal ax-menu-item:last-child){margin-inline-end:1rem}ax-menu.ax-orientation-vertical{display:flex;flex-direction:column}ax-menu.ax-orientation-vertical ax-menu-item{justify-content:space-between}ax-menu.ax-orientation-vertical ax-menu-item:not(ax-menu.ax-orientation-vertical ax-menu-item:last-child){margin-bottom:1rem}ax-menu ax-menu-item:hover:not(ax-menu ax-menu-item:hover.ax-state-disabled){color:rgba(var(--ax-color-primary-500))}ax-menu-item{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;justify-content:space-between;color:rgba(var(--ax-color-text-default))}ax-menu-item .ax-menu-item-text{white-space:nowrap}ax-menu-item:not(ax-menu-item.ax-state-disabled){cursor:pointer}ax-menu-item .ax-menu-item-start-side{display:flex;align-items:center;gap:.5rem}ax-menu-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-menu-item.ax-state-selected{color:rgba(var(--ax-color-primary-500))}ax-menu-item .ax-menu-item-child-icon{width:fit-content;line-height:1;font-size:10px}ax-menu-item ax-popover{position:absolute}.ax-menu-item-children{padding-top:.5rem;padding-bottom:.5rem}.ax-menu-item-children:not(.ax-menu-item-children:empty){display:flex;min-width:12rem;flex-direction:column;border-radius:var(--ax-rounded-border-default);border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item{padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled){background-color:rgba(var(--ax-color-on-surface))}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover:not(.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item:hover.ax-state-disabled) ax-suffix{opacity:1}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-prefix,.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item ax-suffix{opacity:.75}.ax-menu-item-children:not(.ax-menu-item-children:empty) ax-menu-item .ax-menu-item-text{flex:1 1 0%}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}html[dir=rtl] .ax-parent-horizontal .ax-menu-item-child-icon:before{-moz-transform:scale(1,-1);-webkit-transform:scale(1,-1);-o-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scaleY(-1)}.ax-parent-horizontal .ax-menu-item-child-icon{transform:rotate(-90deg)}\n"] }]
-        }], propDecorators: { children: [{
-                type: ContentChildren,
-                args: [AXMenuItemComponent]
-            }], __hostClass: [{
+                            useExisting: AXMenuComponent
+                        }
+                    ], template: "<ng-content select=\"ax-menu-item,ax-title,ng-container\"></ng-content>\n\n<ng-container *ngFor=\"let node of items()\" [ngTemplateOutlet]=\"Recursion\"\n    [ngTemplateOutletContext]=\"{ $implicit: node }\">\n</ng-container>\n<ng-template #Recursion let-item>\n    @if(item.group?.title)\n    {\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        <ax-prefix>\n            @if(item.icon)\n            {\n            <ax-icon [icon]=\"item.icon\">\n            </ax-icon>\n            }\n        </ax-prefix>\n        @if(item.text)\n        {\n        <ax-text>{{ item.text }}</ax-text>\n        }\n        @if(item.suffix)\n        {\n        <ax-suffix>\n            <ax-text>{{ item.suffix.text }}</ax-text>\n        </ax-suffix>\n        }\n        <ng-container *ngFor=\"let child of item.items\" [ngTemplateOutlet]=\"Recursion\"\n            [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    </ax-menu-item>\n    @if(item.break)\n    {\n    <ax-divider></ax-divider>\n    }\n</ng-template>", styles: ["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{padding-block:.5rem;display:flex;opacity:0;visibility:hidden;transition:opacity .3s;width:max-content;min-width:12rem;height:max-content;position:fixed;flex-direction:column;border-radius:0;border-width:1px;border-color:rgba(var(--ax-color-border-default));background-color:rgba(var(--ax-color-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);border-radius:var(--ax-rounded-border-default);z-index:9999}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-action-list-horizontal{padding-inline:1rem}ax-menu.ax-action-list-horizontal{min-width:12rem;gap:.875rem}ax-menu.ax-action-list-horizontal>ax-menu-item{font-weight:500}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-prefix{padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:not(ax-menu.ax-action-list-horizontal>ax-menu-item>.ax-action-item-suffix:empty){padding-inline-end:0!important;margin-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover{background-color:transparent!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-prefix{color:rgba(var(--ax-color-primary-500))}ax-menu.ax-action-list-horizontal>ax-menu-item:hover>.ax-action-item-suffix{color:rgba(var(--ax-color-primary-500))}ax-menu.ax-action-list-vertical{width:max-content;min-width:12rem}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu>ax-menu-item{padding-block:.5rem}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item:hover.ax-state-disabled)>ax-text{color:rgba(var(--ax-color-primary-500))}\n"] }]
+        }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
 
-const COMPONENT = [AXMenuItemComponent, AXMenuComponent];
+const COMPONENT = [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent];
 const MODULES = [AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule];
 class AXMenuModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, declarations: [AXMenuItemComponent, AXMenuComponent], imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule, AXButtonModule], exports: [AXMenuItemComponent, AXMenuComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES, AXButtonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, declarations: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent], imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, OverlayModule, AXPopoverModule], exports: [AXMenuItemComponent, AXMenuComponent, AXContextMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, imports: [CommonModule, MODULES] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENT],
-                    imports: [CommonModule, ...MODULES, AXButtonModule],
+                    imports: [CommonModule, ...MODULES],
                     exports: [...COMPONENT],
                     providers: [],
                 }]
@@ -258,5 +633,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXMenuComponent, AXMenuItemComponent, AXMenuModule, AXMenuService, AXRootMenu };
+export { AXContextMenuComponent, AXContextMenuOpeningEvent, AXMenuComponent, AXMenuItem, AXMenuItemClickBaseEvent, AXMenuItemComponent, AXMenuItemComponentBase, AXMenuModule, AXMenuService, AXRootMenu };
 //# sourceMappingURL=acorex-components-menu.mjs.map