@acorex/components 21.0.2-next.43 → 21.0.2-next.45

package/fesm2022/acorex-components-menu.mjs

@@ -2,11 +2,11 @@ import { NXClickEvent, NXComponent, AXComponent, NXEvent } from '@acorex/cdk/com
 import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
 import { isBrowser } from '@acorex/core/platform';
 import { AXTranslatorPipe } from '@acorex/core/translation';
-import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
+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 { Injectable, signal, inject, Renderer2, Injector, computed, output, input, afterNextRender, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component, DOCUMENT, PLATFORM_ID, DestroyRef, NgModule } 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, NavigationStart } from '@angular/router';
 import { filter } from 'rxjs/operators';
@@ -18,16 +18,81 @@ class AXMenuService {
         this.closeAll$ = new Subject();
         this.open$ = new Subject();
         this.close$ = new Subject();
-        this.closeExcept$ = new Subject();
         this.openContextMenu$ = new Subject();
         this.closeAllContextMenu$ = new Subject();
+        this.destroyRef = inject(DestroyRef);
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
+        this.openItems = new Set();
+        this.globalListenersBound = false;
+        this.scrollableParents = [];
+        this.onDocumentClick = (event) => {
+            if (this.rootElement && !this.rootElement.contains(event.target)) {
+                this.closeAll$.next();
+            }
+        };
+        this.onWindowOrScrollEvent = () => {
+            this.closeAll$.next();
+        };
+        this.closeAll$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.openItems.clear();
+        });
+    }
+    /**
+     * Registers a single set of document/window/scroll listeners for the whole menu tree.
+     */
+    initGlobalListeners(rootElement) {
+        if (!isPlatformBrowser(this.platformId) || this.globalListenersBound) {
+            return;
+        }
+        this.globalListenersBound = true;
+        this.rootElement = rootElement;
+        this.document.addEventListener('click', this.onDocumentClick);
+        window.addEventListener('scroll', this.onWindowOrScrollEvent, { capture: true });
+        window.addEventListener('resize', this.onWindowOrScrollEvent);
+        this.scrollableParents = AXHtmlUtil.getScrollableParents(rootElement);
+        this.scrollableParents.forEach((parent) => {
+            parent.addEventListener('scroll', this.onWindowOrScrollEvent);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.document.removeEventListener('click', this.onDocumentClick);
+            window.removeEventListener('scroll', this.onWindowOrScrollEvent, { capture: true });
+            window.removeEventListener('resize', this.onWindowOrScrollEvent);
+            this.scrollableParents.forEach((parent) => {
+                parent.removeEventListener('scroll', this.onWindowOrScrollEvent);
+            });
+        });
+    }
+    /**
+     * Closes open submenus that are not on the ancestor path of the item being opened.
+     */
+    closeExcept(opener) {
+        const keepOpen = new Set();
+        let current = opener;
+        while (current) {
+            keepOpen.add(current);
+            current = current.parent;
+        }
+        for (const openItem of [...this.openItems]) {
+            if (!keepOpen.has(openItem)) {
+                this.markClosed(openItem);
+            }
+        }
+    }
+    markOpen(item) {
+        this.openItems.add(item);
+        this.open$.next(item);
+    }
+    markClosed(item) {
+        this.openItems.delete(item);
+        this.close$.next(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 class AXRootMenu {
 }
@@ -48,12 +113,14 @@ class AXMenuItemComponent extends NXComponent {
     constructor() {
         super();
         this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.hasSubItems = signal(false, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : /* istanbul ignore next */ []));
-        this.isFirstLevel = signal(false, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : /* istanbul ignore next */ []));
+        this.submenuRendered = signal(false, ...(ngDevMode ? [{ debugName: "submenuRendered" }] : /* istanbul ignore next */ []));
+        this.parent = inject(AXMenuItemComponent, { optional: true, skipSelf: true });
+        this.isRoot = computed(() => this.parent == null, ...(ngDevMode ? [{ debugName: "isRoot" }] : /* istanbul ignore next */ []));
+        this.isFirstLevel = computed(() => this.parent == null, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : /* istanbul ignore next */ []));
+        this.childMenuItems = contentChildren(AXMenuItemComponent, { ...(ngDevMode ? { debugName: "childMenuItems" } : /* istanbul ignore next */ {}), descendants: false });
+        this.hasSubItems = computed(() => this.childMenuItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSubItems" }] : /* istanbul ignore next */ []));
         this.root = inject(AXRootMenu);
-        this.isRoot = () => this.parent == null;
         this.service = inject(AXMenuService);
-        this.scrollableParents = [];
         this.unsuscriber = inject(AXUnsubscriber);
         this.renderer = inject(Renderer2);
         this.injector = inject(Injector);
@@ -72,13 +139,7 @@ class AXMenuItemComponent extends NXComponent {
         this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
         this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
-        //
-        afterNextRender(() => {
-            this.detectSubItems();
-            this.observeMutations();
-            this.bindScrollEvents();
-        });
-        //
+        this.mouseLeaveTimeout = null;
         this.service.closeAll$.pipe(this.unsuscriber.takeUntilDestroy).subscribe(() => this.close());
         this.service.open$.pipe(this.unsuscriber.takeUntilDestroy).subscribe((item) => {
             if (this === item) {
@@ -86,89 +147,34 @@ class AXMenuItemComponent extends NXComponent {
                 this.schedulePositionCalculation();
             }
         });
-        //
         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];
-        // TODO: Check for better solution
-        const parentEl = this.nativeElement.parentElement?.parentElement;
-        this.parent = parentEl?.tagName == 'AX-MENU-ITEM' ? parentEl?.['__axContext__'] : null;
-        //
-        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;
     }
-    /**
-     * 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);
-        }
-    }
     /**
      * Opens the submenu of this menu item if it has sub-items and is not disabled.
-     *
-     * Inherited behavior: Uses the injected service to notify other items to close.
-     *
-     * @returns void - No return value. Triggers submenu opening side-effects.
      */
     open() {
-        this.service.closeExcept$.next(this);
-        if (!this.disabled() && this.hasSubItems()) {
-            // Acquire z-index token for this submenu
-            if (!this.zToken) {
-                this.zToken = this.zIndexService.acquire();
-            }
-            this.service.open$.next(this);
+        if (this.disabled() || !this.hasSubItems()) {
+            return;
         }
+        this.submenuRendered.set(true);
+        this.service.closeExcept(this);
+        if (!this.zToken) {
+            this.zToken = this.zIndexService.acquire();
+        }
+        this.service.markOpen(this);
     }
     /**
      * Closes the submenu of this menu item if open.
-     *
-     * @returns void - No return value. Triggers submenu closing side-effects.
      */
     close() {
-        this.service.close$.next(this);
-        // Release z-index token
+        this.service.markClosed(this);
         this.zIndexService.release(this.zToken);
         this.zToken = null;
     }
@@ -176,10 +182,14 @@ class AXMenuItemComponent extends NXComponent {
      * Positions the submenu after layout so nested levels measure their full height.
      */
     schedulePositionCalculation() {
-        this.calculatePosition();
         afterNextRender(() => {
             if (this.isOpen()) {
                 this.calculatePosition();
+                afterNextRender(() => {
+                    if (this.isOpen()) {
+                        this.calculatePosition();
+                    }
+                }, { injector: this.injector });
             }
         }, { injector: this.injector });
     }
@@ -197,11 +207,10 @@ class AXMenuItemComponent extends NXComponent {
         const isRtl = AXHtmlUtil.isRtl(this.nativeElement);
         let finalTop;
         let finalLeft;
-        // --- 1. VERTICAL POSITIONING ---
         const preferredTop = this.isFirstLevel() && this.root.orientation() === 'horizontal'
-            ? itemRect.bottom // For horizontal menu, open below
-            : itemRect.top; // For vertical menu, align with parent top
-        const alternateTop = itemRect.top - submenuRect.height; // Position for opening upwards
+            ? itemRect.bottom
+            : itemRect.top;
+        const alternateTop = itemRect.top - submenuRect.height;
         if (preferredTop + submenuRect.height <= windowHeight) {
             finalTop = preferredTop;
         }
@@ -212,7 +221,6 @@ class AXMenuItemComponent extends NXComponent {
             finalTop = windowHeight - submenuRect.height;
         }
         finalTop = this.clampVerticalPosition(finalTop, submenuRect.height, windowHeight);
-        // --- 2. HORIZONTAL POSITIONING ---
         if (this.isFirstLevel() && this.root.orientation() === 'horizontal') {
             const preferredLeft = isRtl ? itemRect.right - submenuRect.width : itemRect.left;
             const alternateLeft = isRtl ? itemRect.left : itemRect.right - submenuRect.width;
@@ -251,7 +259,6 @@ class AXMenuItemComponent extends NXComponent {
                 }
             }
         }
-        // --- 3. OVERLAP-AWARE VERTICAL SHIFT ---
         const isNestedMenu = !(this.isFirstLevel() && this.root.orientation() === 'horizontal');
         if (isNestedMenu) {
             const overlapsParent = finalLeft < itemRect.right && itemRect.left < finalLeft + submenuRect.width;
@@ -263,11 +270,9 @@ class AXMenuItemComponent extends NXComponent {
             }
         }
         finalTop = this.clampVerticalPosition(finalTop, submenuRect.height, windowHeight);
-        // --- 4. APPLY FINAL STYLES ---
         this.renderer.setStyle(submenu, 'position', 'fixed');
         this.renderer.setStyle(submenu, 'top', `${finalTop}px`);
         this.renderer.setStyle(submenu, 'left', `${finalLeft}px`);
-        // Apply z-index from token
         if (this.zToken) {
             this.renderer.setStyle(submenu, 'z-index', String(this.zToken.zIndex));
         }
@@ -295,7 +300,6 @@ class AXMenuItemComponent extends NXComponent {
         e.stopPropagation();
         if (this.disabled())
             return;
-        //
         const event = {
             sender: this,
             nativeEvent: e,
@@ -306,10 +310,8 @@ class AXMenuItemComponent extends NXComponent {
                 data: this.data(),
             },
         };
-        //
         this.onClick.emit(event);
         this.root.onItemClick.emit({ ...event, ...{ sender: this.root } });
-        //
         if (this.hasSubItems() && !event.canceled) {
             this.open();
         }
@@ -320,10 +322,9 @@ class AXMenuItemComponent extends NXComponent {
     }
     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
+            this.mouseLeaveTimeout = null;
         }
         if (!this.isFirstLevel() || this.root.openOn() == 'hover') {
             this.open();
@@ -332,48 +333,18 @@ class AXMenuItemComponent extends NXComponent {
     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
+            }, 500);
         }
     }
     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
+        if (this.isOpen()) {
+            this.close();
+        }
     }
     /** @ignore */
     get __hostClass() {
@@ -385,7 +356,7 @@ class AXMenuItemComponent extends NXComponent {
         return list;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMenuItemComponent, isStandalone: true, selector: "ax-menu-item", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, host: { listeners: { "click": "handleClick($event)", "mouseenter": "handleMouseEnter($event)", "mouseleave": "handleMouseLeave($event)", "window:scroll": "onWindowEvent()", "window:resize": "onWindowEvent()", "document:click": "onClickOutside($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: [
             {
                 provide: AXMenuItemComponentBase,
                 useExisting: AXMenuItemComponent,
@@ -395,7 +366,7 @@ class AXMenuItemComponent extends NXComponent {
                 provide: AXComponent,
                 useExisting: AXMenuItemComponent,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-action-item-prefix\">\n  <ng-content select=\"ax-prefix\"></ng-content>\n  <ng-content select=\"ax-text\"></ng-content>\n</div>\n<div class=\"ax-action-item-suffix\">\n  <ng-content select=\"ax-suffix\"></ng-content>\n  @if (hasSubItems() && (!isRoot() || root?.hasArrow())) {\n    <i class=\"ax-icon ax-icon-solid {{ arrowIcon() }} \"></i>\n  }\n</div>\n<div class=\"ax-menu-items ax-action-list ax-action-list-vertical\" [class.ax-state-open]=\"isOpen()\">\n  <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container\"></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuItemComponent, decorators: [{
             type: Component,
@@ -409,8 +380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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  <ng-content select=\"ax-menu-item,ax-title,ax-divider,ng-container\"></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], handleClick: [{
+                    ], 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" }]
+        }], ctorParameters: () => [], propDecorators: { childMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXMenuItemComponent), { ...{ descendants: false }, isSignal: true }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], handleClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }], handleMouseEnter: [{
@@ -419,15 +390,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }], handleMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave', ['$event']]
-            }], onWindowEvent: [{
-                type: HostListener,
-                args: ['window:scroll']
-            }, {
-                type: HostListener,
-                args: ['window:resize']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -478,6 +440,7 @@ class AXContextMenuComponent extends NXComponent {
         //
         afterNextRender(() => {
             this.bindContextEvent();
+            this.service.initGlobalListeners(this.nativeElement);
         });
         this.setupCloseOnRouteChange();
         this.service.closeAllContextMenu$.subscribe(() => {
@@ -803,7 +766,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class AXMenuComponent extends NXComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
         this.openOn = input('hover', ...(ngDevMode ? [{ debugName: "openOn" }] : /* istanbul ignore next */ []));
         this.closeOn = input('leave', ...(ngDevMode ? [{ debugName: "closeOn" }] : /* istanbul ignore next */ []));
@@ -811,6 +774,9 @@ class AXMenuComponent extends NXComponent {
         this.onItemClick = output();
         this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.hasArrow = input(true, ...(ngDevMode ? [{ debugName: "hasArrow" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.service.initGlobalListeners(this.nativeElement);
+        });
     }
     /** @ignore */
     get __hostClass() {
@@ -829,7 +795,7 @@ class AXMenuComponent extends NXComponent {
     close() {
         this.service.closeAll$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMenuComponent, isStandalone: true, selector: "ax-menu", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, openOn: { classPropertyName: "openOn", publicName: "openOn", isSignal: true, isRequired: false, transformFunction: null }, closeOn: { classPropertyName: "closeOn", publicName: "closeOn", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, hasArrow: { classPropertyName: "hasArrow", publicName: "hasArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             AXMenuService,
             {
@@ -862,7 +828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         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{width:max-content;color:inherit;display:flex}:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items{visibility:hidden;width:max-content;height:max-content;min-width:calc(var(--spacing,.25rem) * 48);border-radius:var(--radius-default,var(--ax-sys-border-radius));border-style:solid;border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)));padding-block:calc(var(--spacing,.25rem) * 2);opacity:0;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);flex-direction:column;display:flex;position:fixed;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items).ax-state-open{visibility:visible;opacity:1}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled){background-color:var(--ax-comp-bg);color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item:hover:not(.ax-state-disabled) ax-suffix ax-text{color:var(--ax-comp-bg)}:is(:is(ax-context-menu,ax-menu).ax-menu-container,:is(ax-context-menu,ax-menu) .ax-menu-items) ax-menu-item ax-suffix ax-text{font-weight:400!important}ax-context-menu.ax-action-list-horizontal{padding-inline:calc(var(--spacing,.25rem) * 4)}ax-menu>ax-menu-item:has(>.ax-action-item-suffix:not(:empty)){gap:calc(var(--spacing,.25rem) * 2)}ax-menu.ax-action-list-horizontal{min-width:calc(var(--spacing,.25rem) * 48);gap:calc(var(--spacing,.25rem) * 5)}ax-menu.ax-action-list-horizontal>ax-title{display:none}ax-menu.ax-action-list-horizontal>ax-menu-item{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){margin-inline-end:0!important;padding-inline-start:0!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-horizontal>ax-menu-item:hover:not(ax-menu.ax-action-list-horizontal>ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu.ax-action-list-vertical{width:max-content;min-width:calc(var(--spacing,.25rem) * 48)}ax-menu.ax-action-list-vertical>ax-menu-item{font-weight:500}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled){background-color:#0000!important}ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled)>.ax-action-item-prefix,ax-menu.ax-action-list-vertical>ax-menu-item:hover:not(ax-menu.ax-action-list-vertical>ax-menu-item.ax-state-disabled)>.ax-action-item-suffix{opacity:.7}ax-menu>ax-menu-item{padding-block:calc(var(--spacing,.25rem) * 2)}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled){border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled)>ax-icon,ax-menu>ax-menu-item:hover:not(ax-menu>ax-menu-item.ax-state-disabled)>ax-text{opacity:.7}\n"] }]
-        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], closeOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOn", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], hasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasArrow", required: false }] }], __hostClass: [{
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], openOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOn", required: false }] }], closeOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOn", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], hasArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasArrow", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });