ng-primitives 0.89.0 → 0.91.0

package/input-otp/index.d.ts

@@ -1,4 +1,247 @@
-export { NgpInputOtpInput } from './input-otp-input/input-otp-input';
-export { NgpInputOtpSlot } from './input-otp-slot/input-otp-slot';
-export { NgpInputOtp, type NgpInputOtpInputMode } from './input-otp/input-otp';
-export { injectInputOtpState, provideInputOtpState } from './input-otp/input-otp-state';
+import * as ng_primitives_state from 'ng-primitives/state';
+import * as ng_primitives_input_otp from 'ng-primitives/input-otp';
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import * as i1 from 'ng-primitives/a11y';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+declare class NgpInputOtpInput implements AfterViewInit {
+    /**
+     * Access the element reference.
+     */
+    readonly elementRef: _angular_core.ElementRef<HTMLInputElement>;
+    /**
+     * Access the input-otp state.
+     */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_input_otp.NgpInputOtp>>;
+    constructor();
+    ngAfterViewInit(): void;
+    /**
+     * Focus the input.
+     * @internal
+     */
+    focus(): void;
+    /**
+     * Set selection range.
+     * @param start Start position
+     * @param end End position
+     * @internal
+     */
+    setSelectionRange(start: number, end: number): void;
+    /**
+     * Handle input events (typing).
+     */
+    protected onInput(event: Event): void;
+    /**
+     * Handle paste events.
+     */
+    protected onPaste(event: ClipboardEvent): void;
+    /**
+     * Handle focus events.
+     */
+    protected onFocus(): void;
+    /**
+     * Handle blur events.
+     */
+    protected onBlur(): void;
+    /**
+     * Handle keyup events to update selection.
+     */
+    protected onKeyup(): void;
+    /**
+     * Handle selection change events.
+     */
+    protected onSelect(): void;
+    /**
+     * Update the selection state.
+     */
+    private updateSelection;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpInputOtpInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpInputOtpInput, "input[ngpInputOtpInput]", ["ngpInputOtpInput"], {}, {}, never, never, true, [{ directive: typeof i1.NgpVisuallyHidden; inputs: {}; outputs: {}; }]>;
+}
+
+declare class NgpInputOtpSlot implements OnDestroy {
+    /**
+     * Access the input-otp state.
+     */
+    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_input_otp.NgpInputOtp>>;
+    /**
+     * The computed index of this slot based on registration order.
+     */
+    readonly index: _angular_core.Signal<number>;
+    /**
+     * The character for this slot from the value string.
+     */
+    private readonly char;
+    /**
+     * Whether this slot is focused (active).
+     */
+    protected readonly focused: _angular_core.Signal<boolean>;
+    /**
+     * Whether this slot should show the caret.
+     */
+    protected readonly caret: _angular_core.Signal<boolean>;
+    /**
+     * Whether this slot is filled with a character.
+     */
+    protected readonly filled: _angular_core.Signal<boolean>;
+    /**
+     * Whether to show placeholder for this slot.
+     */
+    protected readonly showPlaceholder: _angular_core.Signal<boolean>;
+    /**
+     * The display character for this slot (character or placeholder).
+     */
+    protected readonly displayChar: _angular_core.Signal<string>;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Handle click events on the slot.
+     * @internal
+     */
+    protected onClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpInputOtpSlot, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpInputOtpSlot, "[ngpInputOtpSlot]", ["ngpInputOtpSlot"], {}, {}, never, never, true, never>;
+}
+
+type NgpInputOtpInputMode = 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url';
+declare class NgpInputOtp {
+    /**
+     * Access the element reference.
+     */
+    readonly elementRef: _angular_core.ElementRef<HTMLElement>;
+    /**
+     * The id of the input-otp.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * The current value of the OTP.
+     */
+    readonly value: _angular_core.InputSignal<string>;
+    /**
+     * The regex pattern for allowed characters.
+     */
+    readonly pattern: _angular_core.InputSignal<string>;
+    /**
+     * The input mode for the hidden input.
+     */
+    readonly inputMode: _angular_core.InputSignal<NgpInputOtpInputMode>;
+    /**
+     * Function to transform pasted text.
+     */
+    readonly pasteTransformer: _angular_core.InputSignal<((text: string) => string) | undefined>;
+    /**
+     * Whether the input-otp is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The placeholder character to display when a slot is empty.
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * Event emitted when the value changes.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Event emitted when the OTP is complete (maxLength characters entered).
+     */
+    readonly complete: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Store the input element reference.
+     * @internal
+     */
+    private readonly inputElement;
+    /**
+     * Store registered slots in order.
+     * @internal
+     */
+    private readonly slots;
+    /**
+     * The number of characters in the OTP, derived from registered slots.
+     */
+    readonly maxLength: _angular_core.Signal<number>;
+    /**
+     * The focus state of the input.
+     * @internal
+     */
+    readonly isFocused: _angular_core.WritableSignal<boolean>;
+    /**
+     * The selection start position.
+     * @internal
+     */
+    readonly selectionStart: _angular_core.WritableSignal<number>;
+    /**
+     * The selection end position.
+     * @internal
+     */
+    readonly selectionEnd: _angular_core.WritableSignal<number>;
+    /**
+     * The state of the input-otp.
+     */
+    protected readonly state: ng_primitives_state.CreatedState<NgpInputOtp>;
+    constructor();
+    /**
+     * Register an input element with the input-otp.
+     * @param input The input element to register.
+     * @internal
+     */
+    registerInput(input: NgpInputOtpInput): void;
+    /**
+     * Register a slot with the input-otp.
+     * @param slot The slot to register.
+     * @internal
+     */
+    registerSlot(slot: NgpInputOtpSlot): void;
+    /**
+     * Unregister a slot from the input-otp.
+     * @param slot The slot to unregister.
+     * @internal
+     */
+    unregisterSlot(slot: NgpInputOtpSlot): void;
+    /**
+     * Get the index of a registered slot.
+     * @param slot The slot to get the index for.
+     * @returns The index of the slot, or -1 if not found.
+     * @internal
+     */
+    getSlotIndex(slot: NgpInputOtpSlot): number;
+    /**
+     * Update the value and emit change events.
+     * @param newValue The new value.
+     * @internal
+     */
+    updateValue(newValue: string): void;
+    /**
+     * Update focus state.
+     * @param focused Whether the input is focused.
+     * @internal
+     */
+    updateFocus(focused: boolean): void;
+    /**
+     * Update selection state.
+     * @param start Selection start position.
+     * @param end Selection end position.
+     * @internal
+     */
+    updateSelection(start: number, end: number): void;
+    /**
+     * Focus the input and set caret to the specified position.
+     * @param position The position to set the caret to.
+     * @internal
+     */
+    focusAtPosition(position: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpInputOtp, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpInputOtp, "[ngpInputOtp]", ["ngpInputOtp"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpInputOtpValue"; "required": false; "isSignal": true; }; "pattern": { "alias": "ngpInputOtpPattern"; "required": false; "isSignal": true; }; "inputMode": { "alias": "ngpInputOtpInputMode"; "required": false; "isSignal": true; }; "pasteTransformer": { "alias": "ngpInputOtpPasteTransformer"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpInputOtpDisabled"; "required": false; "isSignal": true; }; "placeholder": { "alias": "ngpInputOtpPlaceholder"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpInputOtpValueChange"; "complete": "ngpInputOtpComplete"; }, never, never, true, never>;
+}
+
+/**
+ * Provides the InputOtp state.
+ */
+declare const provideInputOtpState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+/**
+ * Injects the InputOtp state.
+ */
+declare const injectInputOtpState: <U = NgpInputOtp>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+
+export { NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot, injectInputOtpState, provideInputOtpState };
+export type { NgpInputOtpInputMode };

package/interactions/index.d.ts

@@ -1,16 +1,295 @@
-import { ngpInteractions } from './interactions/interactions';
-export { NgpInteractionsConfig, provideInteractionsConfig } from './config/interactions-config';
-export { NgpFocusVisible } from './focus-visible/focus-visible';
-export { ngpFocusVisibleInteraction } from './focus-visible/focus-visible-interaction';
-export { NgpFocus } from './focus/focus';
-export { ngpFocusInteraction } from './focus/focus-interaction';
-export { NgpHover } from './hover/hover';
-export { ngpHoverInteraction } from './hover/hover-interaction';
-export { ngpInteractions } from './interactions/interactions';
-export { NgpMove, NgpMoveEvent } from './move/move';
-export { NgpPress } from './press/press';
-export { ngpPressInteraction } from './press/press-interaction';
-/**
- * @deprecated use `ngpInteractions` instead
- */
-export { ngpInteractions as setupInteractions };
+import * as _angular_core from '@angular/core';
+import { Signal, Provider } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+
+interface NgpInteractionOptions {
+    hover?: boolean;
+    press?: boolean;
+    focus?: boolean;
+    focusWithin?: boolean;
+    focusVisible?: boolean;
+    disabled?: Signal<boolean>;
+}
+/**
+ * Setup the interactions without relying on HostDirectives.
+ * @internal
+ */
+declare function ngpInteractions({ focus, hover, press, focusWithin, focusVisible, disabled, }: NgpInteractionOptions): void;
+
+interface NgpInteractionsConfig {
+    /** Whether all interactions are disabled */
+    disabled?: boolean;
+    /** Whether hover interactions are enabled */
+    hover?: boolean;
+    /** Whether focus interactions are enabled */
+    focus?: boolean;
+    /** Whether focus-visible interactions are enabled */
+    focusVisible?: boolean;
+    /** Whether press interactions are enabled */
+    press?: boolean;
+}
+/**
+ * Provide the default Interactions configuration
+ * @param config The Interactions configuration
+ * @returns The provider
+ */
+declare function provideInteractionsConfig(config: Partial<NgpInteractionsConfig>): Provider[];
+
+/**
+ * Apply the `ngpFocusVisible` directive to an element that should be visually focused. This is similar to `ngpFocus`
+ * but it will only apply the focus visible styles when the element is focused via keyboard navigation.
+ */
+declare class NgpFocusVisible {
+    /**
+     * Whether focus events are listened to.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emit when the element is visually focused.
+     */
+    readonly focusChange: _angular_core.OutputEmitterRef<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpFocusVisible, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFocusVisible, "[ngpFocusVisible]", ["ngpFocusVisible"], { "disabled": { "alias": "ngpFocusVisibleDisabled"; "required": false; "isSignal": true; }; }, { "focusChange": "ngpFocusVisible"; }, never, never, true, never>;
+}
+
+interface NgpFocusVisibleOptions {
+    disabled?: Signal<boolean>;
+    focusChange?: (value: boolean) => void;
+}
+interface NgpFocusVisibleState {
+    isFocused: Signal<boolean>;
+}
+/**
+ * @internal
+ */
+declare function ngpFocusVisibleInteraction({ focusChange, disabled, }: NgpFocusVisibleOptions): NgpFocusVisibleState;
+
+/**
+ * This was inspired by the React Aria useFocus hook.
+ * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useFocus.ts#L20
+ */
+declare class NgpFocus {
+    /**
+     * Whether listening for focus events is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emit when the focus state changes.
+     */
+    readonly focus: _angular_core.OutputEmitterRef<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpFocus, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFocus, "[ngpFocus]", ["ngpFocus"], { "disabled": { "alias": "ngpFocusDisabled"; "required": false; "isSignal": true; }; }, { "focus": "ngpFocus"; }, never, never, true, never>;
+}
+
+interface NgpFocusOptions {
+    disabled?: Signal<boolean>;
+    focusWithin?: boolean;
+    focus?: () => void;
+    blur?: () => void;
+}
+interface NgpFocusState {
+    isFocused: Signal<boolean>;
+}
+/**
+ * @internal
+ */
+declare function ngpFocusInteraction({ focus, blur, focusWithin, disabled, }: NgpFocusOptions): NgpFocusState;
+
+/**
+ * Apply the `ngpHover` directive to an element that you want to listen for hover events. T
+ * his is particulaly useful for supporting hover events on touch devices, where hover events are not handled consistently.
+ * On iOS relying on the `:hover` pseudo-class can result in the hover state being stuck until the user taps elsewhere on the screen.
+ */
+declare class NgpHover {
+    /**
+     * Whether hoving should be disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emit an event when hovering starts.
+     */
+    readonly hoverStart: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emit an event when hovering ends.
+     */
+    readonly hoverEnd: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emit an event when the hover state changes.
+     */
+    readonly hoverChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Setup the hover state.
+     */
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpHover, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpHover, "[ngpHover]", ["ngpHover"], { "disabled": { "alias": "ngpHoverDisabled"; "required": false; "isSignal": true; }; }, { "hoverStart": "ngpHoverStart"; "hoverEnd": "ngpHoverEnd"; "hoverChange": "ngpHover"; }, never, never, true, never>;
+}
+
+interface NgpHoverOptions {
+    disabled?: Signal<boolean>;
+    hoverStart?: () => void;
+    hoverEnd?: () => void;
+}
+interface NgpHoverState {
+    hovered: Signal<boolean>;
+}
+/**
+ * Programatically add the hover functionality to an element.
+ * This is useful in cases where we can't necessarily use a HostDirective,
+ * because there is a chance the directive has already been used.
+ * @internal
+ */
+declare function ngpHoverInteraction({ hoverStart, hoverEnd, disabled, }: NgpHoverOptions): NgpHoverState;
+
+/**
+ * The `NgpMove` directive is used to enable the pointer and keyboard move interactions on an element.
+ */
+declare class NgpMove {
+    /**
+     * Access the disposable helper.
+     */
+    private readonly disposables;
+    /**
+     * Whether movement is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emit when the move event begins.
+     */
+    readonly start: _angular_core.OutputEmitterRef<NgpMoveBaseEvent>;
+    /**
+     * Emit when the element is moved.
+     */
+    readonly move: _angular_core.OutputEmitterRef<NgpMoveEvent>;
+    /**
+     * Emit when the move event ends.
+     */
+    readonly end: _angular_core.OutputEmitterRef<NgpMoveBaseEvent>;
+    /**
+     * Whether the element is currently being moved.
+     */
+    protected isMoving: _angular_core.WritableSignal<boolean>;
+    /**
+     * Store the last x position of the element.
+     */
+    private x;
+    /**
+     * Store the last y position of the element.
+     */
+    private y;
+    /**
+     * Store the id of the last pointer.
+     */
+    private pointerId;
+    /**
+     * Store the disposable event listeners.
+     */
+    private disposableListeners;
+    /**
+     * Handle a move start.
+     */
+    private onMoveStart;
+    /**
+     * Handle a move event.
+     */
+    private onMove;
+    /**
+     * Handle a move end.
+     */
+    private onMoveEnd;
+    /**
+     * Handle the pointer down event.
+     */
+    protected onPointerDown(event: PointerEvent): void;
+    /**
+     * Handle the pointer up event.
+     */
+    protected onPointerUp(event: PointerEvent): void;
+    /**
+     * Handle the pointer move event.
+     */
+    protected onPointerMove(event: PointerEvent): void;
+    private triggerKeyboardMove;
+    protected onArrowUp(event: Event): void;
+    protected onArrowDown(event: Event): void;
+    protected onArrowLeft(event: Event): void;
+    protected onArrowRight(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpMove, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpMove, "[ngpMove]", ["ngpMove"], { "disabled": { "alias": "ngpMoveDisabled"; "required": false; "isSignal": true; }; }, { "start": "ngpMoveStart"; "move": "ngpMove"; "end": "ngpMoveEnd"; }, never, never, true, never>;
+}
+interface NgpMoveBaseEvent {
+    /**
+     * Whether the event was triggered by a mouse or keyboard event.
+     */
+    pointerType: PointerType;
+    /**
+     * Whether the shift key was pressed during the event.
+     */
+    shiftKey: boolean;
+    /**
+     * Whether the control key was pressed during the event.
+     */
+    ctrlKey: boolean;
+    /**
+     * Whether the meta key was pressed during the event.
+     */
+    metaKey: boolean;
+    /**
+     * Whether the alt key was pressed during the event.
+     */
+    altKey: boolean;
+}
+interface NgpMoveEvent extends NgpMoveBaseEvent {
+    /**
+     * The amount of pixels moved in the x-axis.
+     */
+    deltaX: number;
+    /**
+     * The amount of pixels moved in the y-axis.
+     */
+    deltaY: number;
+}
+type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
+
+/**
+ * The `ngpPress` directive listens for press events on an element. This is particularly useful for supporting press events on touch devices, where press events are not handled consistently.
+ */
+declare class NgpPress {
+    /**
+     * Whether listening for press events is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * Emit when the press begins.
+     */
+    readonly pressStart: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emit when the press ends.
+     */
+    readonly pressEnd: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emit when the press changes.
+     */
+    readonly pressChange: _angular_core.OutputEmitterRef<boolean>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpPress, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpPress, "[ngpPress]", ["ngpPress"], { "disabled": { "alias": "ngpPressDisabled"; "required": false; "isSignal": true; }; }, { "pressStart": "ngpPressStart"; "pressEnd": "ngpPressEnd"; "pressChange": "ngpPress"; }, never, never, true, never>;
+}
+
+interface NgpPressState {
+    pressed: Signal<boolean>;
+}
+interface NgpPressOptions {
+    disabled?: Signal<boolean>;
+    pressStart?: () => void;
+    pressEnd?: () => void;
+}
+/**
+ * @internal
+ */
+declare function ngpPressInteraction({ pressStart, pressEnd, disabled, }: NgpPressOptions): NgpPressState;
+
+export { NgpFocus, NgpFocusVisible, NgpHover, NgpMove, NgpPress, ngpFocusInteraction, ngpFocusVisibleInteraction, ngpHoverInteraction, ngpInteractions, ngpPressInteraction, provideInteractionsConfig, ngpInteractions as setupInteractions };
+export type { NgpInteractionsConfig, NgpMoveEvent };