ng-primitives 0.115.2 → 0.117.0

package/context-menu/README.md

@@ -0,0 +1,3 @@
+# ng-primitives/context-menu
+
+Secondary entry point of `ng-primitives`. It can be used by importing from `ng-primitives/context-menu`.

package/context-menu/index.d.ts

@@ -0,0 +1,284 @@
+import * as _angular_core from '@angular/core';
+import { Provider, Signal } from '@angular/core';
+import { NgpOffset, NgpFlip, NgpShift, NgpOverlayContent, NgpOffsetInput, NgpFlipInput, NgpShiftInput } from 'ng-primitives/portal';
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { NgpMenuPlacement } from 'ng-primitives/menu';
+
+interface NgpContextMenuConfig {
+    /**
+     * Define the offset of the context menu relative to the cursor position.
+     * @default 2
+     */
+    offset: NgpOffset;
+    /**
+     * Define whether the context menu should flip when there is not enough space.
+     * @default true
+     */
+    flip: NgpFlip;
+    /**
+     * Define the container element or selector in which the context menu should be attached.
+     * @default 'body'
+     */
+    container: HTMLElement | string | null;
+    /**
+     * Defines how the context menu behaves when the window is scrolled.
+     * @default 'close'
+     */
+    scrollBehavior: 'reposition' | 'block' | 'close';
+    /**
+     * Configure shift behavior to keep the context menu in view.
+     * @default undefined
+     */
+    shift: NgpShift;
+}
+/**
+ * Provide the default Context Menu configuration
+ * @param config The Context Menu configuration
+ * @returns The provider
+ */
+declare function provideContextMenuConfig(config: Partial<NgpContextMenuConfig>): Provider[];
+
+/**
+ * The `NgpContextMenu` is a container for context menu items.
+ */
+declare class NgpContextMenu {
+    /**
+     * Whether focus should wrap around when reaching the end of the menu.
+     * @default true
+     */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    private readonly state;
+    constructor();
+    /** @internal Close the menu and any parent menus */
+    closeAllMenus(origin: FocusOrigin): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpContextMenu, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpContextMenu, "[ngpContextMenu]", ["ngpContextMenu"], { "wrap": { "alias": "ngpContextMenuWrap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The `NgpContextMenuItem` directive represents a context menu item.
+ */
+declare class NgpContextMenuItem {
+    /** Whether the menu item is disabled */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether the menu should close when this item is selected */
+    readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpContextMenuItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpContextMenuItem, "[ngpContextMenuItem]", ["ngpContextMenuItem"], { "disabled": { "alias": "ngpContextMenuItemDisabled"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "ngpContextMenuItemCloseOnSelect"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The `NgpContextMenuItemCheckbox` directive represents a context menu item that can be toggled on and off.
+ */
+declare class NgpContextMenuItemCheckbox {
+    /** Whether the checkbox is checked */
+    readonly checked: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Event emitted when the checked state changes */
+    readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Whether the menu item checkbox is disabled */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpContextMenuItemCheckbox, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpContextMenuItemCheckbox, "[ngpContextMenuItemCheckbox]", ["ngpContextMenuItemCheckbox"], { "checked": { "alias": "ngpContextMenuItemCheckboxChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpContextMenuItemCheckboxDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpContextMenuItemCheckboxCheckedChange"; }, never, never, true, never>;
+}
+
+/**
+ * The `NgpContextMenuItemIndicator` directive renders inside a checkbox or radio context menu item
+ * and exposes `data-checked` based on the parent item's checked state.
+ */
+declare class NgpContextMenuItemIndicator {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpContextMenuItemIndicator, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpContextMenuItemIndicator, "[ngpContextMenuItemIndicator]", ["ngpContextMenuItemIndicator"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * The `NgpContextMenuItemRadio` directive represents a radio context menu item within a radio group.
+ */
+declare class NgpContextMenuItemRadio {
+    /** The value this radio item represents */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Whether the radio item is disabled */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpContextMenuItemRadio, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpContextMenuItemRadio, "[ngpContextMenuItemRadio]", ["ngpContextMenuItemRadio"], { "value": { "alias": "ngpContextMenuItemRadioValue"; "required": true; "isSignal": true; }; "disabled": { "alias": "ngpContextMenuItemRadioDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The `NgpContextMenuItemRadioGroup` directive represents a group of radio context menu items.
+ */
+declare class NgpContextMenuItemRadioGroup {
+    /** The current value of the radio group */
+    readonly value: _angular_core.InputSignal<string | null>;
+    /** Event emitted when the value changes */
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpContextMenuItemRadioGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpContextMenuItemRadioGroup, "[ngpContextMenuItemRadioGroup]", ["ngpContextMenuItemRadioGroup"], { "value": { "alias": "ngpContextMenuItemRadioGroupValue"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpContextMenuItemRadioGroupValueChange"; }, never, never, true, never>;
+}
+
+/**
+ * The `NgpContextMenuSubmenuTrigger` directive turns a context menu item into a submenu trigger.
+ */
+declare class NgpContextMenuSubmenuTrigger<T = unknown> {
+    /**
+     * Access the submenu template ref.
+     */
+    readonly menu: _angular_core.InputSignal<NgpOverlayContent<T> | undefined>;
+    /**
+     * Define if the trigger should be disabled.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the placement of the submenu relative to the trigger.
+     * @default 'right-start'
+     */
+    readonly placement: _angular_core.InputSignal<NgpMenuPlacement>;
+    /**
+     * Define the offset of the submenu relative to the trigger.
+     * @default 0
+     */
+    readonly offset: _angular_core.InputSignalWithTransform<NgpOffset, NgpOffsetInput>;
+    /**
+     * Define whether the submenu should flip when there is not enough space.
+     * @default true
+     */
+    readonly flip: _angular_core.InputSignalWithTransform<NgpFlip, NgpFlipInput>;
+    private readonly state;
+    show(): void;
+    hide(origin?: FocusOrigin): void;
+    toggle(event: MouseEvent): void;
+    focus(origin?: FocusOrigin): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpContextMenuSubmenuTrigger<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpContextMenuSubmenuTrigger<any>, "[ngpContextMenuSubmenuTrigger]", ["ngpContextMenuSubmenuTrigger"], { "menu": { "alias": "ngpContextMenuSubmenuTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpContextMenuSubmenuTriggerDisabled"; "required": false; "isSignal": true; }; "placement": { "alias": "ngpContextMenuSubmenuTriggerPlacement"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpContextMenuSubmenuTriggerOffset"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpContextMenuSubmenuTriggerFlip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class NgpContextMenuTrigger<T = unknown> {
+    /**
+     * Access the global context menu configuration.
+     */
+    private readonly config;
+    /**
+     * The menu template ref or ComponentType to display.
+     */
+    readonly menu: _angular_core.InputSignal<NgpOverlayContent<T> | undefined>;
+    /**
+     * Define if the trigger should be disabled.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Define the offset of the context menu relative to the cursor position.
+     * @default 2
+     */
+    readonly offset: _angular_core.InputSignalWithTransform<NgpOffset, NgpOffsetInput>;
+    /**
+     * Define whether the context menu should flip when there is not enough space.
+     * @default true
+     */
+    readonly flip: _angular_core.InputSignalWithTransform<NgpFlip, NgpFlipInput>;
+    /**
+     * Configure shift behavior to keep the context menu in view.
+     * @default undefined
+     */
+    readonly shift: _angular_core.InputSignalWithTransform<NgpShift, NgpShiftInput>;
+    /**
+     * Define the container in which the context menu should be attached.
+     * @default document.body
+     */
+    readonly container: _angular_core.InputSignal<string | HTMLElement | null>;
+    /**
+     * Defines how the context menu behaves when the window is scrolled.
+     * @default 'close'
+     */
+    readonly scrollBehavior: _angular_core.InputSignal<"reposition" | "block" | "close">;
+    /**
+     * Provide context to the menu. This can be used to pass data to the menu content.
+     */
+    readonly context: _angular_core.InputSignal<T | undefined>;
+    /**
+     * The context menu trigger state.
+     */
+    private readonly state;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpContextMenuTrigger<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpContextMenuTrigger<any>, "[ngpContextMenuTrigger]", ["ngpContextMenuTrigger"], { "menu": { "alias": "ngpContextMenuTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpContextMenuTriggerDisabled"; "required": false; "isSignal": true; }; "offset": { "alias": "ngpContextMenuTriggerOffset"; "required": false; "isSignal": true; }; "flip": { "alias": "ngpContextMenuTriggerFlip"; "required": false; "isSignal": true; }; "shift": { "alias": "ngpContextMenuTriggerShift"; "required": false; "isSignal": true; }; "container": { "alias": "ngpContextMenuTriggerContainer"; "required": false; "isSignal": true; }; "scrollBehavior": { "alias": "ngpContextMenuTriggerScrollBehavior"; "required": false; "isSignal": true; }; "context": { "alias": "ngpContextMenuTriggerContext"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface NgpContextMenuTriggerState {
+    /**
+     * Whether the context menu is open.
+     */
+    readonly open: Signal<boolean>;
+    /**
+     * The focus origin that was used to open the menu.
+     */
+    readonly openOrigin: Signal<FocusOrigin>;
+    /**
+     * Show the context menu.
+     */
+    show(origin?: FocusOrigin): void;
+    /**
+     * Hide the context menu.
+     */
+    hide(origin?: FocusOrigin): void;
+    /**
+     * Set whether the pointer is over the menu content.
+     */
+    setPointerOverContent(isOver: boolean): void;
+}
+interface NgpContextMenuTriggerProps<T = unknown> {
+    /**
+     * The menu template or component.
+     */
+    readonly menu?: Signal<NgpOverlayContent<T> | undefined>;
+    /**
+     * Whether the trigger is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * The offset of the menu.
+     */
+    readonly offset?: Signal<NgpOffset>;
+    /**
+     * Whether the menu should flip when there is not enough space.
+     */
+    readonly flip?: Signal<NgpFlip>;
+    /**
+     * The container in which the menu should be attached.
+     */
+    readonly container?: Signal<HTMLElement | string | null>;
+    /**
+     * Configure shift behavior.
+     */
+    shift: NgpShift;
+    /**
+     * How the menu behaves when the window is scrolled.
+     */
+    readonly scrollBehavior?: Signal<'reposition' | 'block' | 'close'>;
+    /**
+     * Context to provide to the menu.
+     */
+    readonly context?: Signal<T>;
+}
+declare const ngpContextMenuTrigger: <T>({ disabled: _disabled, menu: _menu, offset: _offset, flip: _flip, context: _context, container, scrollBehavior, shift, }: NgpContextMenuTriggerProps<T>) => {
+    open: Signal<boolean>;
+    openOrigin: _angular_core.WritableSignal<FocusOrigin>;
+    show: (origin?: FocusOrigin) => void;
+    hide: (origin?: FocusOrigin) => void;
+    setPointerOverContent: (_isOver: boolean) => void;
+};
+declare const provideContextMenuTriggerState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+declare function injectContextMenuTriggerState(): Signal<NgpContextMenuTriggerState>;
+
+export { NgpContextMenu, NgpContextMenuItem, NgpContextMenuItemCheckbox, NgpContextMenuItemIndicator, NgpContextMenuItemRadio, NgpContextMenuItemRadioGroup, NgpContextMenuSubmenuTrigger, NgpContextMenuTrigger, injectContextMenuTriggerState, ngpContextMenuTrigger, provideContextMenuConfig, provideContextMenuTriggerState };
+export type { NgpContextMenuConfig, NgpContextMenuTriggerProps, NgpContextMenuTriggerState };