ngwr 6.1.1 → 7.1.0

package/fesm2022/ngwr-context-menu.mjs

@@ -0,0 +1,653 @@
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { input, computed, inject, ElementRef, ViewContainerRef, DestroyRef, ViewEncapsulation, Component, Directive, viewChild, TemplateRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { WR_OVERLAY } from 'ngwr/overlay';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { WrIcon } from 'ngwr/icon';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** Hover delay (ms) before a submenu opens. */
+const SUBMENU_OPEN_DELAY = 120;
+/** Grace window (ms) before a submenu closes when the cursor leaves it. */
+const SUBMENU_CLOSE_DELAY = 240;
+/** Animation duration of the submenu — mirrors the root menu CSS. */
+const SUBMENU_TRANSITION_MS = 220;
+/**
+ * Single row inside a `<wr-context-menu>`. Mirrors `<wr-dropdown-item>` —
+ * rendered as a menu item with an optional leading icon and an optional
+ * nested `[submenu]` that opens to the right on hover.
+ *
+ * @example
+ * ```html
+ * <wr-context-menu #menu>
+ *   <wr-context-menu-item icon="copy" (click)="copy()">Copy</wr-context-menu-item>
+ *   <wr-context-menu-item icon="more" [submenu]="extras">More…</wr-context-menu-item>
+ * </wr-context-menu>
+ *
+ * <wr-context-menu #extras>
+ *   <wr-context-menu-item (click)="duplicate()">Duplicate</wr-context-menu-item>
+ *   <wr-context-menu-item (click)="archive()">Archive</wr-context-menu-item>
+ * </wr-context-menu>
+ * ```
+ */
+class WrContextMenuItem {
+    /** Optional leading icon name. @default null */
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Disable interaction (suppresses pointer + keyboard). @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * Optional nested `<wr-context-menu>`. When set, hovering the item
+     * (or pressing →) opens it to the right with a chevron indicator.
+     */
+    submenu = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submenu" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['wr-context-menu-item'];
+        if (this.disabled())
+            parts.push('wr-context-menu-item--disabled');
+        if (this.submenu())
+            parts.push('wr-context-menu-item--has-submenu');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    overlay = inject(WR_OVERLAY);
+    vcr = inject(ViewContainerRef);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    destroyRef = inject(DestroyRef);
+    submenuRef = null;
+    openTimer = null;
+    closeTimer = null;
+    submenuOpen = false;
+    /**
+     * Global registry of open submenus keyed by the host element of the
+     * item that owns them. Used to cascade-close descendants when a
+     * parent submenu is disposed — Angular's onDestroy on detached
+     * portals doesn't always tear down the deepest grand-children's
+     * overlays in the right order, leaving orphaned floating panes.
+     */
+    static openSubmenus = new Map();
+    /**
+     * Dispose every open submenu pane on the page. Called by the root
+     * `WrContextMenu` when its own overlay closes — destroyRef cascade
+     * isn't reliable across separate overlay panes (each pane lives in
+     * the CDK overlay container, not inside the parent pane's view).
+     */
+    static disposeAll(immediate) {
+        for (const [, owner] of [...WrContextMenuItem.openSubmenus]) {
+            owner.disposeSubmenu(immediate);
+        }
+    }
+    constructor() {
+        this.destroyRef.onDestroy(() => this.disposeSubmenu(true));
+    }
+    /** @internal Keyboard activation — Enter / Space. */
+    activate(event) {
+        if (this.disabled())
+            return;
+        if (this.submenu()) {
+            event.preventDefault();
+            this.scheduleOpen(0);
+            return;
+        }
+        event.preventDefault();
+        this.host.nativeElement.click();
+    }
+    /** @internal Right-arrow opens the submenu. */
+    onArrowRight(event) {
+        if (this.disabled() || !this.submenu())
+            return;
+        event.preventDefault();
+        this.scheduleOpen(0);
+    }
+    /** @internal Left-arrow closes the submenu (if open). */
+    onArrowLeft(event) {
+        if (!this.submenu() || !this.submenuOpen)
+            return;
+        event.preventDefault();
+        this.scheduleClose(0);
+    }
+    /** @internal Hover schedules a submenu open after a small delay. */
+    onMouseEnter() {
+        if (this.disabled() || !this.submenu())
+            return;
+        this.cancelClose();
+        this.scheduleOpen(SUBMENU_OPEN_DELAY);
+    }
+    /** @internal Hover-out schedules a close with a grace window. */
+    onMouseLeave(event) {
+        if (!this.submenu())
+            return;
+        this.cancelOpen();
+        // Only skip the close when the cursor is moving into MY OWN submenu
+        // (the user is drilling further down). Moving elsewhere — sibling
+        // item, ancestor menu, or completely off the chain — should close
+        // this item's submenu and let the cascade-on-dispose tear down any
+        // descendants.
+        if (this.relatedTargetIsInsideOwnSubmenu(event))
+            return;
+        this.scheduleClose(SUBMENU_CLOSE_DELAY);
+    }
+    // Submenu lifecycle
+    scheduleOpen(delay) {
+        if (this.submenuRef)
+            return;
+        this.cancelOpen();
+        if (delay === 0) {
+            this.openSubmenu();
+            return;
+        }
+        this.openTimer = setTimeout(() => {
+            this.openTimer = null;
+            this.openSubmenu();
+        }, delay);
+    }
+    scheduleClose(delay) {
+        this.cancelClose();
+        if (delay === 0) {
+            this.disposeSubmenu(false);
+            return;
+        }
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = null;
+            this.disposeSubmenu(false);
+        }, delay);
+    }
+    cancelOpen() {
+        if (this.openTimer !== null) {
+            clearTimeout(this.openTimer);
+            this.openTimer = null;
+        }
+    }
+    cancelClose() {
+        if (this.closeTimer !== null) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    openSubmenu() {
+        const panel = this.submenu();
+        if (!panel || this.submenuRef)
+            return;
+        // Position to the right of the item, vertically aligned with the
+        // item's top. Falls back to opening to the LEFT if there's no room.
+        const positions = [
+            { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -4 },
+        ];
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions(positions)
+            .withPush(true);
+        this.submenuRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.scrollStrategies.reposition(),
+            panelClass: ['wr-context-menu-overlay', 'wr-context-menu-overlay--submenu'],
+        });
+        const portal = new TemplatePortal(panel.contentTpl(), this.vcr);
+        this.submenuRef.attach(portal);
+        // Mirror the open animation pattern from the root menu directive.
+        const pane = this.submenuRef.overlayElement;
+        requestAnimationFrame(() => pane.classList.add('wr-context-menu-overlay--open'));
+        // Track mouse entering / leaving the submenu so we don't auto-close
+        // when the cursor crosses the gap between item and submenu pane.
+        pane.addEventListener('mouseenter', this.onSubmenuEnter);
+        pane.addEventListener('mouseleave', this.onSubmenuLeave);
+        this.submenuOpen = true;
+        WrContextMenuItem.openSubmenus.set(this.host.nativeElement, this);
+    }
+    /** Bound handlers (= preserves identity for removeEventListener). */
+    onSubmenuEnter = () => {
+        this.cancelClose();
+        // Cursor is inside our pane — keep the whole chain (root + every
+        // ancestor submenu) alive.
+        WrContextMenu.keepChainAlive();
+    };
+    onSubmenuLeave = (event) => {
+        // Only stay open if the cursor is moving into a DESCENDANT submenu
+        // of ours (an item inside our pane opening its own submenu). Moving
+        // back up to an ancestor menu, sideways to a sibling, or completely
+        // off-chain should dismiss this submenu (cascade-on-dispose then
+        // tears down any deeper levels we own).
+        if (this.relatedTargetIsInsideDescendantSubmenu(event))
+            return;
+        this.scheduleClose(SUBMENU_CLOSE_DELAY);
+        // If the cursor left ALL menu panes (root + every submenu), tear
+        // down the whole chain. Otherwise just close this pane and let the
+        // user continue navigating ancestors.
+        if (!this.relatedTargetIsInsideAnyMenu(event)) {
+            WrContextMenu.scheduleChainClose();
+        }
+    };
+    relatedTargetIsInsideAnyMenu(event) {
+        const related = event.relatedTarget;
+        if (!(related instanceof Element))
+            return false;
+        return !!related.closest('.wr-context-menu-overlay');
+    }
+    /**
+     * `true` when the cursor moved from this item directly into the pane
+     * of its own (just-opening) submenu — drilling down. Sibling items
+     * and ancestor menus do NOT count.
+     */
+    relatedTargetIsInsideOwnSubmenu(event) {
+        const related = event.relatedTarget;
+        if (!(related instanceof Element) || !this.submenuRef)
+            return false;
+        return this.submenuRef.overlayElement.contains(related);
+    }
+    /**
+     * `true` when the cursor moved from our submenu pane into another
+     * submenu pane whose owner-item lives INSIDE ours — the user is
+     * drilling further down the chain (e.g., from the Share submenu into
+     * the Export-as submenu). Moving back up the chain returns false so
+     * we close.
+     */
+    relatedTargetIsInsideDescendantSubmenu(event) {
+        const related = event.relatedTarget;
+        if (!(related instanceof Element) || !this.submenuRef)
+            return false;
+        const targetPane = related.closest('.wr-context-menu-overlay');
+        if (!targetPane)
+            return false;
+        const myPane = this.submenuRef.overlayElement;
+        if (targetPane === myPane)
+            return true;
+        // Find the owner-item of the pane the cursor is heading into. If
+        // that owner-item is inside our own pane, the destination is a
+        // descendant submenu.
+        for (const [ownerEl, owner] of WrContextMenuItem.openSubmenus) {
+            if (owner.submenuRef?.overlayElement === targetPane) {
+                return myPane.contains(ownerEl);
+            }
+        }
+        return false;
+    }
+    disposeSubmenu(immediate) {
+        this.cancelOpen();
+        this.cancelClose();
+        const ref = this.submenuRef;
+        if (!ref)
+            return;
+        this.submenuRef = null;
+        this.submenuOpen = false;
+        WrContextMenuItem.openSubmenus.delete(this.host.nativeElement);
+        const pane = ref.overlayElement;
+        pane.removeEventListener('mouseenter', this.onSubmenuEnter);
+        pane.removeEventListener('mouseleave', this.onSubmenuLeave);
+        // Cascade-close any descendant submenus whose owner-item lives inside
+        // the pane we're about to dispose. Without this, when a parent submenu
+        // closes (via hover-out grace timer), a grandchild submenu whose owner
+        // is rendered inside the parent's portal is orphaned — its OverlayRef
+        // stays alive in the DOM with no parent to reach it from.
+        for (const [ownerEl, owner] of WrContextMenuItem.openSubmenus) {
+            if (pane.contains(ownerEl))
+                owner.disposeSubmenu(immediate);
+        }
+        if (immediate) {
+            ref.dispose();
+            return;
+        }
+        pane.classList.remove('wr-context-menu-overlay--open');
+        setTimeout(() => ref.dispose(), SUBMENU_TRANSITION_MS);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrContextMenuItem, isStandalone: true, selector: "wr-context-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "menuitem" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)", "keydown.enter": "activate($event)", "keydown.space": "activate($event)", "keydown.arrowRight": "onArrowRight($event)", "keydown.arrowLeft": "onArrowLeft($event)" }, properties: { "class": "classes()", "attr.tabindex": "-1", "attr.aria-disabled": "disabled() ? true : null", "attr.aria-haspopup": "submenu() ? \"menu\" : null", "attr.aria-expanded": "submenu() ? (submenuOpen ? \"true\" : \"false\") : null" } }, ngImport: i0, template: "@if (icon(); as name) {\n  <wr-icon class=\"wr-context-menu-item__icon\" [name]=\"name\" size=\"14\" />\n}\n<span class=\"wr-context-menu-item__label\"><ng-content /></span>\n@if (submenu()) {\n  <svg\n    class=\"wr-icon__svg wr-context-menu-item__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n}\n", dependencies: [{ kind: "component", type: WrIcon, selector: "wr-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-context-menu-item', encapsulation: ViewEncapsulation.None, host: {
+                        role: 'menuitem',
+                        '[class]': 'classes()',
+                        '[attr.tabindex]': '-1',
+                        '[attr.aria-disabled]': 'disabled() ? true : null',
+                        '[attr.aria-haspopup]': 'submenu() ? "menu" : null',
+                        '[attr.aria-expanded]': 'submenu() ? (submenuOpen ? "true" : "false") : null',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave($event)',
+                        '(keydown.enter)': 'activate($event)',
+                        '(keydown.space)': 'activate($event)',
+                        '(keydown.arrowRight)': 'onArrowRight($event)',
+                        '(keydown.arrowLeft)': 'onArrowLeft($event)',
+                    }, imports: [WrIcon], template: "@if (icon(); as name) {\n  <wr-icon class=\"wr-context-menu-item__icon\" [name]=\"name\" size=\"14\" />\n}\n<span class=\"wr-context-menu-item__label\"><ng-content /></span>\n@if (submenu()) {\n  <svg\n    class=\"wr-icon__svg wr-context-menu-item__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m9 18 6-6-6-6\" />\n  </svg>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], submenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenu", required: false }] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Attach to any element to show a `<wr-context-menu>` at the pointer
+ * position when the user right-clicks (or sends a `contextmenu` event by
+ * any means — long-press on touch, Shift+F10, etc.). The native browser
+ * menu is suppressed for the host element.
+ *
+ * @example
+ * ```html
+ * <div [wrContextMenu]="menu">Right-click me</div>
+ * <wr-context-menu #menu>
+ *   <wr-context-menu-item (click)="copy()">Copy</wr-context-menu-item>
+ *   <wr-context-menu-item (click)="remove()">Delete</wr-context-menu-item>
+ * </wr-context-menu>
+ * ```
+ *
+ * @see https://ngwr.dev/components/context-menu
+ */
+class WrContextMenu {
+    /** Menu to open. Pass a `<wr-context-menu>` template reference. */
+    menu = input.required({ ...(ngDevMode ? { debugName: "menu" } : /* istanbul ignore next */ {}), alias: 'wrContextMenu' });
+    host = inject(ElementRef);
+    overlay = inject(WR_OVERLAY);
+    vcr = inject(ViewContainerRef);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    destroyRef = inject(DestroyRef);
+    overlayRef = null;
+    closingTimer = null;
+    leaveTimer = null;
+    /**
+     * Single open root menu at a time. Submenu items use this to signal
+     * chain-level hover state: when the cursor enters ANY pane in the
+     * chain (root or submenu) `keepChainAlive()` cancels the close timer;
+     * when the cursor leaves ALL panes `scheduleChainClose()` starts it.
+     * The whole chain (root → submenus) tears down through the root's
+     * close (submenus react to their owner-item destroyRef + the static
+     * registry in `WrContextMenuItem`).
+     */
+    static activeRoot = null;
+    /** Called from a submenu pane's mouseenter — keep the whole chain alive. */
+    static keepChainAlive() {
+        WrContextMenu.activeRoot?.cancelLeaveTimer();
+    }
+    /** Called from a submenu pane's mouseleave when the cursor left ALL menus. */
+    static scheduleChainClose() {
+        WrContextMenu.activeRoot?.scheduleLeave();
+    }
+    /**
+     * Open/close animation duration in ms. Matches the longest SCSS
+     * transition on `.wr-context-menu-overlay` (the spring-scale curve).
+     * The directive holds the overlay alive for this long during close
+     * so the exit animation can play before the pane is removed from
+     * the DOM.
+     */
+    static TRANSITION_MS = 220;
+    /**
+     * Grace window after the cursor leaves the root pane. Long enough
+     * for the user to dip momentarily into the gap between the root and
+     * a submenu (or back from a submenu), short enough to feel snappy
+     * on a deliberate hover-out.
+     */
+    static LEAVE_DELAY = 240;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.closeOverlay());
+    }
+    /** @internal Right-click handler — opens at the pointer (or re-positions if already open). */
+    onContextMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Re-open at the new position even if it was already open.
+        // Use page coords (document-relative) so the menu anchors to the
+        // zone it was opened over — scrolling the page carries the menu
+        // along with the content, matching native + PrimeNG behavior.
+        this.closeOverlay();
+        this.openOverlay(event.pageX, event.pageY);
+    }
+    /** Close the menu. */
+    close() {
+        this.closeOverlay();
+    }
+    // Overlay
+    openOverlay(x, y) {
+        // GlobalPositionStrategy uses margins, which led to flaky positioning
+        // (`position: static` inline overridden by our `!important`, etc.).
+        // Use it just to create the overlay, then write the coords directly to
+        // the pane element via `top`/`left` so the menu sits exactly where the
+        // user clicked and never moves until we close it.
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay.position().global(),
+            // `noop` so scroll doesn't dismiss the menu. With absolute coords
+            // pinned to viewport (`position: fixed` in the panel CSS), the menu
+            // visually stays put as the page scrolls underneath.
+            scrollStrategy: this.scrollStrategies.noop(),
+            panelClass: ['wr-context-menu-overlay'],
+        });
+        const portal = new TemplatePortal(this.menu().contentTpl(), this.vcr);
+        this.overlayRef.attach(portal);
+        // Position model: the pane uses `position: fixed` (panel CSS) but we
+        // want the menu to anchor to the DOCUMENT — when the user scrolls,
+        // the menu should travel with the content it was opened over (native
+        // browser + PrimeNG behavior). Strategy:
+        //
+        //   - Record the page coords (pageX/pageY = document-relative).
+        //   - Each frame the user scrolls, set top/left to (pageX/Y minus the
+        //     current scroll offset). At scroll 0 this matches clientX/Y; as
+        //     scroll grows the menu shifts up/left visually, which is exactly
+        //     what `position: absolute` inside an un-fixed container would do
+        //     naturally — we just have to emulate it manually because CDK's
+        //     overlay container is `position: fixed`.
+        const pane = this.overlayRef.overlayElement;
+        pane.style.right = 'auto';
+        pane.style.bottom = 'auto';
+        pane.style.margin = '0';
+        const sync = () => {
+            pane.style.top = `${y - window.scrollY}px`;
+            pane.style.left = `${x - window.scrollX}px`;
+        };
+        sync();
+        // Trigger the open transition on the next frame — adding the class
+        // synchronously with attach would skip the initial 0→1 frame and
+        // the menu would just appear without animating.
+        requestAnimationFrame(() => pane.classList.add('wr-context-menu-overlay--open'));
+        // Hover-out closes the menu after a grace window, unless the
+        // cursor moved INTO a descendant submenu (any other
+        // `.wr-context-menu-overlay`). Re-entering the root cancels the
+        // scheduled close so the user can dip out and back without losing
+        // the menu.
+        const onPaneLeave = (event) => {
+            const related = event.relatedTarget;
+            // Moving into ANY other menu pane (a submenu) keeps the chain
+            // alive — the submenu's own mouseenter will cancel any pending
+            // chain-close. Only schedule when the cursor genuinely left the
+            // chain.
+            if (related instanceof Element && related.closest('.wr-context-menu-overlay'))
+                return;
+            this.scheduleLeave();
+        };
+        const onPaneEnter = () => this.cancelLeaveTimer();
+        pane.addEventListener('mouseleave', onPaneLeave);
+        pane.addEventListener('mouseenter', onPaneEnter);
+        WrContextMenu.activeRoot = this;
+        this.overlayRef.detachments().subscribe(() => {
+            pane.removeEventListener('mouseleave', onPaneLeave);
+            pane.removeEventListener('mouseenter', onPaneEnter);
+        });
+        // Capture-phase listener on document catches scroll events from ANY
+        // ancestor (window, html, body, custom scroll containers), so the
+        // menu stays anchored to the click position even inside scrollable
+        // layouts.
+        document.addEventListener('scroll', sync, { capture: true, passive: true });
+        // On resize the page layout reflows — the original pageX/pageY no
+        // longer points at whatever the user right-clicked. Dismiss the menu
+        // rather than dragging it across a now-stale coordinate (matches
+        // PrimeNG / native behavior).
+        const onResize = () => this.closeOverlay();
+        window.addEventListener('resize', onResize, { passive: true });
+        this.overlayRef.detachments().subscribe(() => {
+            document.removeEventListener('scroll', sync, { capture: true });
+            window.removeEventListener('resize', onResize);
+        });
+        // The right-click that opens the menu still has `mouseup` + `auxclick`
+        // events pending. CDK's `outsidePointerEvents()` listens to pointerdown
+        // / auxclick and would fire on those — closing the menu the instant
+        // the user lifts their finger. Two-part guard:
+        //   1. Track the open timestamp.
+        //   2. Ignore any outside events that arrive within a short window
+        //      after the open (long enough to cover the original mouseup +
+        //      auxclick, short enough that a deliberate second click is
+        //      still respected).
+        const openedAt = performance.now();
+        const ref = this.overlayRef;
+        ref
+            .outsidePointerEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            if (performance.now() - openedAt < 200)
+                return;
+            this.closeOverlay();
+        });
+        this.overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(event => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeOverlay();
+                this.host.nativeElement.focus();
+            }
+        });
+    }
+    closeOverlay() {
+        if (!this.overlayRef)
+            return;
+        this.cancelLeaveTimer();
+        if (WrContextMenu.activeRoot === this)
+            WrContextMenu.activeRoot = null;
+        // Submenu panes live in the CDK overlay container, not inside the
+        // root pane's view — destroyRef cascade through portal detach
+        // doesn't reach them. Close them all explicitly first so they
+        // don't float when the root is dismissed (outside-click, Esc, etc).
+        WrContextMenuItem.disposeAll(false);
+        const ref = this.overlayRef;
+        const pane = ref.overlayElement;
+        // Detach immediately would skip the exit animation. Remove the open
+        // class first so the SCSS transition runs back to the default
+        // (faded + scaled-down) state, then dispose after the transition.
+        pane.classList.remove('wr-context-menu-overlay--open');
+        if (this.closingTimer !== null)
+            clearTimeout(this.closingTimer);
+        this.closingTimer = setTimeout(() => {
+            ref.dispose();
+            this.closingTimer = null;
+        }, WrContextMenu.TRANSITION_MS);
+        // Mark immediately so a subsequent right-click opens a fresh menu
+        // rather than landing on the disposing one.
+        this.overlayRef = null;
+    }
+    cancelLeaveTimer() {
+        if (this.leaveTimer !== null) {
+            clearTimeout(this.leaveTimer);
+            this.leaveTimer = null;
+        }
+    }
+    scheduleLeave() {
+        this.cancelLeaveTimer();
+        this.leaveTimer = setTimeout(() => {
+            this.leaveTimer = null;
+            this.closeOverlay();
+        }, WrContextMenu.LEAVE_DELAY);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrContextMenu, isStandalone: true, selector: "[wrContextMenu]", inputs: { menu: { classPropertyName: "menu", publicName: "wrContextMenu", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "contextmenu": "onContextMenu($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wrContextMenu]',
+                    host: {
+                        '(contextmenu)': 'onContextMenu($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrContextMenu", required: true }] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Container for the rows shown when a {@link WrContextMenu} opens.
+ * The component itself doesn't render; the directive portals the inner
+ * template into an overlay positioned at the pointer.
+ *
+ * @example
+ * ```html
+ * <div [wrContextMenu]="menu">Right-click me</div>
+ * <wr-context-menu #menu>
+ *   <wr-context-menu-item icon="copy" (click)="copy()">Copy</wr-context-menu-item>
+ *   <wr-context-menu-item icon="trash" (click)="remove()">Delete</wr-context-menu-item>
+ * </wr-context-menu>
+ * ```
+ */
+class WrContextMenuPanel {
+    /** The internal template the directive portals into the overlay. @internal */
+    contentTpl = viewChild.required(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrContextMenuPanel, isStandalone: true, selector: "wr-context-menu", host: { styleAttribute: "display:none" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["wrContextMenu"], ngImport: i0, template: '<ng-template><div class="wr-context-menu" role="menu"><ng-content /></div></ng-template>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-context-menu',
+                    template: '<ng-template><div class="wr-context-menu" role="menu"><ng-content /></div></ng-template>',
+                    exportAs: 'wrContextMenu',
+                    encapsulation: ViewEncapsulation.None,
+                    host: { style: 'display:none' },
+                }]
+        }], propDecorators: { contentTpl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Thin horizontal separator inside a `<wr-context-menu>`. Use it to
+ * group related items (e.g., a destructive action below a divider, or
+ * a "More" section below the primary items).
+ *
+ * @example
+ * ```html
+ * <wr-context-menu #menu>
+ *   <wr-context-menu-item (click)="copy()">Copy</wr-context-menu-item>
+ *   <wr-context-menu-item (click)="paste()">Paste</wr-context-menu-item>
+ *   <wr-context-menu-divider />
+ *   <wr-context-menu-item (click)="remove()">Delete</wr-context-menu-item>
+ * </wr-context-menu>
+ * ```
+ */
+class WrContextMenuDivider {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: WrContextMenuDivider, isStandalone: true, selector: "wr-context-menu-divider", host: { attributes: { "role": "separator", "aria-orientation": "horizontal" }, classAttribute: "wr-context-menu-divider" }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrContextMenuDivider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-context-menu-divider',
+                    template: '',
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'wr-context-menu-divider',
+                        role: 'separator',
+                        'aria-orientation': 'horizontal',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrContextMenu, WrContextMenuDivider, WrContextMenuItem, WrContextMenuPanel };
+//# sourceMappingURL=ngwr-context-menu.mjs.map