ng-primitives 0.93.0 → 0.94.0

package/fesm2022/ng-primitives-menu.mjs

@@ -1,16 +1,14 @@
-import { coerceOffset, createOverlay, injectOverlay } from 'ng-primitives/portal';
+import { createOverlay, injectOverlay, coerceOffset } from 'ng-primitives/portal';
 export { injectOverlayContext as injectMenuContext } from 'ng-primitives/portal';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, ViewContainerRef, input, booleanAttribute, signal, computed, HostListener, Directive } from '@angular/core';
+import { InjectionToken, inject, Injector, ViewContainerRef, signal, computed, input, booleanAttribute, Directive } from '@angular/core';
+import { ngpRovingFocusItem, provideRovingFocusItemState, ngpRovingFocusGroup, provideRovingFocusGroupState } from 'ng-primitives/roving-focus';
 import { ngpButton } from 'ng-primitives/button';
 import { injectElementRef } from 'ng-primitives/internal';
-import * as i1 from 'ng-primitives/roving-focus';
-import { NgpRovingFocusItem, provideRovingFocusGroup, NgpRovingFocusGroup } from 'ng-primitives/roving-focus';
-import { safeTakeUntilDestroyed } from 'ng-primitives/utils';
-import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
-import * as i2 from 'ng-primitives/focus-trap';
-import { NgpFocusTrap } from 'ng-primitives/focus-trap';
+import { createPrimitive, attrBinding, dataBinding, listener, styleBinding } from 'ng-primitives/state';
 import { Subject } from 'rxjs';
+import { safeTakeUntilDestroyed } from 'ng-primitives/utils';
+import { ngpFocusTrap, provideFocusTrapState } from 'ng-primitives/focus-trap';
 
 const defaultMenuConfig = {
     offset: 4,
@@ -41,53 +39,227 @@ function injectMenuConfig() {
     return inject(NgpMenuConfigToken, { optional: true }) ?? defaultMenuConfig;
 }
 
-const NgpMenuToken = new InjectionToken('NgpMenuToken');
-/**
- * Inject the Menu directive instance
- */
-function injectMenu() {
-    return inject(NgpMenuToken);
-}
-/**
- * Provide the Menu directive instance
- */
-function provideMenu(type) {
-    return { provide: NgpMenuToken, useExisting: type };
-}
+const [NgpMenuTriggerStateToken, ngpMenuTrigger, injectMenuTriggerState, provideMenuTriggerState,] = createPrimitive('NgpMenuTrigger', ({ disabled, menu, placement = signal('bottom-start'), offset = signal(4), flip = signal(true), container, scrollBehavior, context, }) => {
+    const element = injectElementRef();
+    const injector = inject(Injector);
+    const viewContainerRef = inject(ViewContainerRef);
+    const overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
+    const open = computed(() => overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    // Host bindings
+    attrBinding(element, 'aria-haspopup', 'true');
+    attrBinding(element, 'aria-expanded', open);
+    dataBinding(element, 'data-open', open);
+    dataBinding(element, 'data-placement', placement);
+    // Event listeners
+    listener(element, 'click', onClick);
+    // Methods
+    function onClick(event) {
+        if (disabled?.()) {
+            return;
+        }
+        toggle(event);
+    }
+    function toggle(event) {
+        // 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 (open()) {
+            hide(origin);
+        }
+        else {
+            show();
+        }
+    }
+    function show() {
+        // Create the overlay if it doesn't exist yet
+        if (!overlay()) {
+            createOverlayInstance();
+        }
+        // Show the overlay
+        overlay()?.show();
+    }
+    function hide(origin = 'program') {
+        // If the trigger is disabled or the menu is not open, do nothing
+        if (!open()) {
+            return;
+        }
+        // Hide the overlay
+        overlay()?.hide({ origin });
+    }
+    function createOverlayInstance() {
+        const menuContent = menu?.();
+        if (!menuContent) {
+            throw new Error('Menu must be either a TemplateRef or a ComponentType');
+        }
+        // Create config for the overlay
+        const config = {
+            content: menuContent,
+            triggerElement: element.nativeElement,
+            viewContainerRef,
+            injector,
+            context,
+            container: container?.(),
+            placement: placement,
+            offset: offset(),
+            flip: flip(),
+            closeOnOutsideClick: true,
+            closeOnEscape: true,
+            restoreFocus: true,
+            scrollBehaviour: scrollBehavior?.() ?? 'block',
+        };
+        overlay.set(createOverlay(config));
+    }
+    return {
+        placement,
+        show,
+        hide,
+        toggle,
+    };
+});
 
-/**
- * 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);
+const [NgpMenuStateToken, ngpMenu, injectMenuState, provideMenuState] = createPrimitive('NgpMenu', ({}) => {
+    const element = injectElementRef();
+    const overlay = injectOverlay();
+    const menuTrigger = injectMenuTriggerState();
+    const parentMenu = injectMenuState({ optional: true, skipSelf: true });
+    // Host bindings
+    attrBinding(element, 'role', 'menu');
+    attrBinding(element, 'data-placement', overlay.finalPlacement);
+    attrBinding(element, 'data-overlay', '');
+    styleBinding(element, 'left.px', () => overlay.position().x ?? null);
+    styleBinding(element, 'top.px', () => overlay.position().y ?? null);
+    styleBinding(element, '--ngp-menu-trigger-width.px', overlay.triggerWidth);
+    styleBinding(element, '--ngp-menu-transform-origin', overlay.transformOrigin);
+    // Subject to notify children to close submenus
+    const closeSubmenus = new Subject();
+    // Methods
+    function closeAllMenus(origin) {
+        menuTrigger().hide(origin);
+        parentMenu()?.closeAllMenus(origin);
+    }
+    return {
+        closeAllMenus,
+        closeSubmenus,
+    };
+});
+
+const [NgpSubmenuTriggerStateToken, ngpSubmenuTrigger, injectSubmenuTriggerState, provideSubmenuTriggerState,] = createPrimitive('NgpSubmenuTrigger', ({ disabled = signal(false), menu, placement = signal('right-start'), offset = signal(0), flip = signal(true), }) => {
+    const element = injectElementRef();
+    const injector = inject(Injector);
+    const viewContainerRef = inject(ViewContainerRef);
+    const parentMenu = injectMenuState({ optional: true });
+    const overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
+    const open = computed(() => overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    // Subscribe to parent menu's closeSubmenus
+    parentMenu()
+        ?.closeSubmenus.pipe(safeTakeUntilDestroyed())
+        .subscribe(submenuElement => {
+        // if the element is not the trigger, we want to close the menu
+        if (submenuElement === element.nativeElement) {
+            return;
+        }
+        hide('mouse');
+    });
+    // Host bindings
+    attrBinding(element, 'aria-haspopup', 'true');
+    attrBinding(element, 'aria-expanded', open);
+    dataBinding(element, 'data-open', open);
+    // Event listeners
+    listener(element, 'click', onClick);
+    listener(element, 'keydown', handleArrowKey);
+    listener(element, 'pointerenter', showSubmenuOnHover);
+    // Methods
+    function onClick(event) {
+        if (disabled?.()) {
+            return;
+        }
+        toggle(event);
+    }
+    function toggle(event) {
+        // 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 (open()) {
+            hide(origin);
+        }
+        else {
+            show();
+        }
+    }
+    function show() {
+        // If the trigger is disabled, don't show the menu
+        if (disabled?.()) {
+            return;
+        }
+        // Create the overlay if it doesn't exist yet
+        if (!overlay()) {
+            createOverlayInstance();
+        }
+        // Show the overlay
+        overlay()?.show();
+    }
+    function hide(origin = 'program') {
+        // If the trigger is disabled or the menu is not open, do nothing
+        if (disabled?.() || !open()) {
+            return;
+        }
+        // Hide the overlay
+        overlay()?.hide({ origin });
+    }
+    function createOverlayInstance() {
+        const menuContent = menu?.();
+        if (!menuContent) {
+            throw new Error('Menu must be either a TemplateRef or a ComponentType');
+        }
+        // Create config for the overlay
+        const config = {
+            content: menuContent,
+            triggerElement: element.nativeElement,
+            injector,
+            placement,
+            offset: offset(),
+            flip: flip(),
+            closeOnOutsideClick: true,
+            closeOnEscape: true,
+            restoreFocus: true,
+            viewContainerRef,
+        };
+        overlay.set(createOverlay(config));
+    }
+    function handleArrowKey(event) {
+        if (event instanceof KeyboardEvent === false) {
+            return;
+        }
+        const direction = getComputedStyle(element.nativeElement).direction;
+        const isRtl = direction === 'rtl';
+        const isRightArrow = event.key === 'ArrowRight';
+        const isLeftArrow = event.key === 'ArrowLeft';
+        if ((isRightArrow && !isRtl) || (isLeftArrow && isRtl)) {
+            event.preventDefault();
+            show();
+        }
+    }
+    function showSubmenuOnHover(event) {
+        if (event instanceof PointerEvent === false) {
+            return;
+        }
+        // if this was triggered by a touch event, we don't want to show the submenu
+        // as it will be shown by the click event - this prevents the submenu from being toggled
+        if (event.pointerType === 'touch') {
+            return;
+        }
+        show();
+    }
+    return {
+        placement,
+        show,
+        hide,
+        toggle,
+    };
+});
 
 class NgpSubmenuTrigger {
     constructor() {
-        /**
-         * Access the menu trigger element.
-         */
-        this.trigger = injectElementRef();
-        /**
-         * Access the injector.
-         */
-        this.injector = inject(Injector);
-        /**
-         * Access the view container reference.
-         */
-        this.viewContainerRef = inject(ViewContainerRef);
-        /** Access the parent menu */
-        this.parentMenu = inject(NgpMenuToken, { optional: true });
         /**
          * Access the submenu template ref.
          */
@@ -129,194 +301,79 @@ class NgpSubmenuTrigger {
                 alias: 'ngpSubmenuTriggerFlip',
                 transform: booleanAttribute,
             }]));
-        /**
-         * The overlay that manages the menu
-         * @internal
-         */
-        this.overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
-        /**
-         * The open state of the menu.
-         * @internal
-         */
-        this.open = computed(() => this.overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
         /**
          * Access the menu trigger state.
          */
-        this.state = submenuTriggerState(this);
-        this.parentMenu?.closeSubmenus.pipe(safeTakeUntilDestroyed()).subscribe(element => {
-            // if the element is not the trigger, we want to close the menu
-            if (element === this.trigger.nativeElement) {
-                return;
-            }
-            this.hide('mouse');
+        this.state = ngpSubmenuTrigger({
+            disabled: this.disabled,
+            menu: this.menu,
+            placement: this.placement,
+            offset: this.offset,
+            flip: this.flip,
         });
     }
-    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();
-        }
-    }
     /**
      * Show the menu.
      */
     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();
+        this.state.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,
-            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
-     * and focus the first item in the submenu.
-     * If the user presses the left arrow key, we want to close the submenu.
-     * This behavior will be inverted if the direction is RTL.
-     * @param event
-     */
-    handleArrowKey(event) {
-        if (event instanceof KeyboardEvent === false) {
-            return;
-        }
-        const direction = getComputedStyle(this.trigger.nativeElement).direction;
-        const isRtl = direction === 'rtl';
-        const isRightArrow = event.key === 'ArrowRight';
-        const isLeftArrow = event.key === 'ArrowLeft';
-        if ((isRightArrow && !isRtl) || (isLeftArrow && isRtl)) {
-            event.preventDefault();
-            this.show();
-        }
+        this.state.hide(origin);
     }
     /**
-     * If the user hovers over the trigger, we want to open the submenu
+     * Toggle the menu.
+     * @param event - The mouse event
      */
-    showSubmenuOnHover(event) {
-        // if this was triggered by a touch event, we don't want to show the submenu
-        // as it will be shown by the click event - this prevents the submenu from being toggled
-        if (event.pointerType === 'touch') {
-            return;
-        }
-        this.show();
+    toggle(event) {
+        this.state.toggle(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSubmenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSubmenuTrigger, isStandalone: true, selector: "[ngpSubmenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "ngpSubmenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSubmenuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpSubmenuTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpSubmenuTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpSubmenuTriggerFlip", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "click": "toggle($event)", "keydown.ArrowRight": "handleArrowKey($event)", "keydown.ArrowLeft": "handleArrowKey($event)", "pointerenter": "showSubmenuOnHover($event)" }, properties: { "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"\" : null" } }, providers: [provideSubmenuTriggerState({ inherit: false })], exportAs: ["ngpSubmenuTrigger"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpSubmenuTrigger, isStandalone: true, selector: "[ngpSubmenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "ngpSubmenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpSubmenuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpSubmenuTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpSubmenuTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpSubmenuTriggerFlip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideSubmenuTriggerState()], exportAs: ["ngpSubmenuTrigger"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpSubmenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpSubmenuTrigger]',
                     exportAs: 'ngpSubmenuTrigger',
-                    providers: [provideSubmenuTriggerState({ inherit: false })],
-                    host: {
-                        'aria-haspopup': 'true',
-                        '[attr.aria-expanded]': 'open() ? "true" : "false"',
-                        '[attr.data-open]': 'open() ? "" : null',
-                        '(click)': 'toggle($event)',
-                    },
+                    providers: [provideSubmenuTriggerState()],
                 }]
-        }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerOffset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerFlip", required: false }] }], handleArrowKey: [{
-                type: HostListener,
-                args: ['keydown.ArrowRight', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.ArrowLeft', ['$event']]
-            }], showSubmenuOnHover: [{
-                type: HostListener,
-                args: ['pointerenter', ['$event']]
-            }] } });
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerOffset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpSubmenuTriggerFlip", required: false }] }] } });
 
-/**
- * The `NgpMenuItem` directive represents a menu item.
- */
-class NgpMenuItem {
-    constructor() {
-        /** Access the injector */
-        this.injector = inject(Injector);
-        /** Access the button element */
-        this.elementRef = injectElementRef();
-        /** Access the parent menu */
-        this.parentMenu = injectMenu();
-        /** Whether the menu item is disabled */
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpMenuItemDisabled',
-                transform: booleanAttribute }] : [{
-                alias: 'ngpMenuItemDisabled',
-                transform: booleanAttribute,
-            }]));
-        ngpButton({ disabled: this.disabled });
-    }
-    /** Close the menu when the item is clicked */
-    onClick(event) {
+const [NgpMenuItemStateToken, ngpMenuItem, injectMenuItemState, provideMenuItemState] = createPrimitive('NgpMenuItem', ({ disabled = signal(false) }) => {
+    const element = injectElementRef();
+    const injector = inject(Injector);
+    const parentMenu = injectMenuState({ optional: true });
+    ngpButton({ disabled });
+    // Host bindings
+    attrBinding(element, 'role', 'menuitem');
+    // Event listeners
+    listener(element, 'click', onClick);
+    listener(element, 'keydown', handleArrowKey);
+    listener(element, 'mouseenter', showSubmenuOnHover);
+    // Methods
+    function onClick(event) {
         // we do this here to avoid circular dependency issues
-        const trigger = this.injector.get(NgpSubmenuTrigger, null, { self: true, optional: true });
+        const trigger = injector.get(NgpSubmenuTrigger, null, { self: true, optional: true });
         const origin = event.detail === 0 ? 'keyboard' : 'mouse';
         // if this is a submenu trigger, we don't want to close the menu, we want to open the submenu
         if (!trigger) {
-            this.parentMenu?.closeAllMenus(origin);
+            parentMenu()?.closeAllMenus(origin);
         }
     }
-    /**
-     * If the user presses the left arrow key (in LTR) and there is a parent menu,
-     * we want to close the menu and focus the parent menu item.
-     */
-    handleArrowKey(event) {
+    function handleArrowKey(event) {
         if (event instanceof KeyboardEvent === false) {
             return;
         }
         // if there is no parent menu, we don't want to do anything
-        const trigger = this.injector.get(NgpSubmenuTrigger, null, { optional: true, skipSelf: true });
+        const trigger = injector.get(NgpSubmenuTrigger, null, { optional: true, skipSelf: true });
         if (!trigger) {
             return;
         }
-        const direction = getComputedStyle(this.elementRef.nativeElement).direction;
+        const direction = getComputedStyle(element.nativeElement).direction;
         const isRtl = direction === 'rtl';
         const isLeftArrow = event.key === 'ArrowLeft';
         const isRightArrow = event.key === 'ArrowRight';
@@ -327,69 +384,43 @@ class NgpMenuItem {
             }
         }
     }
-    /**
-     * If the user hovers over the trigger, we want to open the submenu
-     */
-    showSubmenuOnHover() {
-        this.parentMenu?.closeSubmenus.next(this.elementRef.nativeElement);
+    function showSubmenuOnHover() {
+        parentMenu()?.closeSubmenus.next(element.nativeElement);
+    }
+    return {};
+});
+
+/**
+ * The `NgpMenuItem` directive represents a menu item.
+ */
+class NgpMenuItem {
+    constructor() {
+        /** Whether the menu item is disabled */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpMenuItemDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpMenuItemDisabled',
+                transform: booleanAttribute,
+            }]));
+        ngpMenuItem({ disabled: this.disabled });
+        ngpRovingFocusItem({ disabled: this.disabled });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpMenuItem, isStandalone: true, selector: "[ngpMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpMenuItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick($event)", "keydown.ArrowLeft": "handleArrowKey($event)", "keydown.ArrowRight": "handleArrowKey($event)", "mouseenter": "showSubmenuOnHover()" } }, exportAs: ["ngpMenuItem"], hostDirectives: [{ directive: i1.NgpRovingFocusItem, inputs: ["ngpRovingFocusItemDisabled", "ngpMenuItemDisabled"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpMenuItem, isStandalone: true, selector: "[ngpMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpMenuItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideMenuItemState(), provideRovingFocusItemState()], exportAs: ["ngpMenuItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpMenuItem]',
                     exportAs: 'ngpMenuItem',
-                    hostDirectives: [
-                        { directive: NgpRovingFocusItem, inputs: ['ngpRovingFocusItemDisabled: ngpMenuItemDisabled'] },
-                    ],
-                    host: {
-                        role: 'menuitem',
-                        '(click)': 'onClick($event)',
-                        '(keydown.ArrowLeft)': 'handleArrowKey($event)',
-                        '(keydown.ArrowRight)': 'handleArrowKey($event)',
-                    },
+                    providers: [provideMenuItemState(), provideRovingFocusItemState()],
                 }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemDisabled", required: false }] }], showSubmenuOnHover: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }] } });
-
-/**
- * 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);
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuItemDisabled", required: false }] }] } });
 
 /**
  * The `NgpMenuTrigger` directive allows you to turn an element into a menu trigger.
  */
 class NgpMenuTrigger {
     constructor() {
-        /**
-         * 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.
          */
@@ -455,106 +486,50 @@ class NgpMenuTrigger {
         this.context = input(undefined, ...(ngDevMode ? [{ debugName: "context", alias: 'ngpMenuTriggerContext' }] : [{
                 alias: 'ngpMenuTriggerContext',
             }]));
-        /**
-         * The overlay that manages the menu
-         * @internal
-         */
-        this.overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
-        /**
-         * The open state of the menu.
-         * @internal
-         */
-        this.open = computed(() => this.overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
         /**
          * The menu trigger state.
          */
-        this.state = menuTriggerState(this);
-    }
-    ngOnDestroy() {
-        this.overlay()?.destroy();
-    }
-    onClick(event) {
-        if (this.state.disabled()) {
-            return;
-        }
-        this.toggle(event);
-    }
-    toggle(event) {
-        // 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();
-        }
+        this.state = ngpMenuTrigger({
+            disabled: this.disabled,
+            menu: this.menu,
+            placement: this.placement,
+            offset: this.offset,
+            flip: this.flip,
+            container: this.container,
+            scrollBehavior: this.scrollBehavior,
+            context: this.context,
+        });
     }
     /**
      * Show the menu.
      */
     show() {
-        // Create the overlay if it doesn't exist yet
-        if (!this.overlay()) {
-            this.createOverlay();
-        }
-        // Show the overlay
-        this.overlay()?.show();
+        this.state.show();
     }
     /**
-     * @internal
      * Hide the menu.
+     * @param origin - The focus origin
+     * @internal
      */
-    hide(origin = 'program') {
-        // If the trigger is disabled or the menu is not open, do nothing
-        if (!this.open()) {
-            return;
-        }
-        // Hide the overlay
-        this.overlay()?.hide({ origin });
+    hide(origin) {
+        this.state.hide(origin);
     }
     /**
-     * Create the overlay that will contain the menu
+     * Toggle the menu.
+     * @param event - The mouse event
      */
-    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));
+    toggle(event) {
+        this.state.toggle(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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": "onClick($event)" }, properties: { "attr.aria-expanded": "open() ? \"true\" : \"false\"", "attr.data-open": "open() ? \"\" : null", "attr.data-placement": "state.placement()" } }, providers: [provideMenuTriggerState({ inherit: false })], exportAs: ["ngpMenuTrigger"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", 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 } }, providers: [provideMenuTriggerState()], exportAs: ["ngpMenuTrigger"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpMenuTrigger]',
                     exportAs: 'ngpMenuTrigger',
-                    providers: [provideMenuTriggerState({ inherit: false })],
-                    host: {
-                        'aria-haspopup': 'true',
-                        '[attr.aria-expanded]': 'open() ? "true" : "false"',
-                        '[attr.data-open]': 'open() ? "" : null',
-                        '[attr.data-placement]': 'state.placement()',
-                        '(click)': 'onClick($event)',
-                    },
+                    providers: [provideMenuTriggerState()],
                 }]
         }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuTriggerOffset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuTriggerFlip", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuTriggerContainer", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuTriggerScrollBehavior", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpMenuTriggerContext", required: false }] }] } });
 
@@ -563,53 +538,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  */
 class NgpMenu {
     constructor() {
-        /** 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 */
-        this.closeSubmenus = new Subject();
+        this.state = ngpMenu({});
+        ngpRovingFocusGroup({ inherit: false });
+        ngpFocusTrap({});
     }
     /** @internal Close the menu and any parent menus */
     closeAllMenus(origin) {
-        this.menuTrigger().hide(origin);
-        this.parentMenu?.closeAllMenus(origin);
+        this.state.closeAllMenus(origin);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpMenu, isStandalone: true, selector: "[ngpMenu]", host: { attributes: { "role": "menu", "data-overlay": "" }, 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()", "attr.data-placement": "overlay.finalPlacement()" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpMenu, isStandalone: true, selector: "[ngpMenu]", 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.NgpRovingFocusGroup }, { directive: i2.NgpFocusTrap }], ngImport: i0 }); }
+            provideRovingFocusGroupState({ inherit: false }),
+            provideMenuState({ inherit: false }),
+            provideFocusTrapState(),
+        ], exportAs: ["ngpMenu"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpMenu, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngpMenu]',
                     exportAs: 'ngpMenu',
-                    hostDirectives: [NgpRovingFocusGroup, NgpFocusTrap],
                     providers: [
                         // ensure we don't inherit the focus group from the parent menu if there is one
-                        provideRovingFocusGroup(NgpRovingFocusGroup, { inherit: false }),
-                        provideMenu(NgpMenu),
+                        provideRovingFocusGroupState({ inherit: false }),
+                        provideMenuState({ inherit: false }),
+                        provideFocusTrapState(),
                     ],
-                    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()',
-                        '[attr.data-placement]': 'overlay.finalPlacement()',
-                        'data-overlay': '',
-                    },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgpMenu, NgpMenuItem, NgpMenuToken, NgpMenuTrigger, NgpSubmenuTrigger, injectMenu, injectMenuTriggerState, injectSubmenuTriggerState, provideMenuConfig, provideMenuTriggerState, provideSubmenuTriggerState };
+export { NgpMenu, NgpMenuItem, NgpMenuTrigger, NgpSubmenuTrigger, injectMenuItemState, injectMenuState, injectMenuTriggerState, injectSubmenuTriggerState, provideMenuConfig, provideMenuItemState, provideMenuState, provideMenuTriggerState, provideSubmenuTriggerState };
 //# sourceMappingURL=ng-primitives-menu.mjs.map