@malva-ui/core 0.1.12

package/esm2022/menu/lib/menu/menu-trigger.js

@@ -0,0 +1,653 @@
+import { DestroyRef, Directive, ElementRef, NgZone, Renderer2, ViewContainerRef, effect, inject, input, output, signal, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MENU_POSITIONS, MlvPopupService, SUBMENU_POSITIONS, } from '@malva-ui/core/popup';
+import { MENU_TOKEN } from './menu.types';
+import { MENUBAR_TOKEN } from './menubar.types';
+import { isCursorHeadingToSubmenu } from './submenu-aim';
+import * as i0 from "@angular/core";
+/**
+ * Trigger directive for `mlv-menu`.
+ *
+ * Attach to any element to open a `mlv-menu` panel on click. Uses `MlvPopupService`
+ * from `@malva-ui/core/popup` to create the CDK overlay with the popup component's
+ * template for visual chrome (background, border, radius, shadow, animations).
+ * The menu panel and items are declared inside `[mlvPopupContent]` in the menu's
+ * template and are rendered directly into the overlay — no DOM manipulation required.
+ *
+ * When used as a submenu trigger (`[isSubmenuTrigger]="true"`), the panel opens on
+ * mouseenter and the triangle-pointer-tracking algorithm keeps it open while the
+ * cursor moves diagonally toward it.
+ *
+ * Hover intent is resolved by what the pointer is over, with geometry used only
+ * for the ambiguous space between item and panel:
+ * - over the trigger item — stays open, whatever the trajectory;
+ * - over a different row of the same menu — closes;
+ * - in between (including the 8px `SUBMENU_POSITIONS` gap) — the safe cone
+ *   decides, and a short grace timer absorbs jitter and gap crossings.
+ *
+ * Once the cursor enters the submenu panel, triangle tracking stops and the
+ * panel's own `mouseleave` schedules the close.
+ *
+ * @example Simple trigger
+ * ```html
+ * <button [mlvMenuTrigger]="menu">Open menu</button>
+ * <mlv-menu #menu>
+ *   <mlv-menu-item (itemClick)="onEdit()">Edit</mlv-menu-item>
+ *   <mlv-menu-separator />
+ *   <mlv-menu-item (itemClick)="onDelete()">Delete</mlv-menu-item>
+ * </mlv-menu>
+ * ```
+ *
+ * @example Submenu trigger on a menu item
+ * ```html
+ * <mlv-menu-item [mlvMenuTrigger]="sub" [isSubmenuTrigger]="true">
+ *   More options
+ * </mlv-menu-item>
+ * <mlv-menu #sub>
+ *   <mlv-menu-item (itemClick)="onOption()">Option A</mlv-menu-item>
+ * </mlv-menu>
+ * ```
+ */
+export class MlvMenuTrigger {
+    // ─── Injected services ────────────────────────────────────────────────────
+    /** @private Host element reference. */
+    _elementRef = inject((ElementRef));
+    /** @private MlvPopupService for creating floating overlay panels. */
+    _popupService = inject(MlvPopupService);
+    /** @private ViewContainerRef needed by MlvPopupService for template portal instantiation. */
+    _vcr = inject(ViewContainerRef);
+    /** @private NgZone for running change detection after async operations. */
+    _ngZone = inject(NgZone);
+    /** @private DestroyRef for cleanup on directive destruction. */
+    _destroyRef = inject(DestroyRef);
+    /** @private Parent menu for submenu triggers, if this trigger lives inside one. */
+    _parentMenu = inject(MENU_TOKEN, {
+        optional: true,
+    });
+    /**
+     * @private Parent menubar, if this trigger is a direct child of a `mlv-menubar`
+     * (i.e. a top-level File / Edit / View item). `null` for standalone triggers
+     * and submenu triggers.
+     */
+    _menubar = inject(MENUBAR_TOKEN, {
+        optional: true,
+    });
+    /**
+     * @private Whether this trigger is a top-level menubar item. When `true` the
+     * host exposes `role="menuitem"` + a roving tabindex, and open/close state is
+     * coordinated with the parent `mlv-menubar`.
+     */
+    _isMenubarChild = this._menubar !== null;
+    // ─── Inputs ───────────────────────────────────────────────────────────────
+    /**
+     * The `mlv-menu` panel to open. Required.
+     */
+    mlvMenuTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvMenuTrigger" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, treats this trigger as a submenu trigger:
+     * - Opens the panel using submenu positions (right-of-parent).
+     * - Activates triangle pointer tracking while the submenu is open.
+     * - Opens on `mouseenter` in addition to `click`.
+     */
+    isSubmenuTrigger = input(false, { ...(ngDevMode ? { debugName: "isSubmenuTrigger" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, disables the trigger — no overlay will open.
+     */
+    menuTriggerDisabled = input(false, { ...(ngDevMode ? { debugName: "menuTriggerDisabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    // ─── Outputs ──────────────────────────────────────────────────────────────
+    /** Emits when the menu panel opens. */
+    menuOpened = output();
+    /** Emits when the menu panel closes. */
+    menuClosed = output();
+    // ─── Internal state ───────────────────────────────────────────────────────
+    /**
+     * @private Whether the menu overlay is currently open.
+     */
+    _isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Roving tabindex for menubar top-level items — `0` for the active
+     * item, `-1` otherwise. Written by the parent `mlv-menubar`; only reflected
+     * on the host when `_isMenubarChild` is `true`.
+     */
+    _tabIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Handle returned by `MlvPopupService.open()` for the open menu overlay.
+     */
+    _overlayRef = null;
+    /**
+     * @private Subscriptions created on each `_openOverlay()` call.
+     * All are unsubscribed in `onClose` callback.
+     */
+    _openSubscriptions = [];
+    /**
+     * @private State for triangle pointer tracking (submenu only).
+     */
+    _triangleState = null;
+    /**
+     * @private Timer for delayed close when cursor leaves the trigger (submenu mode).
+     * Only used during the triangle-approach phase (before cursor enters submenu).
+     */
+    _closeTimer = null;
+    /**
+     * @private Document mousemove listener cleanup function (submenu triangle tracking).
+     */
+    _mousemoveCleanup = null;
+    constructor() {
+        this._destroyRef.onDestroy(() => {
+            this._clearCloseTimer();
+            this._removeMousemoveListener();
+            this._closeOverlay();
+        });
+        // Menubar top-level item: apply `role="menuitem"` + a roving tabindex
+        // imperatively. Only done for menubar children (never co-hosted with
+        // `MlvMenuItem`), so it cannot collide with that directive's own
+        // `role`/`tabindex` host bindings on submenu triggers.
+        if (this._isMenubarChild) {
+            const renderer = inject(Renderer2);
+            const el = this._elementRef.nativeElement;
+            renderer.setAttribute(el, 'role', 'menuitem');
+            effect(() => {
+                renderer.setAttribute(el, 'tabindex', String(this._tabIndex()));
+            });
+        }
+    }
+    // ─── Public API ───────────────────────────────────────────────────────────
+    /**
+     * Opens the menu overlay programmatically.
+     * No-op if the overlay is already open or the trigger is disabled.
+     */
+    open() {
+        if (this._isOpen() || this.menuTriggerDisabled())
+            return;
+        this._openOverlay();
+    }
+    /**
+     * Closes the menu overlay programmatically.
+     * No-op if the overlay is not open.
+     */
+    close() {
+        if (!this._isOpen())
+            return;
+        this._closeOverlay();
+    }
+    /**
+     * Toggles the menu overlay open/closed.
+     */
+    toggle() {
+        if (this._isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    // ─── MlvMenubarItem (used by the parent `mlv-menubar`) ─────────────────────
+    /**
+     * Whether this trigger is disabled. Bridges the `menuTriggerDisabled` signal
+     * to the `MlvMenubarItem` / `FocusKeyManager.skipPredicate` contract.
+     */
+    get disabledBoolean() {
+        return !!this.menuTriggerDisabled();
+    }
+    /**
+     * Focuses the trigger host element. Required by CDK `FocusableOption` for the
+     * menubar's `FocusKeyManager` roving tabindex.
+     */
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    /**
+     * Returns the trigger's trimmed visible text, used by the menubar's
+     * `FocusKeyManager` type-ahead. Required by `FocusKeyManager.withTypeAhead()`.
+     */
+    getLabel() {
+        return this._elementRef.nativeElement.textContent?.trim() ?? '';
+    }
+    /** Whether this item's dropdown menu is currently open (`MlvMenubarItem`). */
+    isMenuOpen() {
+        return this._isOpen();
+    }
+    /** Opens this item's dropdown without moving focus into the panel (`MlvMenubarItem`). */
+    openMenu() {
+        this.open();
+    }
+    /** Closes this item's dropdown (`MlvMenubarItem`). */
+    closeMenu() {
+        this.close();
+    }
+    /**
+     * Opens this item's dropdown and moves focus to its first item (`MlvMenubarItem`).
+     */
+    openMenuWithFirstItemFocused() {
+        this.open();
+        if (this._isOpen()) {
+            setTimeout(() => this.mlvMenuTrigger().focusFirstItem(), 0);
+        }
+    }
+    /**
+     * Opens this item's dropdown and moves focus to its last item (`MlvMenubarItem`).
+     */
+    openMenuWithLastItemFocused() {
+        this.open();
+        if (this._isOpen()) {
+            setTimeout(() => this.mlvMenuTrigger().focusLastItem(), 0);
+        }
+    }
+    // ─── Protected host event handlers ───────────────────────────────────────
+    /**
+     * @protected Click handler — toggles the menu.
+     */
+    _onTriggerClick() {
+        if (this.menuTriggerDisabled())
+            return;
+        this.toggle();
+    }
+    /**
+     * @protected Mouseenter handler.
+     *
+     * - Menubar top-level item: delegates to the bar's hover-follow, which opens
+     *   this item's menu only while another dropdown in the bar is already open.
+     * - Submenu trigger: opens the submenu on hover (triangle tracking).
+     * - Standalone trigger: no-op (opens on click only).
+     */
+    _onTriggerMouseEnter() {
+        if (this._isMenubarChild) {
+            if (this.menuTriggerDisabled())
+                return;
+            this._menubar?.onItemPointerEnter(this);
+            return;
+        }
+        if (!this.isSubmenuTrigger() || this.menuTriggerDisabled())
+            return;
+        this._clearCloseTimer();
+        if (!this._isOpen()) {
+            this.open();
+        }
+    }
+    /**
+     * @protected Mouseleave handler — for submenu triggers, starts a delayed close
+     * unless the cursor is heading into the submenu triangle.
+     * Once the cursor has entered the submenu panel, the submenu overlay's own
+     * mouseleave listener handles closing — no triangle tracking needed here.
+     */
+    _onTriggerMouseLeave(event) {
+        if (!this.isSubmenuTrigger())
+            return;
+        // If cursor has already entered the submenu, triangle tracking is done: the
+        // submenu's own mouseleave owns closing from here. The exception is the
+        // cursor coming back to this item and then leaving again for somewhere that
+        // is neither this item nor the submenu — the submenu's mouseleave already
+        // fired on the way back here, so nothing else would ever close it.
+        if (this._triangleState?.cursorEnteredSubmenu) {
+            const overlayEl = this._overlayRef?.overlayRef.overlayElement;
+            const entered = event.relatedTarget;
+            const intoSubmenu = entered instanceof Node && !!overlayEl?.contains(entered);
+            if (!intoSubmenu)
+                this._scheduleClose();
+            return;
+        }
+        if (this._triangleState) {
+            const heading = isCursorHeadingToSubmenu(event.clientX, event.clientY, this._triangleState);
+            if (heading) {
+                // Let the mousemove listener continue tracking.
+                return;
+            }
+        }
+        this._scheduleClose();
+    }
+    /**
+     * @protected Keyboard handler — Enter/Space opens; Escape closes;
+     * ArrowDown/Up opens with keyboard focus.
+     */
+    _onKeydown(event) {
+        if (this.menuTriggerDisabled())
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.toggle();
+                if (this._isOpen()) {
+                    setTimeout(() => this.mlvMenuTrigger().focusFirstItem(), 0);
+                }
+                break;
+            case 'ArrowDown':
+                if (!this._isOpen()) {
+                    event.preventDefault();
+                    this.open();
+                    setTimeout(() => this.mlvMenuTrigger().focusFirstItem(), 0);
+                }
+                break;
+            case 'ArrowUp':
+                if (!this._isOpen()) {
+                    event.preventDefault();
+                    this.open();
+                    setTimeout(() => this.mlvMenuTrigger().focusLastItem(), 0);
+                }
+                break;
+            case 'ArrowRight':
+                // On a submenu trigger (a menu item), ArrowRight opens the submenu and
+                // moves focus to its first item.
+                if (this.isSubmenuTrigger() && !this._isOpen()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.open();
+                    setTimeout(() => this.mlvMenuTrigger().focusFirstItem(), 0);
+                }
+                break;
+            case 'Escape':
+                if (this._isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                    this._elementRef.nativeElement.focus();
+                }
+                break;
+        }
+    }
+    // ─── Private overlay management ──────────────────────────────────────────
+    /**
+     * @private Creates and attaches the overlay using `MlvPopupService`.
+     *
+     * The popup component's template (including the `[mlvPopupContent]` menu list)
+     * is rendered directly via CDK TemplatePortal — no DOM manipulation required.
+     */
+    _openOverlay() {
+        const menu = this.mlvMenuTrigger();
+        const popup = menu._popup();
+        const isSubmenu = this.isSubmenuTrigger();
+        const isMenubarChild = this._isMenubarChild;
+        const positions = isSubmenu ? SUBMENU_POSITIONS : MENU_POSITIONS;
+        menu.registerParentMenu(isSubmenu ? this._parentMenu : null);
+        // When opened from a menubar, give the menu a controller so its top-level
+        // ArrowRight / ArrowLeft can cross to the adjacent menubar menu.
+        menu.registerMenubarController(isMenubarChild && this._menubar
+            ? {
+                openNextItemMenu: () => this._menubar?.openAdjacentItemMenu(this, 1),
+                openPreviousItemMenu: () => this._menubar?.openAdjacentItemMenu(this, -1),
+            }
+            : null);
+        popup.animationState.set('idle');
+        this._overlayRef = this._popupService.open({
+            origin: this._elementRef,
+            template: popup.popupTemplate(),
+            vcr: this._vcr,
+            positions,
+            // Submenus and menubar dropdowns are backdrop-less so sibling top-level
+            // items stay hoverable/clickable while a menu is open. For menubar
+            // dropdowns, treat the whole bar as "inside" so clicking another top-level
+            // item switches menus (via that item's click) instead of dismissing.
+            hasBackdrop: !isSubmenu && !isMenubarChild,
+            dismissExcludeElements: isMenubarChild && this._menubar
+                ? [this._menubar.hostElement]
+                : undefined,
+            onClose: () => {
+                this._overlayRef = null;
+                this._isOpen.set(false);
+                popup.animationState.set('idle');
+                popup.opened.set(false);
+                menu._isOpen.set(false);
+                this._openSubscriptions.forEach((s) => s.unsubscribe());
+                this._openSubscriptions = [];
+                this._triangleState = null;
+                this._removeMousemoveListener();
+                this.menuClosed.emit();
+                if (isMenubarChild) {
+                    this._menubar?.notifyItemClosed(this);
+                }
+            },
+            onRequestClose: () => {
+                // Backdrop click or Escape from overlay: delegate to menu.close()
+                // which sets _isOpen(false), emits closed, and the closed subscription
+                // below will start the leave animation.
+                menu.close();
+            },
+            onPositionChange: (change) => popup.updateArrowFromPosition(change.connectionPair),
+        });
+        popup.opened.set(true);
+        menu._isOpen.set(true);
+        this._isOpen.set(true);
+        this.menuOpened.emit();
+        if (isMenubarChild) {
+            this._menubar?.notifyItemOpened(this);
+        }
+        // Leave animation done → dispose overlay (triggers onClose above).
+        const leaveSub = popup.leaveAnimationDone$.subscribe(() => {
+            this._overlayRef?.close();
+        });
+        this._openSubscriptions.push(leaveSub);
+        // Menu closed (item click, Tab key, internal Escape, ArrowLeft on a submenu,
+        // or backdrop click) → restore focus to the trigger, then start the leave
+        // animation. Trigger-side Escape and programmatic close restore focus via
+        // their own paths.
+        const closedSub = menu.closed.subscribe(() => {
+            this._restoreFocusToTrigger();
+            if (this._overlayRef) {
+                popup.animationState.set('leave');
+            }
+        });
+        this._openSubscriptions.push(closedSub);
+        // Start enter animation on the next microtask so the popup has rendered.
+        // `beginEnterAnimation()` skips the promotion when a close already moved
+        // the state to 'leave' in this same tick — overwriting it would strand the
+        // overlay with no animationend and no fallback timer.
+        queueMicrotask(() => popup.beginEnterAnimation());
+        // Track position changes and install overlay mouse listeners (submenu only).
+        if (isSubmenu) {
+            this._setupSubmenuTracking();
+        }
+    }
+    /**
+     * @private Returns focus to the trigger element when the menu closes, but only
+     * if focus currently lives inside the (closing) overlay — this avoids yanking
+     * focus the user has deliberately moved elsewhere. For a submenu trigger this
+     * restores focus to the parent menu item that opened the submenu.
+     */
+    _restoreFocusToTrigger() {
+        const overlayEl = this._overlayRef?.overlayRef.overlayElement;
+        const active = document.activeElement;
+        if (overlayEl && active && overlayEl.contains(active)) {
+            this._elementRef.nativeElement.focus();
+        }
+    }
+    /**
+     * @private Starts the leave animation which will eventually dispose the overlay
+     * via the `leaveAnimationDone$` subscription.
+     * Called by `close()` (trigger-side: Escape on trigger, programmatic close, toggle).
+     */
+    _closeOverlay() {
+        if (!this._overlayRef)
+            return;
+        const popup = this.mlvMenuTrigger()._popup();
+        popup.animationState.set('leave');
+        // The leaveAnimationDone$ subscription will call this._overlayRef.close(),
+        // which triggers onClose and fully disposes the overlay.
+    }
+    // ─── Submenu overlay mouse tracking ──────────────────────────────────────
+    /**
+     * @private Sets up triangle tracking for a submenu after first render.
+     * Installs mousemove listener and submenu overlay mouse listeners.
+     */
+    _setupSubmenuTracking() {
+        setTimeout(() => {
+            if (this._overlayRef && this._isOpen()) {
+                const overlayEl = this._overlayRef.overlayRef.overlayElement;
+                const rect = overlayEl.getBoundingClientRect();
+                this._triangleState = {
+                    lastX: 0,
+                    lastY: 0,
+                    submenuRect: rect,
+                    side: 'right',
+                    cursorEnteredSubmenu: false,
+                };
+                this._installMousemoveListener();
+                this._installSubmenuOverlayListeners(overlayEl);
+            }
+        }, 0);
+    }
+    /**
+     * @private Installs mouseenter/mouseleave listeners on the submenu overlay element.
+     *
+     * - `mouseenter`: cursor has entered submenu — stop triangle tracking, clear close timer.
+     * - `mouseleave`: cursor has left the submenu — schedule a delayed close.
+     *
+     * The delay is what makes the 8px gap between the parent item and its panel
+     * (`SUBMENU_POSITIONS` uses `offsetX: 8`) crossable in both directions.
+     */
+    _installSubmenuOverlayListeners(overlayEl) {
+        const onEnter = () => {
+            if (this._triangleState) {
+                this._triangleState.cursorEnteredSubmenu = true;
+            }
+            this._clearCloseTimer();
+            this._removeMousemoveListener();
+        };
+        const onLeave = () => {
+            // Delayed, not immediate. `SUBMENU_POSITIONS` opens the panel with
+            // `offsetX: 8`, so an 8px gap separates it from the parent item: moving
+            // back to that item crosses dead space where `relatedTarget` is the
+            // overlay container or `<body>`, never the trigger. Closing on this event
+            // dismissed the panel the cursor was travelling towards.
+            //
+            // Both re-entry points cancel the timer — this listener's `mouseenter` and
+            // the trigger's `_onTriggerMouseEnter` — so crossing the gap in either
+            // direction is safe, while genuinely leaving still closes.
+            this._scheduleClose();
+        };
+        const cleanup = {
+            unsubscribe: () => {
+                overlayEl.removeEventListener('mouseenter', onEnter);
+                overlayEl.removeEventListener('mouseleave', onLeave);
+            },
+        };
+        this._ngZone.runOutsideAngular(() => {
+            overlayEl.addEventListener('mouseenter', onEnter);
+            overlayEl.addEventListener('mouseleave', onLeave);
+        });
+        this._openSubscriptions.push(cleanup);
+    }
+    // ─── Triangle pointer tracking ───────────────────────────────────────────
+    /**
+     * @private Installs a document-level mousemove listener for triangle tracking.
+     * Runs outside Angular's zone for performance; re-enters zone only when closing.
+     */
+    _installMousemoveListener() {
+        this._removeMousemoveListener();
+        const handler = (event) => {
+            if (!this._triangleState || !this._isOpen())
+                return;
+            if (this._triangleState.cursorEnteredSubmenu)
+                return;
+            // Intent is decided by what the pointer is *over* first; the cone only
+            // arbitrates the ambiguous space in between.
+            //
+            // 1. Still on this item — the submenu belongs to it, so it stays open no
+            //    matter what the trajectory looks like. Without this, resting the
+            //    cursor on the item closed the panel: the small settling movements
+            //    make no horizontal progress, so the cone reads "not heading".
+            if (this._elementRef.nativeElement.contains(event.target)) {
+                this._clearCloseTimer();
+                return;
+            }
+            // 2. On a different row of the same menu — unambiguous, and no cone can
+            //    express it: the panel is tall, so from the far side of this item the
+            //    safe area covers most downward travel.
+            if (this._isPointerOnSiblingItem(event.target)) {
+                this._ngZone.run(() => this.close());
+                return;
+            }
+            // 3. Somewhere in between (the 8px gap, panel padding, outside). Geometry
+            //    decides, backed by the grace timer.
+            const { clientX, clientY } = event;
+            const state = this._triangleState;
+            const heading = isCursorHeadingToSubmenu(clientX, clientY, state);
+            state.lastX = clientX;
+            state.lastY = clientY;
+            if (heading) {
+                this._clearCloseTimer();
+            }
+            else {
+                if (this._overlayRef) {
+                    state.submenuRect =
+                        this._overlayRef.overlayRef.overlayElement.getBoundingClientRect();
+                    if (!isCursorHeadingToSubmenu(clientX, clientY, state)) {
+                        this._scheduleClose();
+                    }
+                }
+            }
+        };
+        this._ngZone.runOutsideAngular(() => {
+            document.addEventListener('mousemove', handler, true);
+            this._mousemoveCleanup = () => document.removeEventListener('mousemove', handler, true);
+        });
+    }
+    /**
+     * @private Whether the pointer is over a menu item that is a sibling of this
+     * trigger — i.e. another row of the menu this submenu was opened from.
+     *
+     * Scoped to the owning panel via `closest('[role="menu"]')` so rows of an
+     * unrelated menu, and the submenu's own rows, never match.
+     */
+    _isPointerOnSiblingItem(target) {
+        if (!(target instanceof Element))
+            return false;
+        const item = target.closest('[role="menuitem"]');
+        if (!item || item === this._elementRef.nativeElement)
+            return false;
+        const panel = this._elementRef.nativeElement.closest('[role="menu"]');
+        return !!panel?.contains(item);
+    }
+    /**
+     * @private Removes the document mousemove listener if one is installed.
+     */
+    _removeMousemoveListener() {
+        if (this._mousemoveCleanup) {
+            this._mousemoveCleanup();
+            this._mousemoveCleanup = null;
+        }
+    }
+    /**
+     * @private Schedules a delayed close for submenu hover-out scenarios (150 ms delay).
+     * Only used during triangle-approach phase (before cursor enters submenu).
+     */
+    _scheduleClose() {
+        this._clearCloseTimer();
+        this._closeTimer = setTimeout(() => {
+            this._ngZone.run(() => this.close());
+        }, 150);
+    }
+    /**
+     * @private Clears any pending close timer.
+     */
+    _clearCloseTimer() {
+        if (this._closeTimer !== null) {
+            clearTimeout(this._closeTimer);
+            this._closeTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvMenuTrigger, isStandalone: true, selector: "[mlvMenuTrigger]", inputs: { mlvMenuTrigger: { classPropertyName: "mlvMenuTrigger", publicName: "mlvMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, isSubmenuTrigger: { classPropertyName: "isSubmenuTrigger", publicName: "isSubmenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, menuTriggerDisabled: { classPropertyName: "menuTriggerDisabled", publicName: "menuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "click": "_onTriggerClick()", "mouseenter": "_onTriggerMouseEnter()", "mouseleave": "_onTriggerMouseLeave($event)", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "_isOpen()", "attr.aria-controls": "_isOpen() ? mlvMenuTrigger().panelId : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvMenuTrigger]',
+                    host: {
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': '_isOpen()',
+                        '[attr.aria-controls]': '_isOpen() ? mlvMenuTrigger().panelId : null',
+                        // NB: `role="menuitem"` and the roving `tabindex` are applied imperatively
+                        // (see the constructor) *only* for menubar children. They are deliberately
+                        // NOT host bindings: a submenu trigger co-hosts `MlvMenuItem`, which
+                        // already owns `[attr.role]`/`[attr.tabindex]`, and two directives binding
+                        // the same attribute would clobber each other.
+                        '(click)': '_onTriggerClick()',
+                        '(mouseenter)': '_onTriggerMouseEnter()',
+                        '(mouseleave)': '_onTriggerMouseLeave($event)',
+                        '(keydown)': '_onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { mlvMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvMenuTrigger", required: true }] }], isSubmenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubmenuTrigger", required: false }] }], menuTriggerDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTriggerDisabled", required: false }] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }] } });
+//# sourceMappingURL=menu-trigger.js.map