@radix-ng/primitives 0.51.0 → 1.0.0-beta.1

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

@@ -1,457 +1,173 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, numberAttribute, Input, Directive, inject, ElementRef, EventEmitter, Output, NgModule } from '@angular/core';
-import { CdkContextMenuTrigger, MENU_TRIGGER, MenuStack, MENU_STACK, CdkMenu, CdkMenuItem, CDK_MENU } from '@angular/cdk/menu';
-import { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, startWith, pairwise } from 'rxjs';
-import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import * as i1 from '@radix-ng/primitives/separator';
-import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
+import { inject, Directive, input, booleanAttribute, numberAttribute, DestroyRef, NgModule } from '@angular/core';
+import { createContext } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/menu';
+import { RdxMenuRoot } from '@radix-ng/primitives/menu';
+import { RdxPopper } from '@radix-ng/primitives/popper';
 
-var ContextMenuSide;
-(function (ContextMenuSide) {
-    ContextMenuSide["Top"] = "top";
-    ContextMenuSide["Right"] = "right";
-    ContextMenuSide["Bottom"] = "bottom";
-    ContextMenuSide["Left"] = "left";
-})(ContextMenuSide || (ContextMenuSide = {}));
-const ContextMenuPositions = {
-    top: {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'bottom',
-        offsetX: 0,
-        offsetY: 0
-    },
-    right: {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetX: 0,
-        offsetY: 0
-    },
-    bottom: {
-        originX: 'start',
-        originY: 'bottom',
-        overlayX: 'start',
-        overlayY: 'top',
-        offsetX: 0,
-        offsetY: 0
-    },
-    left: {
-        originX: 'start',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'top',
-        offsetX: 0,
-        offsetY: 0
-    }
+const [injectRdxContextMenuRootContext, provideRdxContextMenuRootContext] = createContext('RdxContextMenuRootContext');
+const contextFactory = () => {
+    const root = inject(RdxContextMenuRoot);
+    return {
+        isOpen: root.menuRoot.open,
+        disabled: root.menuRoot.disabled,
+        openAt: (clientX, clientY, autoFocus) => root.openAt(clientX, clientY, autoFocus),
+        close: () => root.menuRoot.close()
+    };
 };
-class RdxContextMenuTriggerDirective extends CdkContextMenuTrigger {
-    constructor() {
-        super(...arguments);
-        this.menuPosition = [{ ...ContextMenuPositions[ContextMenuSide.Bottom] }];
-        this.disabled = false;
-        this.onOpenChange = outputFromObservable(this.opened);
-    }
-    set rdxContextMenuTrigger(value) {
-        this.menuTemplateRef = value;
-    }
-    set alignOffset(value) {
-        this.defaultPosition.offsetX = value;
-    }
-    get defaultPosition() {
-        return this.menuPosition[0];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: RdxContextMenuTriggerDirective, isStandalone: true, selector: "[rdxContextMenuTrigger]", inputs: { rdxContextMenuTrigger: "rdxContextMenuTrigger", alignOffset: ["alignOffset", "alignOffset", numberAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { onOpenChange: "onOpenChange" }, host: { listeners: { "contextmenu": "_openOnContextMenu($event)" }, properties: { "attr.data-state": "isOpen() ? 'open': 'closed'", "attr.data-disabled": "disabled ? '' : null" } }, providers: [
-            { provide: MENU_TRIGGER, useExisting: RdxContextMenuTriggerDirective },
-            { provide: MENU_STACK, useClass: MenuStack }
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuTriggerDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxContextMenuTrigger]',
-                    standalone: true,
-                    host: {
-                        '[attr.data-state]': "isOpen() ? 'open': 'closed'",
-                        '[attr.data-disabled]': "disabled ? '' : null",
-                        '(contextmenu)': '_openOnContextMenu($event)'
-                    },
-                    providers: [
-                        { provide: MENU_TRIGGER, useExisting: RdxContextMenuTriggerDirective },
-                        { provide: MENU_STACK, useClass: MenuStack }
-                    ]
-                }]
-        }], propDecorators: { rdxContextMenuTrigger: [{
-                type: Input
-            }], alignOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }] } });
-
-class RdxContextMenuContentDirective extends CdkMenu {
+/**
+ * Groups all parts of a context menu. Composes the Menu primitive but, instead of anchoring the
+ * popup to a trigger element, anchors it to the pointer position captured by `rdxContextMenuTrigger`.
+ *
+ * Reuse the Menu popup parts inside it — `rdxMenuPositioner`, `rdxMenuPopup`, `rdxMenuItem`,
+ * `rdxMenuCheckboxItem`, `rdxMenuRadioGroup`, `rdxMenuSubTrigger`, `rdxMenuSeparator`, … all behave
+ * identically here.
+ */
+class RdxContextMenuRoot {
     constructor() {
-        super();
-        this.highlighted = new Subject();
-        this.menuTrigger = inject(RdxContextMenuTriggerDirective, { optional: true });
-        this.onEscapeKeyDown = () => undefined;
-        this.closeOnEscape = true;
-        this.highlighted.pipe(startWith(null), pairwise(), takeUntilDestroyed()).subscribe(([prev, item]) => {
-            if (prev) {
-                prev.highlighted = false;
-            }
-            if (item) {
-                item.highlighted = true;
-            }
-        });
-    }
-    updateActiveItem(item) {
-        this.keyManager.updateActiveItem(item);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxContextMenuContentDirective, isStandalone: true, selector: "[rdxContextMenuContent]", inputs: { onEscapeKeyDown: "onEscapeKeyDown", closeOnEscape: "closeOnEscape" }, host: { properties: { "attr.role": "'menu'", "attr.data-state": "menuTrigger?.isOpen() ? 'open': 'closed'", "attr.data-orientation": "orientation" } }, providers: [
-            {
-                provide: CdkMenu,
-                useExisting: RdxContextMenuContentDirective
-            }
-        ], usesInheritance: true, ngImport: i0 }); }
+        this.menuRoot = inject(RdxMenuRoot);
+        this.popper = inject(RdxPopper);
+    }
+    /**
+     * Open the menu with the popup anchored at the given viewport coordinates.
+     *
+     * `autoFocus` defaults to `'popup'` so a right-click opens with the popup focused but no item
+     * highlighted (matching Base UI's pointer behavior). Pass `'first'` for keyboard opening.
+     */
+    openAt(clientX, clientY, autoFocus = 'popup') {
+        if (this.menuRoot.disabled()) {
+            return;
+        }
+        const anchor = {
+            getBoundingClientRect: () => ({
+                width: 0,
+                height: 0,
+                x: clientX,
+                y: clientY,
+                top: clientY,
+                left: clientX,
+                right: clientX,
+                bottom: clientY,
+                toJSON: () => ({})
+            })
+        };
+        this.popper.anchorOverride.set(anchor);
+        // Move focus into the popup so keyboard navigation and outside-dismiss work immediately.
+        this.menuRoot.show(autoFocus);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxContextMenuRoot, isStandalone: true, selector: "[rdxContextMenuRoot]", providers: [provideRdxContextMenuRootContext(contextFactory)], exportAs: ["rdxContextMenuRoot"], hostDirectives: [{ directive: i1.RdxMenuRoot, inputs: ["open", "open", "modal", "modal", "loopFocus", "loopFocus", "highlightItemOnHover", "highlightItemOnHover"], outputs: ["openChange", "openChange", "onOpenChange", "onOpenChange", "onOpenChangeComplete", "onOpenChangeComplete"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuRoot, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxContextMenuContent]',
-                    standalone: true,
-                    host: {
-                        '[attr.role]': "'menu'",
-                        '[attr.data-state]': "menuTrigger?.isOpen() ? 'open': 'closed'",
-                        '[attr.data-orientation]': 'orientation'
-                    },
-                    providers: [
+                    selector: '[rdxContextMenuRoot]',
+                    exportAs: 'rdxContextMenuRoot',
+                    hostDirectives: [
                         {
-                            provide: CdkMenu,
-                            useExisting: RdxContextMenuContentDirective
+                            directive: RdxMenuRoot,
+                            inputs: ['open', 'modal', 'loopFocus', 'highlightItemOnHover'],
+                            outputs: ['openChange', 'onOpenChange', 'onOpenChangeComplete']
                         }
-                    ]
+                    ],
+                    providers: [provideRdxContextMenuRootContext(contextFactory)]
                 }]
-        }], ctorParameters: () => [], propDecorators: { onEscapeKeyDown: [{
-                type: Input
-            }], closeOnEscape: [{
-                type: Input
-            }] } });
+        }] });
 
-class RdxContextMenuItemDirective extends CdkMenuItem {
+/**
+ * An area that opens the context menu on right click (or a touch long-press).
+ *
+ * Apply it to the element that should respond to the context-menu gesture; the popup is positioned
+ * at the pointer, not against this element.
+ */
+class RdxContextMenuTrigger {
     constructor() {
-        super();
-        this.menu = inject(RdxContextMenuContentDirective);
-        this.nativeElement = inject(ElementRef).nativeElement;
-        this.highlighted = false;
-        this.disabled = false;
-        this.onSelect = new EventEmitter();
-        this.menu.highlighted.pipe(takeUntilDestroyed()).subscribe((value) => {
-            if (value !== this) {
-                this.highlighted = false;
-            }
-        });
-        this.triggered.subscribe(this.onSelect);
-    }
-    onPointerMove() {
-        this.nativeElement.focus({ preventScroll: true });
-        this.menu.updateActiveItem(this);
-    }
-    onKeydown(event) {
-        if (this.nativeElement.tagName !== 'BUTTON' && ['Enter', ' '].includes(event.key)) {
-            event.preventDefault();
+        this.rootContext = injectRdxContextMenuRootContext();
+        /** Whether the trigger is disabled. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** How long (ms) a touch must be held before the menu opens. */
+        this.longPressDelay = input(500, { ...(ngDevMode ? { debugName: "longPressDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.lastPointerDownTime = 0;
+        inject(DestroyRef).onDestroy(() => this.cancelLongPress());
+    }
+    onContextMenu(event) {
+        if (this.disabled()) {
+            return;
         }
-        if (event.key === 'Escape') {
-            if (!this.menu.closeOnEscape) {
-                event.stopPropagation();
-            }
-            else {
-                this.menu.onEscapeKeyDown(event);
-            }
+        // Suppress the native context menu and open ours at the pointer.
+        event.preventDefault();
+        this.cancelLongPress();
+        // A keyboard-initiated context menu (e.g. the Menu key / Shift+F10) is not preceded by a
+        // pointerdown, so it opens with the first item highlighted; a pointer opens the popup
+        // without highlighting an item.
+        const fromKeyboard = event.timeStamp - this.lastPointerDownTime > 300;
+        this.rootContext.openAt(event.clientX, event.clientY, fromKeyboard ? 'first' : 'popup');
+    }
+    onPointerDown(event) {
+        this.lastPointerDownTime = event.timeStamp;
+        if (this.disabled() || event.pointerType !== 'touch') {
+            return;
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: RdxContextMenuItemDirective, isStandalone: true, selector: "[rdxContextMenuItem]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { onSelect: "onSelect" }, host: { attributes: { "type": "button" }, listeners: { "pointermove": "onPointerMove()", "focus": "menu.highlighted.next(this)", "keydown": "onKeydown($event)" }, properties: { "attr.data-orientation": "\"vertical\"", "attr.data-highlighted": "highlighted ? \"\" : null", "attr.data-disabled": "disabled ? \"\" : null", "attr.disabled": "disabled ? \"\" : null" } }, providers: [
-            { provide: CdkMenuItem, useExisting: RdxContextMenuItemDirective },
-            { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxContextMenuItem]',
-                    standalone: true,
-                    host: {
-                        type: 'button',
-                        '[attr.data-orientation]': '"vertical"',
-                        '[attr.data-highlighted]': 'highlighted ? "" : null',
-                        '[attr.data-disabled]': 'disabled ? "" : null',
-                        '[attr.disabled]': 'disabled ? "" : null',
-                        '(pointermove)': 'onPointerMove()',
-                        '(focus)': 'menu.highlighted.next(this)',
-                        '(keydown)': 'onKeydown($event)'
-                    },
-                    providers: [
-                        { provide: CdkMenuItem, useExisting: RdxContextMenuItemDirective },
-                        { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-                    ]
-                }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], onSelect: [{
-                type: Output
-            }] } });
-
-/** Base class providing checked state for selectable ContextMenuItems. */
-class RdxContextMenuSelectable extends RdxContextMenuItemDirective {
-    constructor() {
-        super(...arguments);
-        /** Whether the element is checked */
-        this.checked = false;
-        this.checkedChange = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: RdxContextMenuSelectable, isStandalone: true, inputs: { checked: ["checked", "checked", booleanAttribute] }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "attr.aria-checked": "!!checked", "attr.aria-disabled": "disabled || null", "attr.data-state": "checked ? \"checked\" : \"unchecked\"" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuSelectable, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    host: {
-                        '[attr.aria-checked]': '!!checked',
-                        '[attr.aria-disabled]': 'disabled || null',
-                        '[attr.data-state]': 'checked ? "checked" : "unchecked"'
-                    }
-                }]
-        }], propDecorators: { checked: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], checkedChange: [{
-                type: Output
-            }] } });
-
-class RdxContextMenuItemCheckboxDirective extends RdxContextMenuSelectable {
-    trigger(options) {
-        if (!this.disabled) {
-            this.checked = !this.checked;
-            this.checkedChange.emit(this.checked);
+        const { clientX, clientY } = event;
+        this.longPressOrigin = { x: clientX, y: clientY };
+        this.cancelLongPress();
+        this.longPressTimer = setTimeout(() => {
+            this.longPressTimer = undefined;
+            this.rootContext.openAt(clientX, clientY);
+        }, this.longPressDelay());
+    }
+    onPointerMove(event) {
+        // A finger that drifts more than ~10px is a scroll/drag, not a long-press.
+        if (!this.longPressOrigin) {
+            return;
+        }
+        const dx = event.clientX - this.longPressOrigin.x;
+        const dy = event.clientY - this.longPressOrigin.y;
+        if (Math.hypot(dx, dy) > 10) {
+            this.cancelLongPress();
         }
-        super.trigger(options);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemCheckboxDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxContextMenuItemCheckboxDirective, isStandalone: true, selector: "[rdxContextMenuItemCheckbox]", host: { attributes: { "role": "menuitemcheckbox" } }, providers: [
-            { provide: RdxContextMenuSelectable, useExisting: RdxContextMenuItemCheckboxDirective },
-            { provide: RdxContextMenuItemDirective, useExisting: RdxContextMenuSelectable },
-            { provide: CdkMenuItem, useExisting: RdxContextMenuItemDirective },
-            { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemCheckboxDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxContextMenuItemCheckbox]',
-                    standalone: true,
-                    host: {
-                        role: 'menuitemcheckbox'
-                    },
-                    providers: [
-                        { provide: RdxContextMenuSelectable, useExisting: RdxContextMenuItemCheckboxDirective },
-                        { provide: RdxContextMenuItemDirective, useExisting: RdxContextMenuSelectable },
-                        { provide: CdkMenuItem, useExisting: RdxContextMenuItemDirective },
-                        { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-                    ]
-                }]
-        }] });
-
-class RdxContextMenuItemIndicatorDirective {
-    constructor() {
-        this.item = inject(RdxContextMenuSelectable);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxContextMenuItemIndicatorDirective, isStandalone: true, selector: "[rdxContextMenuItemIndicator]", host: { properties: { "style.display": "item.checked ? 'block' : 'none'", "attr.data-state": "item.checked ? 'checked' : 'unchecked'" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemIndicatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxContextMenuItemIndicator]',
-                    standalone: true,
-                    host: {
-                        '[style.display]': "item.checked ? 'block' : 'none'",
-                        '[attr.data-state]': "item.checked ? 'checked' : 'unchecked'"
-                    }
-                }]
-        }] });
-
-class RdxContextMenuItemRadioGroupDirective {
-    constructor() {
-        this.selectionDispatcher = inject(UniqueSelectionDispatcher);
-        this._value = null;
-        this.valueChange = new EventEmitter();
-    }
-    set value(value) {
-        this._value = value;
-    }
-    get value() {
-        return this._value;
-    }
-    ngAfterContentInit() {
-        this.selectionDispatcher.notify(this.value, '');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxContextMenuItemRadioGroupDirective, isStandalone: true, selector: "[rdxContextMenuItemRadioGroup]", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "group" } }, providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemRadioGroupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxContextMenuItemRadioGroup]',
-                    standalone: true,
-                    host: {
-                        role: 'group'
-                    },
-                    providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }]
-                }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
-/** Counter used to set a unique id and name for a selectable item */
-let nextId = 0;
-class RdxContextMenuItemRadioDirective extends RdxContextMenuSelectable {
-    get value() {
-        return this._value || this.id;
-    }
-    set value(value) {
-        this._value = value;
-    }
-    constructor() {
-        super();
-        /** The unique selection dispatcher for this radio's `RdxContextMenuItemRadioGroupDirective`. */
-        this.selectionDispatcher = inject(UniqueSelectionDispatcher);
-        this.group = inject(RdxContextMenuItemRadioGroupDirective);
-        /** An ID to identify this radio item to the `UniqueSelectionDispatcher`. */
-        this.id = `${nextId++}`;
-        this.triggered.subscribe(() => {
-            if (!this.disabled) {
-                this.selectionDispatcher.notify(this.value, '');
-                this.group.valueChange.emit(this.value);
-            }
-        });
-    }
-    ngAfterContentInit() {
-        this.removeDispatcherListener = this.selectionDispatcher.listen((id) => {
-            this.checked = this.value === id;
-        });
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.removeDispatcherListener();
+    cancelLongPress() {
+        clearTimeout(this.longPressTimer);
+        this.longPressTimer = undefined;
+        this.longPressOrigin = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemRadioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxContextMenuItemRadioDirective, isStandalone: true, selector: "[rdxContextMenuItemRadio]", inputs: { value: "value" }, host: { attributes: { "role": "menuitemradio" } }, providers: [
-            { provide: RdxContextMenuSelectable, useExisting: RdxContextMenuItemRadioDirective },
-            { provide: RdxContextMenuItemDirective, useExisting: RdxContextMenuSelectable },
-            { provide: CdkMenuItem, useExisting: RdxContextMenuItemDirective },
-            { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuItemRadioDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxContextMenuItemRadio]',
-                    standalone: true,
-                    host: {
-                        role: 'menuitemradio'
-                    },
-                    providers: [
-                        { provide: RdxContextMenuSelectable, useExisting: RdxContextMenuItemRadioDirective },
-                        { provide: RdxContextMenuItemDirective, useExisting: RdxContextMenuSelectable },
-                        { provide: CdkMenuItem, useExisting: RdxContextMenuItemDirective },
-                        { provide: CDK_MENU, useExisting: RdxContextMenuContentDirective }
-                    ]
-                }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
-                type: Input
-            }] } });
-
-class RdxContextMenuLabelDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxContextMenuLabelDirective, isStandalone: true, selector: "[rdxContextMenuLabel]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxContextMenuTrigger, isStandalone: true, selector: "[rdxContextMenuTrigger]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, longPressDelay: { classPropertyName: "longPressDelay", publicName: "longPressDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "contextmenu": "onContextMenu($event)", "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "cancelLongPress()", "pointercancel": "cancelLongPress()", "pointerleave": "cancelLongPress()" }, properties: { "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["rdxContextMenuTrigger"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxContextMenuLabel]',
-                    standalone: true
-                }]
-        }] });
-
-class RdxContextMenuSeparatorDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxContextMenuSeparatorDirective, isStandalone: true, selector: "[rdxContextMenuSeparator]", host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "'horizontal'" } }, hostDirectives: [{ directive: i1.RdxSeparatorRootDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuSeparatorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxContextMenuSeparator]',
-                    standalone: true,
-                    hostDirectives: [RdxSeparatorRootDirective],
+                    selector: '[rdxContextMenuTrigger]',
+                    exportAs: 'rdxContextMenuTrigger',
                     host: {
-                        role: 'separator',
-                        '[attr.aria-orientation]': "'horizontal'"
+                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '(contextmenu)': 'onContextMenu($event)',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'cancelLongPress()',
+                        '(pointercancel)': 'cancelLongPress()',
+                        '(pointerleave)': 'cancelLongPress()'
                     }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], longPressDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "longPressDelay", required: false }] }] } });
 
-const _imports = [
-    RdxContextMenuContentDirective,
-    RdxContextMenuSelectable,
-    RdxContextMenuItemCheckboxDirective,
-    RdxContextMenuItemDirective,
-    RdxContextMenuItemRadioGroupDirective,
-    RdxContextMenuItemIndicatorDirective,
-    RdxContextMenuItemRadioDirective,
-    RdxContextMenuLabelDirective,
-    RdxContextMenuSeparatorDirective,
-    RdxContextMenuTriggerDirective
-];
+/**
+ * Context-menu-specific parts. The popup, items, checkbox/radio, submenus, separators, etc. come
+ * from `@radix-ng/primitives/menu` (`RdxMenuModule`) and behave identically inside a context menu.
+ */
+const contextMenuImports = [RdxContextMenuRoot, RdxContextMenuTrigger];
 class RdxContextMenuModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuModule, imports: [RdxContextMenuContentDirective,
-            RdxContextMenuSelectable,
-            RdxContextMenuItemCheckboxDirective,
-            RdxContextMenuItemDirective,
-            RdxContextMenuItemRadioGroupDirective,
-            RdxContextMenuItemIndicatorDirective,
-            RdxContextMenuItemRadioDirective,
-            RdxContextMenuLabelDirective,
-            RdxContextMenuSeparatorDirective,
-            RdxContextMenuTriggerDirective], exports: [RdxContextMenuContentDirective,
-            RdxContextMenuSelectable,
-            RdxContextMenuItemCheckboxDirective,
-            RdxContextMenuItemDirective,
-            RdxContextMenuItemRadioGroupDirective,
-            RdxContextMenuItemIndicatorDirective,
-            RdxContextMenuItemRadioDirective,
-            RdxContextMenuLabelDirective,
-            RdxContextMenuSeparatorDirective,
-            RdxContextMenuTriggerDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuModule, imports: [RdxContextMenuRoot, RdxContextMenuTrigger], exports: [RdxContextMenuRoot, RdxContextMenuTrigger] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxContextMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [..._imports],
-                    exports: [..._imports]
+                    imports: [...contextMenuImports],
+                    exports: [...contextMenuImports]
                 }]
         }] });
 
@@ -459,5 +175,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ContextMenuSide, RdxContextMenuContentDirective, RdxContextMenuItemCheckboxDirective, RdxContextMenuItemDirective, RdxContextMenuItemIndicatorDirective, RdxContextMenuItemRadioDirective, RdxContextMenuItemRadioGroupDirective, RdxContextMenuLabelDirective, RdxContextMenuModule, RdxContextMenuSelectable, RdxContextMenuSeparatorDirective, RdxContextMenuTriggerDirective };
+export { RdxContextMenuModule, RdxContextMenuRoot, RdxContextMenuTrigger, injectRdxContextMenuRootContext, provideRdxContextMenuRootContext };
 //# sourceMappingURL=radix-ng-primitives-context-menu.mjs.map