ng-primitives 0.111.0 → 0.112.0

package/number-field/index.d.ts

@@ -0,0 +1,329 @@
+import * as _angular_core from '@angular/core';
+import { Signal, WritableSignal } from '@angular/core';
+import { Observable } from 'rxjs';
+import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
+
+/**
+ * Public state surface for the NumberField primitive.
+ */
+interface NgpNumberFieldState {
+    /**
+     * The id of the number field.
+     */
+    readonly id: Signal<string>;
+    /**
+     * The current value.
+     */
+    readonly value: WritableSignal<number | null>;
+    /**
+     * The minimum value.
+     */
+    readonly min: Signal<number>;
+    /**
+     * The maximum value.
+     */
+    readonly max: Signal<number>;
+    /**
+     * The step value.
+     */
+    readonly step: Signal<number>;
+    /**
+     * The large step value (used with Shift key).
+     */
+    readonly largeStep: Signal<number>;
+    /**
+     * Whether the number field is disabled (includes form control state).
+     */
+    readonly disabled: WritableSignal<boolean>;
+    /**
+     * Whether the number field is readonly.
+     */
+    readonly readonly: WritableSignal<boolean>;
+    /**
+     * Whether the increment button should be disabled.
+     */
+    readonly canIncrement: Signal<boolean>;
+    /**
+     * Whether the decrement button should be disabled.
+     */
+    readonly canDecrement: Signal<boolean>;
+    /**
+     * Emit when the value changes.
+     */
+    readonly valueChange: Observable<number | null>;
+    /**
+     * Set the current value (clamped and stepped).
+     */
+    setValue(value: number | null): void;
+    /**
+     * Increment the value by one step.
+     */
+    increment(multiplier?: number): void;
+    /**
+     * Decrement the value by one step.
+     */
+    decrement(multiplier?: number): void;
+    /**
+     * Set the disabled state.
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * Set the readonly state.
+     */
+    setReadonly(readonly: boolean): void;
+    /** @internal */
+    registerInputCommit(commitFn: () => void): void;
+}
+/**
+ * Inputs for configuring the NumberField primitive.
+ */
+interface NgpNumberFieldProps {
+    /**
+     * The id of the number field.
+     */
+    readonly id?: Signal<string>;
+    /**
+     * The current value.
+     */
+    readonly value?: Signal<number | null>;
+    /**
+     * The minimum value.
+     */
+    readonly min?: Signal<number>;
+    /**
+     * The maximum value.
+     */
+    readonly max?: Signal<number>;
+    /**
+     * The step value.
+     */
+    readonly step?: Signal<number>;
+    /**
+     * The large step value (used with Shift key).
+     */
+    readonly largeStep?: Signal<number>;
+    /**
+     * Whether the number field is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Whether the number field is readonly.
+     */
+    readonly readonly?: Signal<boolean>;
+    /**
+     * Callback fired when the value changes.
+     */
+    readonly onValueChange?: (value: number | null) => void;
+}
+declare const ngpNumberField: ({ id, value: _value, min, max, step, largeStep: _largeStep, disabled: _disabled, readonly: _readonly, onValueChange, }: NgpNumberFieldProps) => NgpNumberFieldState;
+declare const injectNumberFieldState: {
+    (): Signal<NgpNumberFieldState>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): Signal<NgpNumberFieldState | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): Signal<NgpNumberFieldState> | Signal<NgpNumberFieldState | null>;
+};
+declare const provideNumberFieldState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpNumberField` directive to an element that represents the number field
+ * and contains the input, increment, and decrement buttons.
+ */
+declare class NgpNumberField {
+    /**
+     * The id of the number field. If not provided, a unique id will be generated.
+     */
+    readonly id: _angular_core.InputSignal<string>;
+    /**
+     * The value of the number field.
+     */
+    readonly value: _angular_core.InputSignalWithTransform<number | null, NumberInput>;
+    /**
+     * Emits when the value changes.
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<number | null>;
+    /**
+     * The minimum value.
+     */
+    readonly min: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The maximum value.
+     */
+    readonly max: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The step value.
+     */
+    readonly step: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The large step value (used with Shift key).
+     */
+    readonly largeStep: _angular_core.InputSignalWithTransform<number, NumberInput>;
+    /**
+     * The disabled state of the number field.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The readonly state of the number field.
+     */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * @internal
+     */
+    protected readonly state: NgpNumberFieldState;
+    /**
+     * Set the value of the number field.
+     */
+    setValue(value: number | null): void;
+    /**
+     * Increment the value.
+     */
+    increment(multiplier?: number): void;
+    /**
+     * Decrement the value.
+     */
+    decrement(multiplier?: number): void;
+    /**
+     * Set the disabled state.
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * Set the readonly state.
+     */
+    setReadonly(readonly: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpNumberField, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpNumberField, "[ngpNumberField]", ["ngpNumberField"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpNumberFieldValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpNumberFieldMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpNumberFieldMax"; "required": false; "isSignal": true; }; "step": { "alias": "ngpNumberFieldStep"; "required": false; "isSignal": true; }; "largeStep": { "alias": "ngpNumberFieldLargeStep"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpNumberFieldDisabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "ngpNumberFieldReadonly"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpNumberFieldValueChange"; }, never, never, true, never>;
+}
+
+/**
+ * Apply the `ngpNumberFieldInput` directive to an input element within a number field.
+ */
+declare class NgpNumberFieldInput {
+    /**
+     * Whether mouse wheel changes the value when the input is focused.
+     */
+    readonly allowWheelScrub: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpNumberFieldInput, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpNumberFieldInput, "[ngpNumberFieldInput]", ["ngpNumberFieldInput"], { "allowWheelScrub": { "alias": "ngpNumberFieldInputAllowWheelScrub"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Public state surface for the NumberField Input primitive.
+ */
+interface NgpNumberFieldInputState {
+    /**
+     * Focus the input element.
+     */
+    focus(): void;
+}
+/**
+ * Inputs for configuring the NumberField Input primitive.
+ */
+interface NgpNumberFieldInputProps {
+    /**
+     * Whether mouse wheel changes the value.
+     */
+    readonly allowWheelScrub?: Signal<boolean>;
+}
+declare const ngpNumberFieldInput: ({ allowWheelScrub }: NgpNumberFieldInputProps) => NgpNumberFieldInputState;
+declare const injectNumberFieldInputState: {
+    (): Signal<NgpNumberFieldInputState>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): Signal<NgpNumberFieldInputState | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): Signal<NgpNumberFieldInputState> | Signal<NgpNumberFieldInputState | null>;
+};
+declare const provideNumberFieldInputState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpNumberFieldIncrement` directive to a button element that increments the number field value.
+ */
+declare class NgpNumberFieldIncrement {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpNumberFieldIncrement, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpNumberFieldIncrement, "[ngpNumberFieldIncrement]", ["ngpNumberFieldIncrement"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Public state surface for the NumberField Increment primitive.
+ */
+interface NgpNumberFieldIncrementState {
+}
+/**
+ * Inputs for configuring the NumberField Increment primitive.
+ */
+interface NgpNumberFieldIncrementProps {
+}
+declare const ngpNumberFieldIncrement: ({}: NgpNumberFieldIncrementProps) => NgpNumberFieldIncrementState;
+declare const injectNumberFieldIncrementState: {
+    (): _angular_core.Signal<NgpNumberFieldIncrementState>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): _angular_core.Signal<NgpNumberFieldIncrementState | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): _angular_core.Signal<NgpNumberFieldIncrementState> | _angular_core.Signal<NgpNumberFieldIncrementState | null>;
+};
+declare const provideNumberFieldIncrementState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpNumberFieldDecrement` directive to a button element that decrements the number field value.
+ */
+declare class NgpNumberFieldDecrement {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpNumberFieldDecrement, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpNumberFieldDecrement, "[ngpNumberFieldDecrement]", ["ngpNumberFieldDecrement"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Public state surface for the NumberField Decrement primitive.
+ */
+interface NgpNumberFieldDecrementState {
+}
+/**
+ * Inputs for configuring the NumberField Decrement primitive.
+ */
+interface NgpNumberFieldDecrementProps {
+}
+declare const ngpNumberFieldDecrement: ({}: NgpNumberFieldDecrementProps) => NgpNumberFieldDecrementState;
+declare const injectNumberFieldDecrementState: {
+    (): _angular_core.Signal<NgpNumberFieldDecrementState>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): _angular_core.Signal<NgpNumberFieldDecrementState | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+        skipSelf?: boolean;
+    }): _angular_core.Signal<NgpNumberFieldDecrementState> | _angular_core.Signal<NgpNumberFieldDecrementState | null>;
+};
+declare const provideNumberFieldDecrementState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+export { NgpNumberField, NgpNumberFieldDecrement, NgpNumberFieldIncrement, NgpNumberFieldInput, injectNumberFieldDecrementState, injectNumberFieldIncrementState, injectNumberFieldInputState, injectNumberFieldState, ngpNumberField, ngpNumberFieldDecrement, ngpNumberFieldIncrement, ngpNumberFieldInput, provideNumberFieldDecrementState, provideNumberFieldIncrementState, provideNumberFieldInputState, provideNumberFieldState };
+export type { NgpNumberFieldDecrementProps, NgpNumberFieldDecrementState, NgpNumberFieldIncrementProps, NgpNumberFieldIncrementState, NgpNumberFieldInputProps, NgpNumberFieldInputState, NgpNumberFieldProps, NgpNumberFieldState };

package/package.json

@@ -2,7 +2,7 @@
   "name": "ng-primitives",
   "description": "Angular Primitives is a low-level headless UI component library with a focus on accessibility, customization, and developer experience. ",
   "license": "Apache-2.0",
-  "version": "0.111.0",
+  "version": "0.112.0",
   "keywords": [
     "angular",
     "primitives",
@@ -164,6 +164,10 @@
       "types": "./navigation-menu/index.d.ts",
       "default": "./fesm2022/ng-primitives-navigation-menu.mjs"
     },
+    "./number-field": {
+      "types": "./number-field/index.d.ts",
+      "default": "./fesm2022/ng-primitives-number-field.mjs"
+    },
     "./pagination": {
       "types": "./pagination/index.d.ts",
       "default": "./fesm2022/ng-primitives-pagination.mjs"

package/portal/index.d.ts

@@ -285,6 +285,8 @@ declare class NgpOverlay<T = unknown> implements CooldownOverlay {
     private readonly cooldownManager;
     /** Access any parent overlays */
     private readonly parentOverlay;
+    /** Track child overlays for outside click detection */
+    private readonly childOverlays;
     /** Signal tracking the portal instance */
     private readonly portal;
     /** Signal tracking the overlay position */
@@ -394,6 +396,21 @@ declare class NgpOverlay<T = unknown> implements CooldownOverlay {
      * Get the elements of the overlay
      */
     getElements(): HTMLElement[];
+    /**
+     * Register a child overlay for outside click detection.
+     * @internal
+     */
+    registerChildOverlay(child: NgpOverlay): void;
+    /**
+     * Unregister a child overlay.
+     * @internal
+     */
+    unregisterChildOverlay(child: NgpOverlay): void;
+    /**
+     * Check if the event path includes any child overlay elements (recursively).
+     * @internal
+     */
+    isInsideChildOverlay(path: EventTarget[]): boolean;
     /**
      * Internal method to create the overlay
      * @param skipCooldown If true, skip registering with the cooldown manager

package/schematics/ng-generate/templates/number-field/number-field.__fileSuffix@dasherize__.ts.template

@@ -0,0 +1,109 @@
+import { Component } from '@angular/core';
+import {
+  NgpNumberField,
+  NgpNumberFieldDecrement,
+  NgpNumberFieldIncrement,
+  NgpNumberFieldInput,
+} from 'ng-primitives/number-field';
+
+@Component({
+  selector: '<%= prefix %>-number-field',
+  hostDirectives: [
+    {
+      directive: NgpNumberField,
+      inputs: [
+        'ngpNumberFieldValue:value',
+        'ngpNumberFieldMin:min',
+        'ngpNumberFieldMax:max',
+        'ngpNumberFieldStep:step',
+        'ngpNumberFieldLargeStep:largeStep',
+        'ngpNumberFieldDisabled:disabled',
+        'ngpNumberFieldReadonly:readonly',
+      ],
+      outputs: ['ngpNumberFieldValueChange:valueChange'],
+    },
+  ],
+  imports: [NgpNumberFieldInput, NgpNumberFieldIncrement, NgpNumberFieldDecrement],
+  template: `
+    <button ngpNumberFieldDecrement aria-label="Decrement">−</button>
+    <input ngpNumberFieldInput />
+    <button ngpNumberFieldIncrement aria-label="Increment">+</button>
+  `,
+  styles: `
+/* These styles rely on CSS variables that can be imported from ng-primitives/example-theme/index.css in your global styles */
+
+    :host {
+      display: inline-flex;
+      align-items: center;
+      border-radius: 8px;
+      box-shadow: var(--ngp-input-shadow);
+      background-color: var(--ngp-background);
+      overflow: hidden;
+    }
+
+    :host:focus-within {
+      outline: 2px solid var(--ngp-focus-ring);
+      outline-offset: 2px;
+    }
+
+    [ngpNumberFieldInput] {
+      width: 64px;
+      height: 36px;
+      border: none;
+      outline: none;
+      text-align: center;
+      font-size: 0.875rem;
+      color: var(--ngp-text-primary);
+      background: transparent;
+      box-sizing: border-box;
+      padding: 0;
+    }
+
+    [ngpNumberFieldInput]::placeholder {
+      color: var(--ngp-text-placeholder);
+    }
+
+    [ngpNumberFieldIncrement],
+    [ngpNumberFieldDecrement] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border: none;
+      background: transparent;
+      color: var(--ngp-text-secondary);
+      cursor: pointer;
+      font-size: 1rem;
+      user-select: none;
+      -webkit-touch-callout: none;
+      transition:
+        color 150ms ease,
+        background-color 150ms ease;
+    }
+
+    [ngpNumberFieldIncrement][data-hover],
+    [ngpNumberFieldDecrement][data-hover] {
+      background-color: var(--ngp-background-hover);
+      color: var(--ngp-text-primary);
+    }
+
+    [ngpNumberFieldIncrement][data-press],
+    [ngpNumberFieldDecrement][data-press] {
+      background-color: var(--ngp-background-active);
+    }
+
+    [ngpNumberFieldIncrement][data-disabled],
+    [ngpNumberFieldDecrement][data-disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    [ngpNumberFieldIncrement][data-disabled][data-hover],
+    [ngpNumberFieldDecrement][data-disabled][data-hover] {
+      background: transparent;
+      color: var(--ngp-text-secondary);
+    }
+  `,
+})
+export class NumberField<%= componentSuffix %> {}