ng-primitives 0.87.0 → 0.88.0

package/input-otp/input-otp/input-otp.d.ts

@@ -0,0 +1,133 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import type { NgpInputOtpInput } from '../input-otp-input/input-otp-input';
+import type { NgpInputOtpSlot } from '../input-otp-slot/input-otp-slot';
+import * as i0 from "@angular/core";
+export type NgpInputOtpInputMode = 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url';
+export declare class NgpInputOtp {
+    /**
+     * Access the element reference.
+     */
+    readonly elementRef: import("@angular/core").ElementRef<HTMLElement>;
+    /**
+     * The id of the input-otp.
+     */
+    readonly id: import("@angular/core").InputSignal<string>;
+    /**
+     * The current value of the OTP.
+     */
+    readonly value: import("@angular/core").InputSignal<string>;
+    /**
+     * The regex pattern for allowed characters.
+     */
+    readonly pattern: import("@angular/core").InputSignal<string>;
+    /**
+     * The input mode for the hidden input.
+     */
+    readonly inputMode: import("@angular/core").InputSignal<NgpInputOtpInputMode>;
+    /**
+     * Function to transform pasted text.
+     */
+    readonly pasteTransformer: import("@angular/core").InputSignal<((text: string) => string) | undefined>;
+    /**
+     * Whether the input-otp is disabled.
+     */
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    /**
+     * The placeholder character to display when a slot is empty.
+     */
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    /**
+     * Event emitted when the value changes.
+     */
+    readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+    /**
+     * Event emitted when the OTP is complete (maxLength characters entered).
+     */
+    readonly complete: import("@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: import("@angular/core").Signal<number>;
+    /**
+     * The focus state of the input.
+     * @internal
+     */
+    readonly isFocused: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * The selection start position.
+     * @internal
+     */
+    readonly selectionStart: import("@angular/core").WritableSignal<number>;
+    /**
+     * The selection end position.
+     * @internal
+     */
+    readonly selectionEnd: import("@angular/core").WritableSignal<number>;
+    /**
+     * The state of the input-otp.
+     */
+    protected readonly state: import("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: i0.ɵɵFactoryDeclaration<NgpInputOtp, never>;
+    static ɵdir: i0.ɵɵ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>;
+}

package/input-otp/input-otp-input/input-otp-input.d.ts

@@ -0,0 +1,57 @@
+import { AfterViewInit } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "ng-primitives/a11y";
+export declare class NgpInputOtpInput implements AfterViewInit {
+    /**
+     * Access the element reference.
+     */
+    readonly elementRef: import("@angular/core").ElementRef<HTMLInputElement>;
+    /**
+     * Access the input-otp state.
+     */
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<import("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: i0.ɵɵFactoryDeclaration<NgpInputOtpInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpInputOtpInput, "input[ngpInputOtpInput]", ["ngpInputOtpInput"], {}, {}, never, never, true, [{ directive: typeof i1.NgpVisuallyHidden; inputs: {}; outputs: {}; }]>;
+}

package/input-otp/input-otp-slot/input-otp-slot.d.ts

@@ -0,0 +1,45 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class NgpInputOtpSlot implements OnDestroy {
+    /**
+     * Access the input-otp state.
+     */
+    protected readonly state: import("@angular/core").Signal<import("ng-primitives/state").State<import("ng-primitives/input-otp").NgpInputOtp>>;
+    /**
+     * The computed index of this slot based on registration order.
+     */
+    readonly index: import("@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: import("@angular/core").Signal<boolean>;
+    /**
+     * Whether this slot should show the caret.
+     */
+    protected readonly caret: import("@angular/core").Signal<boolean>;
+    /**
+     * Whether this slot is filled with a character.
+     */
+    protected readonly filled: import("@angular/core").Signal<boolean>;
+    /**
+     * Whether to show placeholder for this slot.
+     */
+    protected readonly showPlaceholder: import("@angular/core").Signal<boolean>;
+    /**
+     * The display character for this slot (character or placeholder).
+     */
+    protected readonly displayChar: import("@angular/core").Signal<string>;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Handle click events on the slot.
+     * @internal
+     */
+    protected onClick(event: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgpInputOtpSlot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgpInputOtpSlot, "[ngpInputOtpSlot]", ["ngpInputOtpSlot"], {}, {}, never, never, true, never>;
+}

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.87.0",
+  "version": "0.88.0",
   "keywords": [
     "angular",
     "primitives",
@@ -75,14 +75,14 @@
       "types": "./ai/index.d.ts",
       "default": "./fesm2022/ng-primitives-ai.mjs"
     },
-    "./avatar": {
-      "types": "./avatar/index.d.ts",
-      "default": "./fesm2022/ng-primitives-avatar.mjs"
-    },
     "./autofill": {
       "types": "./autofill/index.d.ts",
       "default": "./fesm2022/ng-primitives-autofill.mjs"
     },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "default": "./fesm2022/ng-primitives-avatar.mjs"
+    },
     "./button": {
       "types": "./button/index.d.ts",
       "default": "./fesm2022/ng-primitives-button.mjs"
@@ -103,14 +103,14 @@
       "types": "./date-picker/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-picker.mjs"
     },
-    "./date-time-luxon": {
-      "types": "./date-time-luxon/index.d.ts",
-      "default": "./fesm2022/ng-primitives-date-time-luxon.mjs"
-    },
     "./date-time": {
       "types": "./date-time/index.d.ts",
       "default": "./fesm2022/ng-primitives-date-time.mjs"
     },
+    "./date-time-luxon": {
+      "types": "./date-time-luxon/index.d.ts",
+      "default": "./fesm2022/ng-primitives-date-time-luxon.mjs"
+    },
     "./dialog": {
       "types": "./dialog/index.d.ts",
       "default": "./fesm2022/ng-primitives-dialog.mjs"
@@ -131,6 +131,10 @@
       "types": "./input/index.d.ts",
       "default": "./fesm2022/ng-primitives-input.mjs"
     },
+    "./input-otp": {
+      "types": "./input-otp/index.d.ts",
+      "default": "./fesm2022/ng-primitives-input-otp.mjs"
+    },
     "./interactions": {
       "types": "./interactions/index.d.ts",
       "default": "./fesm2022/ng-primitives-interactions.mjs"
@@ -155,14 +159,14 @@
       "types": "./pagination/index.d.ts",
       "default": "./fesm2022/ng-primitives-pagination.mjs"
     },
-    "./popover": {
-      "types": "./popover/index.d.ts",
-      "default": "./fesm2022/ng-primitives-popover.mjs"
-    },
     "./portal": {
       "types": "./portal/index.d.ts",
       "default": "./fesm2022/ng-primitives-portal.mjs"
     },
+    "./popover": {
+      "types": "./popover/index.d.ts",
+      "default": "./fesm2022/ng-primitives-popover.mjs"
+    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "default": "./fesm2022/ng-primitives-progress.mjs"
@@ -183,10 +187,6 @@
       "types": "./search/index.d.ts",
       "default": "./fesm2022/ng-primitives-search.mjs"
     },
-    "./select": {
-      "types": "./select/index.d.ts",
-      "default": "./fesm2022/ng-primitives-select.mjs"
-    },
     "./separator": {
       "types": "./separator/index.d.ts",
       "default": "./fesm2022/ng-primitives-separator.mjs"
@@ -215,14 +215,18 @@
       "types": "./toast/index.d.ts",
       "default": "./fesm2022/ng-primitives-toast.mjs"
     },
-    "./toggle": {
-      "types": "./toggle/index.d.ts",
-      "default": "./fesm2022/ng-primitives-toggle.mjs"
+    "./select": {
+      "types": "./select/index.d.ts",
+      "default": "./fesm2022/ng-primitives-select.mjs"
     },
     "./toggle-group": {
       "types": "./toggle-group/index.d.ts",
       "default": "./fesm2022/ng-primitives-toggle-group.mjs"
     },
+    "./toggle": {
+      "types": "./toggle/index.d.ts",
+      "default": "./fesm2022/ng-primitives-toggle.mjs"
+    },
     "./toolbar": {
       "types": "./toolbar/index.d.ts",
       "default": "./fesm2022/ng-primitives-toolbar.mjs"

package/schematics/ng-generate/schema.d.ts

@@ -30,7 +30,8 @@ export interface AngularPrimitivesComponentSchema {
     | 'popover'
     | 'combobox'
     | 'select'
-    | 'native-select';
+    | 'native-select'
+    | 'input-otp';
 
   /**
    * The path where the component files should be created, relative to the current workspace.

package/schematics/ng-generate/schema.json

@@ -20,16 +20,17 @@
         "file-upload",
         "form-field",
         "input",
+        "input-otp",
         "listbox",
         "menu",
         "meter",
+        "native-select",
         "pagination",
         "popover",
         "progress",
         "radio",
         "search",
         "select",
-        "native-select",
         "separator",
         "slider",
         "switch",

package/schematics/ng-generate/templates/input-otp/input-otp.__fileSuffix@dasherize__.ts.template

@@ -0,0 +1,197 @@
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+  booleanAttribute,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  model,
+  numberAttribute,
+  signal,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot } from 'ng-primitives/input-otp';
+import { ChangeFn, TouchedFn } from 'ng-primitives/utils';
+
+@Component({
+  selector: '<%= prefix %>-input-otp',
+  imports: [NgpInputOtp, NgpInputOtpInput, NgpInputOtpSlot],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputOtp<%= componentSuffix %>),
+      multi: true,
+    },
+  ],
+  template: `
+    <div
+      [ngpInputOtpValue]="value()"
+      [ngpInputOtpDisabled]="disabled() || formDisabled()"
+      [ngpInputOtpPattern]="pattern()"
+      [ngpInputOtpPlaceholder]="placeholder()"
+      [ngpInputOtpInputMode]="inputMode()"
+      (ngpInputOtpValueChange)="onValueChange($event)"
+      (ngpInputOtpComplete)="onComplete()"
+      ngpInputOtp
+    >
+      <input ngpInputOtpInput />
+      <div class="slots">
+        @for (_ of slots(); track $index) {
+          <div class="slot" ngpInputOtpSlot></div>
+        }
+      </div>
+    </div>
+  `,
+  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;
+      flex-direction: column;
+      gap: 12px;
+      max-width: 100%;
+    }
+
+    .slots {
+      display: flex;
+      gap: 8px;
+    }
+
+    .slot {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      border: 2px solid var(--ngp-border);
+      border-radius: 8px;
+      background: var(--ngp-background);
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--ngp-text-primary);
+      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      cursor: pointer;
+      position: relative;
+    }
+
+    .slot[data-filled] {
+      border-color: var(--ngp-border-strong);
+      background: var(--ngp-background-accent);
+    }
+
+    .slot[data-active] {
+      border-color: var(--ngp-focus-ring);
+      box-shadow: 0 0 0 1px var(--ngp-focus-ring);
+    }
+
+    .slot[data-placeholder] {
+      color: var(--ngp-text-placeholder);
+    }
+
+    .slot[data-caret]::after {
+      content: '';
+      position: absolute;
+      width: 2px;
+      height: 20px;
+      background: var(--ngp-focus-ring);
+      animation: blink 1s infinite;
+    }
+
+    @keyframes blink {
+      0%,
+      50% {
+        opacity: 1;
+      }
+      51%,
+      100% {
+        opacity: 0;
+      }
+    }
+
+    :host([data-disabled]) .slot {
+      background: var(--ngp-background-disabled);
+      color: var(--ngp-text-disabled);
+      border-color: var(--ngp-border-disabled);
+      cursor: not-allowed;
+    }
+  `,
+})
+export class InputOtp<%= componentSuffix %> implements ControlValueAccessor {
+  /**
+   * The number of slots to display.
+   */
+  readonly length = input<number, NumberInput>(6, {
+    transform: numberAttribute,
+  });
+
+  /**
+   * Whether the input is disabled.
+   */
+  readonly disabled = input<boolean, BooleanInput>(false, {
+    transform: booleanAttribute,
+  });
+
+  /**
+   * The pattern for allowed characters.
+   */
+  readonly pattern = input('[0-9]');
+
+  /**
+   * The placeholder character for empty slots.
+   */
+  readonly placeholder = input('');
+
+  /**
+   * The input mode for the hidden input.
+   */
+  readonly inputMode = input<'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url'>(
+    'numeric',
+  );
+
+  /**
+   * Create an array for tracking slots.
+   */
+  protected readonly slots = computed(() => Array.from({ length: this.length() }, (_, i) => i));
+
+  /**
+   * The current value.
+   */
+  readonly value = model<string>('');
+
+  private onChange: ChangeFn<string> = () => {};
+  private onTouched: TouchedFn = () => {};
+
+  protected readonly formDisabled = signal(false);
+
+  /**
+   * Handle value changes from the input-otp directive.
+   */
+  onValueChange(value: string): void {
+    this.value.set(value);
+    this.onChange(value);
+  }
+
+  /**
+   * Handle completion events from the input-otp directive.
+   */
+  onComplete(): void {
+    this.onTouched();
+  }
+
+  // ControlValueAccessor implementation
+  writeValue(value: string): void {
+    this.value.set(value);
+  }
+
+  registerOnChange(fn: ChangeFn<string>): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: TouchedFn): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+}