ng-primitives 0.115.2 → 0.117.0

package/fesm2022/ng-primitives-context-menu.mjs

@@ -0,0 +1,612 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, Directive, output, computed, Injector, ViewContainerRef, signal } from '@angular/core';
+import { provideFocusTrapState } from 'ng-primitives/focus-trap';
+import { ngpMenu, provideMenuState, ngpMenuItem, provideMenuItemState, ngpMenuItemCheckbox, provideMenuItemCheckboxState, injectMenuItemCheckboxState, injectMenuItemRadioState, ngpMenuItemRadio, provideMenuItemRadioState, ngpMenuItemRadioGroup, provideMenuItemRadioGroupState, ngpSubmenuTrigger, provideSubmenuTriggerState, NgpSubmenuTriggerStateToken, NgpMenuTriggerStateToken, NgpSubmenuTrigger, provideMenuTriggerState } from 'ng-primitives/menu';
+import { ngpRovingFocusGroup, provideRovingFocusGroupState, ngpRovingFocusItem, provideRovingFocusItemState } from 'ng-primitives/roving-focus';
+import { injectElementRef } from 'ng-primitives/internal';
+import { dataBinding, createPrimitive, controlled, styleBinding, listener, onDestroy } from 'ng-primitives/state';
+import { coerceOffset, coerceFlip, createOverlay, coerceShift } from 'ng-primitives/portal';
+
+const defaultContextMenuConfig = {
+    offset: 2,
+    flip: true,
+    container: 'body',
+    scrollBehavior: 'close',
+    shift: undefined,
+};
+const NgpContextMenuConfigToken = new InjectionToken('NgpContextMenuConfigToken');
+/**
+ * Provide the default Context Menu configuration
+ * @param config The Context Menu configuration
+ * @returns The provider
+ */
+function provideContextMenuConfig(config) {
+    return [
+        {
+            provide: NgpContextMenuConfigToken,
+            useValue: { ...defaultContextMenuConfig, ...config },
+        },
+    ];
+}
+/**
+ * Inject the Context Menu configuration
+ * @returns The global Context Menu configuration
+ */
+function injectContextMenuConfig() {
+    return inject(NgpContextMenuConfigToken, { optional: true }) ?? defaultContextMenuConfig;
+}
+
+/**
+ * The `NgpContextMenu` is a container for context menu items.
+ */
+class NgpContextMenu {
+    constructor() {
+        /**
+         * Whether focus should wrap around when reaching the end of the menu.
+         * @default true
+         */
+        this.wrap = input(true, ...(ngDevMode ? [{ debugName: "wrap", alias: 'ngpContextMenuWrap',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpContextMenuWrap',
+                transform: booleanAttribute,
+            }]));
+        this.state = ngpMenu({ wrap: this.wrap });
+        ngpRovingFocusGroup({ inherit: false, wrap: this.wrap });
+    }
+    /** @internal Close the menu and any parent menus */
+    closeAllMenus(origin) {
+        this.state.closeAllMenus(origin);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpContextMenu, isStandalone: true, selector: "[ngpContextMenu]", inputs: { wrap: { classPropertyName: "wrap", publicName: "ngpContextMenuWrap", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            provideRovingFocusGroupState({ inherit: false }),
+            provideMenuState({ inherit: false }),
+            provideFocusTrapState(),
+        ], exportAs: ["ngpContextMenu"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenu, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpContextMenu]',
+                    exportAs: 'ngpContextMenu',
+                    providers: [
+                        provideRovingFocusGroupState({ inherit: false }),
+                        provideMenuState({ inherit: false }),
+                        provideFocusTrapState(),
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuWrap", required: false }] }] } });
+
+/**
+ * The `NgpContextMenuItem` directive represents a context menu item.
+ */
+class NgpContextMenuItem {
+    constructor() {
+        /** Whether the menu item is disabled */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpContextMenuItemDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpContextMenuItemDisabled',
+                transform: booleanAttribute,
+            }]));
+        /** Whether the menu should close when this item is selected */
+        this.closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect", alias: 'ngpContextMenuItemCloseOnSelect',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpContextMenuItemCloseOnSelect',
+                transform: booleanAttribute,
+            }]));
+        ngpMenuItem({ disabled: this.disabled, closeOnSelect: this.closeOnSelect });
+        ngpRovingFocusItem({ disabled: this.disabled });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpContextMenuItem, isStandalone: true, selector: "[ngpContextMenuItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "ngpContextMenuItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "ngpContextMenuItemCloseOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideMenuItemState(), provideRovingFocusItemState()], exportAs: ["ngpContextMenuItem"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpContextMenuItem]',
+                    exportAs: 'ngpContextMenuItem',
+                    providers: [provideMenuItemState(), provideRovingFocusItemState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuItemDisabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuItemCloseOnSelect", required: false }] }] } });
+
+/**
+ * The `NgpContextMenuItemCheckbox` directive represents a context menu item that can be toggled on and off.
+ */
+class NgpContextMenuItemCheckbox {
+    constructor() {
+        /** Whether the checkbox is checked */
+        this.checked = input(false, ...(ngDevMode ? [{ debugName: "checked", alias: 'ngpContextMenuItemCheckboxChecked',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpContextMenuItemCheckboxChecked',
+                transform: booleanAttribute,
+            }]));
+        /** Event emitted when the checked state changes */
+        this.checkedChange = output({
+            alias: 'ngpContextMenuItemCheckboxCheckedChange',
+        });
+        /** Whether the menu item checkbox is disabled */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpContextMenuItemCheckboxDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpContextMenuItemCheckboxDisabled',
+                transform: booleanAttribute,
+            }]));
+        ngpMenuItemCheckbox({
+            checked: this.checked,
+            disabled: this.disabled,
+            onCheckedChange: value => this.checkedChange.emit(value),
+        });
+        ngpRovingFocusItem({ disabled: this.disabled });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItemCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpContextMenuItemCheckbox, isStandalone: true, selector: "[ngpContextMenuItemCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "ngpContextMenuItemCheckboxChecked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpContextMenuItemCheckboxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "ngpContextMenuItemCheckboxCheckedChange" }, providers: [provideMenuItemCheckboxState(), provideRovingFocusItemState()], exportAs: ["ngpContextMenuItemCheckbox"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItemCheckbox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpContextMenuItemCheckbox]',
+                    exportAs: 'ngpContextMenuItemCheckbox',
+                    providers: [provideMenuItemCheckboxState(), provideRovingFocusItemState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuItemCheckboxChecked", required: false }] }], checkedChange: [{ type: i0.Output, args: ["ngpContextMenuItemCheckboxCheckedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuItemCheckboxDisabled", required: false }] }] } });
+
+/**
+ * The `NgpContextMenuItemIndicator` directive renders inside a checkbox or radio context menu item
+ * and exposes `data-checked` based on the parent item's checked state.
+ */
+class NgpContextMenuItemIndicator {
+    constructor() {
+        const element = injectElementRef();
+        const checkboxState = injectMenuItemCheckboxState({ optional: true });
+        const radioState = injectMenuItemRadioState({ optional: true });
+        const checked = computed(() => checkboxState()?.checked() ?? radioState()?.checked() ?? false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+        dataBinding(element, 'data-checked', checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItemIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgpContextMenuItemIndicator, isStandalone: true, selector: "[ngpContextMenuItemIndicator]", exportAs: ["ngpContextMenuItemIndicator"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItemIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpContextMenuItemIndicator]',
+                    exportAs: 'ngpContextMenuItemIndicator',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The `NgpContextMenuItemRadio` directive represents a radio context menu item within a radio group.
+ */
+class NgpContextMenuItemRadio {
+    constructor() {
+        /** The value this radio item represents */
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value", alias: 'ngpContextMenuItemRadioValue' }] : [{
+                alias: 'ngpContextMenuItemRadioValue',
+            }]));
+        /** Whether the radio item is disabled */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpContextMenuItemRadioDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpContextMenuItemRadioDisabled',
+                transform: booleanAttribute,
+            }]));
+        ngpMenuItemRadio({ value: this.value, disabled: this.disabled });
+        ngpRovingFocusItem({ disabled: this.disabled });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItemRadio, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpContextMenuItemRadio, isStandalone: true, selector: "[ngpContextMenuItemRadio]", inputs: { value: { classPropertyName: "value", publicName: "ngpContextMenuItemRadioValue", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpContextMenuItemRadioDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideMenuItemRadioState(), provideRovingFocusItemState()], exportAs: ["ngpContextMenuItemRadio"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItemRadio, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpContextMenuItemRadio]',
+                    exportAs: 'ngpContextMenuItemRadio',
+                    providers: [provideMenuItemRadioState(), provideRovingFocusItemState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuItemRadioValue", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuItemRadioDisabled", required: false }] }] } });
+
+/**
+ * The `NgpContextMenuItemRadioGroup` directive represents a group of radio context menu items.
+ */
+class NgpContextMenuItemRadioGroup {
+    constructor() {
+        /** The current value of the radio group */
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value", alias: 'ngpContextMenuItemRadioGroupValue' }] : [{
+                alias: 'ngpContextMenuItemRadioGroupValue',
+            }]));
+        /** Event emitted when the value changes */
+        this.valueChange = output({
+            alias: 'ngpContextMenuItemRadioGroupValueChange',
+        });
+        ngpMenuItemRadioGroup({
+            value: this.value,
+            onValueChange: value => this.valueChange.emit(value),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItemRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpContextMenuItemRadioGroup, isStandalone: true, selector: "[ngpContextMenuItemRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "ngpContextMenuItemRadioGroupValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "ngpContextMenuItemRadioGroupValueChange" }, providers: [provideMenuItemRadioGroupState()], exportAs: ["ngpContextMenuItemRadioGroup"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuItemRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpContextMenuItemRadioGroup]',
+                    exportAs: 'ngpContextMenuItemRadioGroup',
+                    providers: [provideMenuItemRadioGroupState()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuItemRadioGroupValue", required: false }] }], valueChange: [{ type: i0.Output, args: ["ngpContextMenuItemRadioGroupValueChange"] }] } });
+
+/**
+ * The `NgpContextMenuSubmenuTrigger` directive turns a context menu item into a submenu trigger.
+ */
+class NgpContextMenuSubmenuTrigger {
+    constructor() {
+        /**
+         * Access the submenu template ref.
+         */
+        this.menu = input(undefined, ...(ngDevMode ? [{ debugName: "menu", alias: 'ngpContextMenuSubmenuTrigger' }] : [{
+                alias: 'ngpContextMenuSubmenuTrigger',
+            }]));
+        /**
+         * Define if the trigger should be disabled.
+         * @default false
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpContextMenuSubmenuTriggerDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpContextMenuSubmenuTriggerDisabled',
+                transform: booleanAttribute,
+            }]));
+        /**
+         * Define the placement of the submenu relative to the trigger.
+         * @default 'right-start'
+         */
+        this.placement = input('right-start', ...(ngDevMode ? [{ debugName: "placement", alias: 'ngpContextMenuSubmenuTriggerPlacement' }] : [{
+                alias: 'ngpContextMenuSubmenuTriggerPlacement',
+            }]));
+        /**
+         * Define the offset of the submenu relative to the trigger.
+         * @default 0
+         */
+        this.offset = input(0, ...(ngDevMode ? [{ debugName: "offset", alias: 'ngpContextMenuSubmenuTriggerOffset',
+                transform: coerceOffset }] : [{
+                alias: 'ngpContextMenuSubmenuTriggerOffset',
+                transform: coerceOffset,
+            }]));
+        /**
+         * Define whether the submenu should flip when there is not enough space.
+         * @default true
+         */
+        this.flip = input(true, ...(ngDevMode ? [{ debugName: "flip", alias: 'ngpContextMenuSubmenuTriggerFlip',
+                transform: coerceFlip }] : [{
+                alias: 'ngpContextMenuSubmenuTriggerFlip',
+                transform: coerceFlip,
+            }]));
+        this.state = ngpSubmenuTrigger({
+            disabled: this.disabled,
+            menu: this.menu,
+            placement: this.placement,
+            offset: this.offset,
+            flip: this.flip,
+        });
+    }
+    show() {
+        this.state.show();
+    }
+    hide(origin = 'program') {
+        this.state.hide(origin);
+    }
+    toggle(event) {
+        this.state.toggle(event);
+    }
+    focus(origin = 'program') {
+        this.state.focus(origin);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuSubmenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpContextMenuSubmenuTrigger, isStandalone: true, selector: "[ngpContextMenuSubmenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "ngpContextMenuSubmenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpContextMenuSubmenuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "ngpContextMenuSubmenuTriggerPlacement", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpContextMenuSubmenuTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpContextMenuSubmenuTriggerFlip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            provideSubmenuTriggerState(),
+            { provide: NgpMenuTriggerStateToken, useExisting: NgpSubmenuTriggerStateToken },
+            // Provide as NgpSubmenuTrigger so ngpMenuItem can detect this is a submenu trigger
+            { provide: NgpSubmenuTrigger, useExisting: NgpContextMenuSubmenuTrigger },
+        ], exportAs: ["ngpContextMenuSubmenuTrigger"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuSubmenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpContextMenuSubmenuTrigger]',
+                    exportAs: 'ngpContextMenuSubmenuTrigger',
+                    providers: [
+                        provideSubmenuTriggerState(),
+                        { provide: NgpMenuTriggerStateToken, useExisting: NgpSubmenuTriggerStateToken },
+                        // Provide as NgpSubmenuTrigger so ngpMenuItem can detect this is a submenu trigger
+                        { provide: NgpSubmenuTrigger, useExisting: NgpContextMenuSubmenuTrigger },
+                    ],
+                }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuSubmenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuSubmenuTriggerDisabled", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuSubmenuTriggerPlacement", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuSubmenuTriggerOffset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuSubmenuTriggerFlip", required: false }] }] } });
+
+/** Duration in ms before a long-press fires. */
+const LONG_PRESS_DURATION = 700;
+/** Movement threshold in px to cancel a long-press. */
+const LONG_PRESS_MOVE_THRESHOLD = 10;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-function
+const noop = () => { };
+const [NgpContextMenuTriggerStateToken, ngpContextMenuTrigger, _injectContextMenuTriggerState, provideContextMenuTriggerState,] = createPrimitive('NgpContextMenuTrigger', ({ disabled: _disabled = signal(false), menu: _menu = signal(undefined), offset: _offset = signal(2), flip: _flip = signal(true), context: _context = signal(undefined), container, scrollBehavior, shift, }) => {
+    const element = injectElementRef();
+    const injector = inject(Injector);
+    const viewContainerRef = inject(ViewContainerRef);
+    // Controlled properties
+    const menu = controlled(_menu);
+    const disabled = controlled(_disabled);
+    const flip = controlled(_flip);
+    const offset = controlled(_offset);
+    const context = controlled(_context);
+    // Internal state
+    const overlay = signal(null, ...(ngDevMode ? [{ debugName: "overlay" }] : []));
+    const open = computed(() => overlay()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    const openOrigin = signal('program', ...(ngDevMode ? [{ debugName: "openOrigin" }] : []));
+    const cursorPosition = signal(null, ...(ngDevMode ? [{ debugName: "cursorPosition" }] : []));
+    // Host bindings
+    dataBinding(element, 'data-open', open);
+    // Prevent iOS text selection and callout on long-press.
+    // Only apply when the trigger is enabled so disabled triggers retain native behavior.
+    styleBinding(element, '-webkit-touch-callout', () => (disabled?.() ? null : 'none'));
+    // Long-press state
+    let longPressTimer = null;
+    let longPressStartX = 0;
+    let longPressStartY = 0;
+    let longPressTriggered = false;
+    // Event listeners
+    listener(element, 'contextmenu', onContextMenu);
+    listener(element, 'pointerdown', onPointerDown);
+    listener(element, 'pointermove', onPointerMove);
+    listener(element, 'pointerup', onPointerUp);
+    listener(element, 'pointercancel', onPointerCancel);
+    function onContextMenu(event) {
+        if (disabled?.()) {
+            return;
+        }
+        event.preventDefault();
+        // If long-press already triggered, don't re-open
+        if (longPressTriggered) {
+            longPressTriggered = false;
+            return;
+        }
+        cursorPosition.set({ x: event.clientX, y: event.clientY });
+        openOrigin.set('mouse');
+        if (open()) {
+            // Already open - reposition by updating cursor position and triggering reposition
+            overlay()?.updatePosition();
+        }
+        else {
+            showMenu();
+        }
+    }
+    function onPointerDown(event) {
+        if (event.pointerType !== 'touch' || disabled?.()) {
+            return;
+        }
+        longPressTriggered = false;
+        longPressStartX = event.clientX;
+        longPressStartY = event.clientY;
+        longPressTimer = setTimeout(() => {
+            longPressTriggered = true;
+            cursorPosition.set({ x: longPressStartX, y: longPressStartY });
+            openOrigin.set('touch');
+            showMenu();
+        }, LONG_PRESS_DURATION);
+    }
+    function onPointerMove(event) {
+        if (event.pointerType !== 'touch' || !longPressTimer) {
+            return;
+        }
+        const dx = event.clientX - longPressStartX;
+        const dy = event.clientY - longPressStartY;
+        if (Math.sqrt(dx * dx + dy * dy) > LONG_PRESS_MOVE_THRESHOLD) {
+            cancelLongPress();
+        }
+    }
+    function onPointerUp(event) {
+        if (event.pointerType !== 'touch') {
+            return;
+        }
+        cancelLongPress();
+    }
+    function onPointerCancel(event) {
+        if (event.pointerType !== 'touch') {
+            return;
+        }
+        cancelLongPress();
+    }
+    function cancelLongPress() {
+        if (longPressTimer) {
+            clearTimeout(longPressTimer);
+            longPressTimer = null;
+        }
+        longPressTriggered = false;
+    }
+    onDestroy(() => cancelLongPress());
+    function showMenu() {
+        if (!overlay()) {
+            createOverlayInstance();
+        }
+        overlay()?.show();
+    }
+    function show(origin = 'program') {
+        openOrigin.set(origin);
+        showMenu();
+    }
+    function hide(origin = 'program') {
+        const currentOverlay = overlay();
+        if (!currentOverlay) {
+            return;
+        }
+        currentOverlay.hide({ origin });
+    }
+    function createOverlayInstance() {
+        const menuContent = menu?.();
+        if (!menuContent) {
+            throw new Error('Context menu must be either a TemplateRef or a ComponentType');
+        }
+        const config = {
+            content: menuContent,
+            triggerElement: element.nativeElement,
+            viewContainerRef,
+            injector,
+            context,
+            container: container?.(),
+            offset: offset(),
+            flip: flip(),
+            shift,
+            placement: signal('right-start'),
+            closeOnOutsideClick: true,
+            closeOnEscape: true,
+            treatTriggerClickAsOutside: true,
+            restoreFocus: false,
+            scrollBehaviour: scrollBehavior?.() ?? 'close',
+            overlayType: 'menu',
+            position: cursorPosition,
+            trackPosition: true,
+        };
+        overlay.set(createOverlay(config));
+    }
+    function setPointerOverContent(_isOver) {
+        // No-op for context menu
+    }
+    // Set the compat state on NgpMenuTriggerStateToken so NgpMenu can find it.
+    // NgpMenu injects this token and calls hide(), openOrigin(), setPointerOverContent() on it.
+    const menuTriggerToken = inject(NgpMenuTriggerStateToken, { optional: true });
+    // eslint-disable-next-line @angular-eslint/no-uncalled-signals -- checking inject() nullability, not signal value
+    if (menuTriggerToken) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        menuTriggerToken.set({
+            menu,
+            placement: signal('bottom-start'),
+            open,
+            offset,
+            disabled,
+            flip,
+            context,
+            openOrigin,
+            setDisabled: noop,
+            setFlip: noop,
+            setPlacement: noop,
+            setOffset: noop,
+            setContext: noop,
+            show,
+            hide,
+            toggle: noop,
+            setMenu: noop,
+            setPointerOverContent,
+        });
+    }
+    return {
+        open,
+        openOrigin,
+        show,
+        hide,
+        setPointerOverContent,
+    };
+});
+function injectContextMenuTriggerState() {
+    return _injectContextMenuTriggerState();
+}
+
+/**
+ * The `NgpContextMenuTrigger` directive allows you to turn an element into a context menu trigger.
+ * Right-clicking or long-pressing the element will open the specified menu at the cursor position.
+ */
+class NgpContextMenuTrigger {
+    constructor() {
+        /**
+         * Access the global context menu configuration.
+         */
+        this.config = injectContextMenuConfig();
+        /**
+         * The menu template ref or ComponentType to display.
+         */
+        this.menu = input(undefined, ...(ngDevMode ? [{ debugName: "menu", alias: 'ngpContextMenuTrigger' }] : [{
+                alias: 'ngpContextMenuTrigger',
+            }]));
+        /**
+         * Define if the trigger should be disabled.
+         * @default false
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", alias: 'ngpContextMenuTriggerDisabled',
+                transform: booleanAttribute }] : [{
+                alias: 'ngpContextMenuTriggerDisabled',
+                transform: booleanAttribute,
+            }]));
+        /**
+         * Define the offset of the context menu relative to the cursor position.
+         * @default 2
+         */
+        this.offset = input(this.config.offset, ...(ngDevMode ? [{ debugName: "offset", alias: 'ngpContextMenuTriggerOffset',
+                transform: coerceOffset }] : [{
+                alias: 'ngpContextMenuTriggerOffset',
+                transform: coerceOffset,
+            }]));
+        /**
+         * Define whether the context menu should flip when there is not enough space.
+         * @default true
+         */
+        this.flip = input(this.config.flip, ...(ngDevMode ? [{ debugName: "flip", alias: 'ngpContextMenuTriggerFlip',
+                transform: coerceFlip }] : [{
+                alias: 'ngpContextMenuTriggerFlip',
+                transform: coerceFlip,
+            }]));
+        /**
+         * Configure shift behavior to keep the context menu in view.
+         * @default undefined
+         */
+        this.shift = input(this.config.shift, ...(ngDevMode ? [{ debugName: "shift", alias: 'ngpContextMenuTriggerShift',
+                transform: coerceShift }] : [{
+                alias: 'ngpContextMenuTriggerShift',
+                transform: coerceShift,
+            }]));
+        /**
+         * Define the container in which the context menu should be attached.
+         * @default document.body
+         */
+        this.container = input(this.config.container, ...(ngDevMode ? [{ debugName: "container", alias: 'ngpContextMenuTriggerContainer' }] : [{
+                alias: 'ngpContextMenuTriggerContainer',
+            }]));
+        /**
+         * Defines how the context menu behaves when the window is scrolled.
+         * @default 'close'
+         */
+        this.scrollBehavior = input(this.config.scrollBehavior, ...(ngDevMode ? [{ debugName: "scrollBehavior", alias: 'ngpContextMenuTriggerScrollBehavior' }] : [{
+                alias: 'ngpContextMenuTriggerScrollBehavior',
+            }]));
+        /**
+         * Provide context to the menu. This can be used to pass data to the menu content.
+         */
+        this.context = input(undefined, ...(ngDevMode ? [{ debugName: "context", alias: 'ngpContextMenuTriggerContext' }] : [{
+                alias: 'ngpContextMenuTriggerContext',
+            }]));
+        /**
+         * The context menu trigger state.
+         */
+        this.state = ngpContextMenuTrigger({
+            disabled: this.disabled,
+            menu: this.menu,
+            offset: this.offset,
+            flip: this.flip,
+            shift: this.shift(),
+            container: this.container,
+            scrollBehavior: this.scrollBehavior,
+            context: this.context,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.9", type: NgpContextMenuTrigger, isStandalone: true, selector: "[ngpContextMenuTrigger]", inputs: { menu: { classPropertyName: "menu", publicName: "ngpContextMenuTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "ngpContextMenuTriggerDisabled", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "ngpContextMenuTriggerOffset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "ngpContextMenuTriggerFlip", isSignal: true, isRequired: false, transformFunction: null }, shift: { classPropertyName: "shift", publicName: "ngpContextMenuTriggerShift", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "ngpContextMenuTriggerContainer", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "ngpContextMenuTriggerScrollBehavior", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ngpContextMenuTriggerContext", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideContextMenuTriggerState(), provideMenuTriggerState()], exportAs: ["ngpContextMenuTrigger"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgpContextMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpContextMenuTrigger]',
+                    exportAs: 'ngpContextMenuTrigger',
+                    providers: [provideContextMenuTriggerState(), provideMenuTriggerState()],
+                }]
+        }], propDecorators: { menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuTriggerDisabled", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuTriggerOffset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuTriggerFlip", required: false }] }], shift: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuTriggerShift", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuTriggerContainer", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuTriggerScrollBehavior", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngpContextMenuTriggerContext", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgpContextMenu, NgpContextMenuItem, NgpContextMenuItemCheckbox, NgpContextMenuItemIndicator, NgpContextMenuItemRadio, NgpContextMenuItemRadioGroup, NgpContextMenuSubmenuTrigger, NgpContextMenuTrigger, injectContextMenuTriggerState, ngpContextMenuTrigger, provideContextMenuConfig, provideContextMenuTriggerState };
+//# sourceMappingURL=ng-primitives-context-menu.mjs.map