ng-primitives 0.44.0 → 0.45.1

package/fesm2022/ng-primitives-menu.mjs

@@ -1,15 +1,47 @@
+import { createOverlay, injectOverlay } from 'ng-primitives/portal';
+export { injectOverlayContext as injectMenuContext } from 'ng-primitives/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, HostListener, Directive, Injector } from '@angular/core';
-import * as i1$1 from 'ng-primitives/button';
+import { InjectionToken, inject, Injector, ViewContainerRef, input, booleanAttribute, numberAttribute, signal, computed, HostListener, Directive } from '@angular/core';
+import * as i1 from 'ng-primitives/button';
 import { NgpButton } from 'ng-primitives/button';
-import { injectElementRef } from 'ng-primitives/internal';
+import { injectElementRef, provideExitAnimationManager } from 'ng-primitives/internal';
 import * as i2 from 'ng-primitives/roving-focus';
 import { NgpRovingFocusItem, provideRovingFocusGroup, NgpRovingFocusGroup } from 'ng-primitives/roving-focus';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from 'ng-primitives/popover';
-import { injectPopoverTriggerState, NgpPopoverTrigger, NgpPopover } from 'ng-primitives/popover';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
+import * as i1$1 from 'ng-primitives/popover';
+import { NgpPopover } from 'ng-primitives/popover';
 import { Subject } from 'rxjs';
 
+const defaultMenuConfig = {
+    offset: 4,
+    placement: 'bottom-start',
+    flip: true,
+    container: null,
+    scrollBehavior: 'block',
+};
+const NgpMenuConfigToken = new InjectionToken('NgpMenuConfigToken');
+/**
+ * Provide the default Menu configuration
+ * @param config The Menu configuration
+ * @returns The provider
+ */
+function provideMenuConfig(config) {
+    return [
+        {
+            provide: NgpMenuConfigToken,
+            useValue: { ...defaultMenuConfig, ...config },
+        },
+    ];
+}
+/**
+ * Inject the Menu configuration
+ * @returns The global Menu configuration
+ */
+function injectMenuConfig() {
+    return inject(NgpMenuConfigToken, { optional: true }) ?? defaultMenuConfig;
+}
+
 const NgpMenuToken = new InjectionToken('NgpMenuToken');
 /**
  * Inject the Menu directive instance
@@ -24,41 +56,185 @@ function provideMenu(type) {
     return { provide: NgpMenuToken, useExisting: type };
 }
 
+/**
+ * The state token  for the MenuTrigger primitive.
+ */
+const NgpMenuTriggerStateToken = createStateToken('MenuTrigger');
+/**
+ * Provides the MenuTrigger state.
+ */
+const provideMenuTriggerState = createStateProvider(NgpMenuTriggerStateToken);
+/**
+ * Injects the MenuTrigger state.
+ */
+const injectMenuTriggerState = createStateInjector(NgpMenuTriggerStateToken);
+/**
+ * The MenuTrigger state registration function.
+ */
+const menuTriggerState = createState(NgpMenuTriggerStateToken);
+
+/**
+ * The state token  for the SubmenuTrigger primitive.
+ */
+const NgpSubmenuTriggerStateToken = createStateToken('SubmenuTrigger');
+/**
+ * Provides the SubmenuTrigger state.
+ */
+const provideSubmenuTriggerState = createStateProvider(NgpSubmenuTriggerStateToken);
+/**
+ * Injects the SubmenuTrigger state.
+ */
+const injectSubmenuTriggerState = createStateInjector(NgpSubmenuTriggerStateToken);
+/**
+ * The SubmenuTrigger state registration function.
+ */
+const submenuTriggerState = createState(NgpSubmenuTriggerStateToken);
+
 class NgpSubmenuTrigger {
     constructor() {
-        /** Access the popover trigger element. */
+        /**
+         * Access the menu trigger element.
+         */
         this.trigger = injectElementRef();
-        /** Access the popover trigger state */
-        this.popoverTrigger = injectPopoverTriggerState();
+        /**
+         * Access the injector.
+         */
+        this.injector = inject(Injector);
+        /**
+         * Access the view container reference.
+         */
+        this.viewContainerRef = inject(ViewContainerRef);
+        /** Access the menu trigger state */
+        this.menuTrigger = injectMenuTriggerState();
         /** Access the parent menu */
         this.parentMenu = inject(NgpMenuToken, { optional: true });
-        // by default the popover opens below and to the center of the trigger,
+        /**
+         * Access the submenu template ref.
+         */
+        this.menu = input(undefined, {
+            alias: 'ngpSubmenuTrigger',
+        });
+        /**
+         * Define if the trigger should be disabled.
+         * @default false
+         */
+        this.disabled = input(false, {
+            alias: 'ngpMenuTriggerDisabled',
+            transform: booleanAttribute,
+        });
+        /**
+         * Define the placement of the menu relative to the trigger.
+         * @default 'right-start'
+         */
+        this.placement = input('right-start', {
+            alias: 'ngpMenuTriggerPlacement',
+        });
+        /**
+         * Define the offset of the menu relative to the trigger.
+         * @default 0
+         */
+        this.offset = input(0, {
+            alias: 'ngpMenuTriggerOffset',
+            transform: numberAttribute,
+        });
+        /**
+         * Define whether the menu should flip when there is not enough space for the menu.
+         * @default true
+         */
+        this.flip = input(true, {
+            alias: 'ngpMenuTriggerFlip',
+            transform: booleanAttribute,
+        });
+        /**
+         * The overlay that manages the menu
+         * @internal
+         */
+        this.overlay = signal(null);
+        /**
+         * The open state of the menu.
+         * @internal
+         */
+        this.open = computed(() => this.overlay()?.isOpen() ?? false);
+        /**
+         * Access the menu trigger state.
+         */
+        this.state = submenuTriggerState(this);
+        // by default the menu opens below and to the center of the trigger,
         // but as this is a submenu we want to default to opening to the right
         // and to the start
-        this.popoverTrigger().placement.set('right-start');
+        this.menuTrigger().placement.set('right-start');
         this.parentMenu?.closeSubmenus.pipe(takeUntilDestroyed()).subscribe(element => {
             // if the element is not the trigger, we want to close the menu
             if (element === this.trigger.nativeElement) {
                 return;
             }
-            this.closeMenu('mouse');
+            this.hide('mouse');
         });
     }
+    toggle(event) {
+        // if the trigger is disabled then do not toggle the menu
+        if (this.state.disabled()) {
+            return;
+        }
+        // determine the origin of the event, 0 is keyboard, 1 is mouse
+        const origin = event.detail === 0 ? 'keyboard' : 'mouse';
+        // if the menu is open then hide it
+        if (this.open()) {
+            this.hide(origin);
+        }
+        else {
+            this.show();
+        }
+    }
     /**
-     * @internal
+     * Show the menu.
      */
-    openMenu(origin) {
-        // if the menu is already open, we don't want to do anything
-        if (this.popoverTrigger().open()) {
+    show() {
+        // If the trigger is disabled, don't show the menu
+        if (this.state.disabled()) {
             return;
         }
-        this.popoverTrigger().show(origin);
+        // Create the overlay if it doesn't exist yet
+        if (!this.overlay()) {
+            this.createOverlay();
+        }
+        // Show the overlay
+        this.overlay()?.show();
     }
     /**
      * @internal
+     * Hide the menu.
+     */
+    hide(origin = 'program') {
+        // If the trigger is disabled or the menu is not open, do nothing
+        if (this.state.disabled() || !this.open()) {
+            return;
+        }
+        // Hide the overlay
+        this.overlay()?.hide({ origin });
+    }
+    /**
+     * Create the overlay that will contain the menu
      */
-    closeMenu(origin) {
-        this.popoverTrigger().hide(origin);
+    createOverlay() {
+        const menu = this.state.menu();
+        if (!menu) {
+            throw new Error('Menu must be either a TemplateRef or a ComponentType');
+        }
+        // Create config for the overlay
+        const config = {
+            content: menu,
+            triggerElement: this.trigger.nativeElement,
+            injector: this.injector,
+            placement: this.state.placement(),
+            offset: this.state.offset(),
+            flip: this.state.flip(),
+            closeOnOutsideClick: true,
+            closeOnEscape: true,
+            restoreFocus: true,
+            viewContainerRef: this.viewContainerRef,
+        };
+        this.overlay.set(createOverlay(config));
     }
     /**
      * If the user presses the right arrow key, we want to open the submenu
@@ -73,28 +249,29 @@ class NgpSubmenuTrigger {
         const isLeftArrow = event.key === 'ArrowLeft';
         if ((isRightArrow && !isRtl) || (isLeftArrow && isRtl)) {
             event.preventDefault();
-            this.openMenu('keyboard');
+            this.show();
         }
     }
     /**
      * If the user hovers over the trigger, we want to open the submenu
      */
     showSubmenuOnHover() {
-        this.openMenu('mouse');
+        this.show();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSubmenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpSubmenuTrigger, isStandalone: true, selector: "[ngpSubmenuTrigger]", host: { attributes: { "aria-haspopup": "true" }, listeners: { "keydown.ArrowRight": "showSubmenuOnArrow($event)", "keydown.ArrowLeft": "showSubmenuOnArrow($event)", "mouseenter": "showSubmenuOnHover()" } }, exportAs: ["ngpSubmenuTrigger"], hostDirectives: [{ directive: i1.NgpPopoverTrigger, inputs: ["ngpPopoverTrigger", "ngpSubmenuTrigger"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpSubmenuTrigger, isStandalone: true, selector: "[ngpSubmenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "ngpSubmenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpMenuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpMenuTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpMenuTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpMenuTriggerFlip", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "click": "toggle($event)", "keydown.ArrowRight": "showSubmenuOnArrow($event)", "keydown.ArrowLeft": "showSubmenuOnArrow($event)", "mouseenter": "showSubmenuOnHover()" }, properties: { "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"\" : null" } }, providers: [provideSubmenuTriggerState({ inherit: false }), provideExitAnimationManager()], exportAs: ["ngpSubmenuTrigger"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpSubmenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSubmenuTrigger]',
                     exportAs: 'ngpSubmenuTrigger',
-                    hostDirectives: [
-                        { directive: NgpPopoverTrigger, inputs: ['ngpPopoverTrigger:ngpSubmenuTrigger'] },
-                    ],
+                    providers: [provideSubmenuTriggerState({ inherit: false }), provideExitAnimationManager()],
                     host: {
                         'aria-haspopup': 'true',
+                        '[attr.aria-expanded]': 'open() ? "true" : "false"',
+                        '[attr.data-open]': 'open() ? "" : null',
+                        '(click)': 'toggle($event)',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { showSubmenuOnArrow: [{
@@ -147,7 +324,7 @@ class NgpMenuItem {
         if ((isLeftArrow && !isRtl) || (isRightArrow && isRtl)) {
             event.preventDefault();
             if (trigger) {
-                trigger.closeMenu('keyboard');
+                trigger.hide('keyboard');
             }
         }
     }
@@ -158,7 +335,7 @@ class NgpMenuItem {
         this.parentMenu?.closeSubmenus.next(this.elementRef.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpMenuItem, isStandalone: true, selector: "[ngpMenuItem]", host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick($event)", "keydown.ArrowLeft": "handleArrowKey($event)", "keydown.ArrowRight": "handleArrowKey($event)", "mouseenter": "showSubmenuOnHover()" } }, exportAs: ["ngpMenuItem"], hostDirectives: [{ directive: i1$1.NgpButton, inputs: ["disabled", "ngpMenuItemDisabled"] }, { directive: i2.NgpRovingFocusItem }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpMenuItem, isStandalone: true, selector: "[ngpMenuItem]", host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick($event)", "keydown.ArrowLeft": "handleArrowKey($event)", "keydown.ArrowRight": "handleArrowKey($event)", "mouseenter": "showSubmenuOnHover()" } }, exportAs: ["ngpMenuItem"], hostDirectives: [{ directive: i1.NgpButton, inputs: ["disabled", "ngpMenuItemDisabled"] }, { directive: i2.NgpRovingFocusItem }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpMenuItem, decorators: [{
             type: Directive,
@@ -186,60 +363,195 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  */
 class NgpMenuTrigger {
     constructor() {
-        /** Access the popover trigger state */
-        this.state = injectPopoverTriggerState();
-        /** Access any parent menus */
-        this.parentMenu = inject(NgpMenuToken, { optional: true });
-        // by default the popover opens below and to the center of the trigger,
-        // but as this is a menu we want to default to opening below and to the start
-        this.state().placement.set('bottom-start');
-        // for menus we want to default to blocking the scroll behavior
-        this.state().scrollBehavior.set('block');
+        /**
+         * Access the trigger element
+         */
+        this.trigger = injectElementRef();
+        /**
+         * Access the injector.
+         */
+        this.injector = inject(Injector);
+        /**
+         * Access the view container reference.
+         */
+        this.viewContainerRef = inject(ViewContainerRef);
+        /**
+         * Access the global menu configuration.
+         */
+        this.config = injectMenuConfig();
+        /**
+         * Access the menu template ref.
+         */
+        this.menu = input(undefined, {
+            alias: 'ngpMenuTrigger',
+        });
+        /**
+         * Define if the trigger should be disabled.
+         * @default false
+         */
+        this.disabled = input(false, {
+            alias: 'ngpMenuTriggerDisabled',
+            transform: booleanAttribute,
+        });
+        /**
+         * Define the placement of the menu relative to the trigger.
+         * @default 'bottom-start'
+         */
+        this.placement = input(this.config.placement, {
+            alias: 'ngpMenuTriggerPlacement',
+        });
+        /**
+         * Define the offset of the menu relative to the trigger.
+         * @default 0
+         */
+        this.offset = input(this.config.offset, {
+            alias: 'ngpMenuTriggerOffset',
+            transform: numberAttribute,
+        });
+        /**
+         * Define whether the menu should flip when there is not enough space for the menu.
+         * @default true
+         */
+        this.flip = input(this.config.flip, {
+            alias: 'ngpMenuTriggerFlip',
+            transform: booleanAttribute,
+        });
+        /**
+         * Define the container in which the menu should be attached.
+         * @default document.body
+         */
+        this.container = input(this.config.container, {
+            alias: 'ngpMenuTriggerContainer',
+        });
+        /**
+         * Defines how the menu behaves when the window is scrolled.
+         * @default 'block'
+         */
+        this.scrollBehavior = input(this.config.scrollBehavior, {
+            alias: 'ngpMenuTriggerScrollBehavior',
+        });
+        /**
+         * Provide context to the menu. This can be used to pass data to the menu content.
+         */
+        this.context = input(undefined, {
+            alias: 'ngpMenuTriggerContext',
+        });
+        /**
+         * The overlay that manages the menu
+         * @internal
+         */
+        this.overlay = signal(null);
+        /**
+         * The open state of the menu.
+         * @internal
+         */
+        this.open = computed(() => this.overlay()?.isOpen() ?? false);
+        /**
+         * The menu trigger state.
+         */
+        this.state = menuTriggerState(this);
+    }
+    ngOnDestroy() {
+        this.overlay()?.destroy();
+    }
+    toggle(event) {
+        // if the trigger is disabled then do not toggle the menu
+        if (this.state.disabled()) {
+            return;
+        }
+        // determine the origin of the event, 0 is keyboard, 1 is mouse
+        const origin = event.detail === 0 ? 'keyboard' : 'mouse';
+        // if the menu is open then hide it
+        if (this.open()) {
+            this.hide(origin);
+        }
+        else {
+            this.show();
+        }
     }
     /**
-     * Close the menu and any parent menus
+     * Show the menu.
      */
-    closeOnEscape() {
-        this.parentMenu?.closeAllMenus('keyboard');
+    show() {
+        // If the trigger is disabled, don't show the menu
+        if (this.state.disabled()) {
+            return;
+        }
+        // Create the overlay if it doesn't exist yet
+        if (!this.overlay()) {
+            this.createOverlay();
+        }
+        // Show the overlay
+        this.overlay()?.show();
+    }
+    /**
+     * @internal
+     * Hide the menu.
+     */
+    hide(origin = 'program') {
+        // If the trigger is disabled or the menu is not open, do nothing
+        if (this.state.disabled() || !this.open()) {
+            return;
+        }
+        // Hide the overlay
+        this.overlay()?.hide({ origin });
+    }
+    /**
+     * Create the overlay that will contain the menu
+     */
+    createOverlay() {
+        const menu = this.state.menu();
+        if (!menu) {
+            throw new Error('Menu must be either a TemplateRef or a ComponentType');
+        }
+        // Create config for the overlay
+        const config = {
+            content: menu,
+            triggerElement: this.trigger.nativeElement,
+            viewContainerRef: this.viewContainerRef,
+            injector: this.injector,
+            context: this.state.context(),
+            container: this.state.container(),
+            placement: this.state.placement(),
+            offset: this.state.offset(),
+            flip: this.state.flip(),
+            closeOnOutsideClick: true,
+            closeOnEscape: true,
+            restoreFocus: true,
+            scrollBehaviour: this.state.scrollBehavior(),
+        };
+        this.overlay.set(createOverlay(config));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpMenuTrigger, isStandalone: true, selector: "[ngpMenuTrigger]", host: { attributes: { "aria-haspopup": "true" }, listeners: { "document:keydown.escape": "closeOnEscape()" } }, exportAs: ["ngpMenuTrigger"], hostDirectives: [{ directive: i1.NgpPopoverTrigger, inputs: ["ngpPopoverTrigger", "ngpMenuTrigger", "ngpPopoverTriggerDisabled", "ngpMenuTriggerDisabled", "ngpPopoverTriggerPlacement", "ngpMenuTriggerPlacement", "ngpPopoverTriggerOffset", "ngpMenuTriggerOffset", "ngpPopoverTriggerShowDelay", "ngpMenuTriggerShowDelay", "ngpPopoverTriggerHideDelay", "ngpMenuTriggerHideDelay", "ngpPopoverTriggerFlip", "ngpMenuTriggerFlip", "ngpPopoverTriggerContainer", "ngpMenuTriggerContainer", "ngpPopoverTriggerScrollBehavior", "ngpMenuTriggerScrollBehavior"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.11", type: NgpMenuTrigger, isStandalone: true, selector: "[ngpMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "ngpMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpMenuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpMenuTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpMenuTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpMenuTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpMenuTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "ngpMenuTriggerScrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpMenuTriggerContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "click": "toggle($event)" }, properties: { "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"\" : null", "attr.data-placement": "state.placement()" } }, providers: [provideMenuTriggerState({ inherit: false }), provideExitAnimationManager()], exportAs: ["ngpMenuTrigger"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpMenuTrigger]',
                     exportAs: 'ngpMenuTrigger',
-                    hostDirectives: [
-                        {
-                            directive: NgpPopoverTrigger,
-                            inputs: [
-                                'ngpPopoverTrigger:ngpMenuTrigger',
-                                'ngpPopoverTriggerDisabled:ngpMenuTriggerDisabled',
-                                'ngpPopoverTriggerPlacement:ngpMenuTriggerPlacement',
-                                'ngpPopoverTriggerOffset:ngpMenuTriggerOffset',
-                                'ngpPopoverTriggerShowDelay:ngpMenuTriggerShowDelay',
-                                'ngpPopoverTriggerHideDelay:ngpMenuTriggerHideDelay',
-                                'ngpPopoverTriggerFlip:ngpMenuTriggerFlip',
-                                'ngpPopoverTriggerContainer:ngpMenuTriggerContainer',
-                                'ngpPopoverTriggerScrollBehavior:ngpMenuTriggerScrollBehavior',
-                            ],
-                        },
-                    ],
+                    providers: [provideMenuTriggerState({ inherit: false }), provideExitAnimationManager()],
                     host: {
                         'aria-haspopup': 'true',
-                        '(document:keydown.escape)': 'closeOnEscape()',
+                        '[attr.aria-expanded]': 'open() ? "true" : "false"',
+                        '[attr.data-open]': 'open() ? "" : null',
+                        '[attr.data-placement]': 'state.placement()',
+                        '(click)': 'toggle($event)',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * The `NgpMenu` is a container for menu items.
  */
 class NgpMenu {
     constructor() {
-        /** Access the popover trigger state */
-        this.popover = injectPopoverTriggerState();
+        /**
+         * Access the overlay.
+         */
+        this.overlay = injectOverlay();
+        /** Access the menu trigger state */
+        this.menuTrigger = injectMenuTriggerState();
         /** Access any parent menus */
         this.parentMenu = inject(NgpMenuToken, { optional: true, skipSelf: true });
         /** @internal Whether we should close submenus */
@@ -247,15 +559,15 @@ class NgpMenu {
     }
     /** Close the menu and any parent menus */
     closeAllMenus(origin) {
-        this.popover().hide(origin);
+        this.menuTrigger().hide(origin);
         this.parentMenu?.closeAllMenus(origin);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpMenu, isStandalone: true, selector: "[ngpMenu]", providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.11", type: NgpMenu, isStandalone: true, selector: "[ngpMenu]", host: { attributes: { "role": "menu" }, properties: { "style.left.px": "overlay.position().x", "style.top.px": "overlay.position().y", "style.--ngp-menu-trigger-width.px": "overlay.triggerWidth()", "style.--ngp-menu-transform-origin": "overlay.transformOrigin()" } }, providers: [
             // ensure we don't inherit the focus group from the parent menu if there is one
             provideRovingFocusGroup(NgpRovingFocusGroup, { inherit: false }),
             provideMenu(NgpMenu),
-        ], exportAs: ["ngpMenu"], hostDirectives: [{ directive: i1.NgpPopover }, { directive: i2.NgpRovingFocusGroup }], ngImport: i0 }); }
+        ], exportAs: ["ngpMenu"], hostDirectives: [{ directive: i1$1.NgpPopover }, { directive: i2.NgpRovingFocusGroup }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: NgpMenu, decorators: [{
             type: Directive,
@@ -268,6 +580,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                         provideRovingFocusGroup(NgpRovingFocusGroup, { inherit: false }),
                         provideMenu(NgpMenu),
                     ],
+                    host: {
+                        role: 'menu',
+                        '[style.left.px]': 'overlay.position().x',
+                        '[style.top.px]': 'overlay.position().y',
+                        '[style.--ngp-menu-trigger-width.px]': 'overlay.triggerWidth()',
+                        '[style.--ngp-menu-transform-origin]': 'overlay.transformOrigin()',
+                    },
                 }]
         }] });
 
@@ -275,5 +594,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NgpMenu, NgpMenuItem, NgpMenuToken, NgpMenuTrigger, NgpSubmenuTrigger, injectMenu };
+export { NgpMenu, NgpMenuItem, NgpMenuToken, NgpMenuTrigger, NgpSubmenuTrigger, injectMenu, injectMenuTriggerState, injectSubmenuTriggerState, provideMenuConfig, provideMenuTriggerState, provideSubmenuTriggerState };
 //# sourceMappingURL=ng-primitives-menu.mjs.map