@nanahoshi/mona-ui 0.17.0 → 0.18.0

package/otp-input/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/nanahoshi-mona-ui-otp-input.mjs",
+  "typings": "../types/nanahoshi-mona-ui-otp-input.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {
@@ -239,6 +239,10 @@
       "types": "./types/nanahoshi-mona-ui-numeric-text-box.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs"
     },
+    "./otp-input": {
+      "types": "./types/nanahoshi-mona-ui-otp-input.d.ts",
+      "default": "./fesm2022/nanahoshi-mona-ui-otp-input.mjs"
+    },
     "./pager": {
       "types": "./types/nanahoshi-mona-ui-pager.d.ts",
       "default": "./fesm2022/nanahoshi-mona-ui-pager.mjs"

package/types/nanahoshi-mona-ui-otp-input.d.ts

@@ -0,0 +1,209 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, TemplateRef } from '@angular/core';
+import { FormValueControl } from '@angular/forms/signals';
+import { VariantInputs, AttributeConfig } from '@nanahoshi/mona-ui/internal';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+type OtpInputType = "text" | "number" | "password";
+
+declare const otpInputSlotThemeVariants: (props?: ({
+    rounded?: "full" | "large" | "medium" | "none" | "small" | null | undefined;
+    size?: "large" | "medium" | "small" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type OtpInputSlotVariantProps = VariantProps<typeof otpInputSlotThemeVariants>;
+type OtpInputSlotVariantInput = VariantInputs<OtpInputSlotVariantProps>;
+type OtpInputVariantProps = OtpInputSlotVariantProps;
+type OtpInputVariantInput = OtpInputSlotVariantInput;
+
+interface OtpSlotViewModel {
+    active: boolean;
+    classes: string;
+    displayCharacter: string;
+    filled: boolean;
+    index: number;
+    placeholder: boolean;
+    selected: boolean;
+}
+interface OtpGroupViewModel {
+    index: number;
+    slots: OtpSlotViewModel[];
+}
+declare class OtpInputComponent implements OtpInputVariantInput, FormValueControl<string> {
+    protected readonly activeSlotIndex: _angular_core.Signal<number>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly computedAriaLabel: _angular_core.Signal<string | null>;
+    protected readonly computedAriaLabelledby: _angular_core.Signal<string | null>;
+    protected readonly derivedAutocomplete: _angular_core.Signal<string>;
+    protected readonly derivedInputMode: _angular_core.Signal<string>;
+    protected readonly hasFocus: _angular_core.WritableSignal<boolean>;
+    protected readonly inputClass: _angular_core.Signal<string>;
+    protected readonly inputRef: _angular_core.Signal<ElementRef<HTMLInputElement>>;
+    protected readonly invalidState: _angular_core.Signal<boolean>;
+    protected readonly isComplete: _angular_core.Signal<boolean>;
+    protected readonly isComposing: _angular_core.WritableSignal<boolean>;
+    protected readonly logicalSelectionEnd: _angular_core.Signal<number>;
+    protected readonly logicalSelectionStart: _angular_core.Signal<number>;
+    protected readonly nativeInputType: _angular_core.Signal<"text" | "password">;
+    protected readonly normalizedLength: _angular_core.Signal<number>;
+    protected readonly sanitizedAttributes: _angular_core.Signal<AttributeConfig>;
+    protected readonly selectionEnd: _angular_core.WritableSignal<number>;
+    protected readonly selectionStart: _angular_core.WritableSignal<number>;
+    protected readonly separatorTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    protected readonly visualGroups: _angular_core.Signal<OtpGroupViewModel[]>;
+    /**
+     * @description Accessible name for the inner `<input>` element.
+     * @default "Verification code"
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * @description Regular expression used to determine whether each individual OTP character is allowed.
+     * @default null
+     */
+    readonly characterPattern: _angular_core.InputSignal<RegExp | null>;
+    /**
+     * @description Emitted when a user interaction completes the verification code.
+     */
+    readonly complete: _angular_core.OutputEmitterRef<string>;
+    /**
+     * @description Renders the component with reduced visual emphasis and removes pointer interaction.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Configures slot grouping lengths. Accepts a uniform number or an array of group sizes.
+     * @default null
+     */
+    readonly groupLength: _angular_core.InputSignal<number | number[] | null>;
+    /**
+     * @description Additional HTML attributes applied directly to the inner `<input>` element.
+     * @default {}
+     */
+    readonly inputAttributes: _angular_core.InputSignal<AttributeConfig>;
+    /**
+     * @description Emitted when the inner input loses focus.
+     */
+    readonly inputBlur: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Emitted when the inner input gains focus.
+     */
+    readonly inputFocus: _angular_core.OutputEmitterRef<FocusEvent>;
+    /**
+     * @description Marks the OTP input as invalid. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly invalid: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the total number of characters accepted by the OTP input and the number of visual slots.
+     * @default 4
+     */
+    readonly length: _angular_core.InputSignal<number>;
+    /**
+     * @description Hint character displayed in empty visual slots.
+     * @default ""
+     */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /**
+     * @description Prevents value changes while preserving the component's focusability and visual state.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Marks the OTP input as required. Triggers invalid state when touched and incomplete.
+     * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Border-radius preset applied to the OTP slots.
+     * @default "medium"
+     */
+    readonly rounded: _angular_core.InputSignal<"full" | "large" | "medium" | "none" | "small" | null | undefined>;
+    /**
+     * @description Text character or string displayed between visual slot groups.
+     * @default ""
+     */
+    readonly separator: _angular_core.InputSignal<string>;
+    /**
+     * @description Additional CSS classes applied to separator elements.
+     * @default ""
+     */
+    readonly separatorClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @description Size preset controlling the dimensions and font size of the OTP slots.
+     * @default "medium"
+     */
+    readonly size: _angular_core.InputSignal<"large" | "medium" | "small" | null | undefined>;
+    /**
+     * @description Additional CSS classes applied to each visual slot element.
+     * @default ""
+     */
+    readonly slotClass: _angular_core.InputSignal<string | string[]>;
+    /**
+     * @description Determines whether visual slots within a group have spacing between them or are joined together.
+     * @default true
+     */
+    readonly spacing: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Emitted when the OTP input is interacted with — on blur or user value change.
+     * The `FormField` directive listens to this to mark the field as touched.
+     */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
+    /**
+     * @description Sets the touched state of the OTP input. When bound to a signal form field via `[formField]`,
+     * this is written by the `FormField` directive.
+     * @default false
+     */
+    readonly touched: _angular_core.InputSignal<boolean>;
+    /**
+     * @description Sets the type of the OTP input ("text", "number", or "password").
+     * @default "text"
+     */
+    readonly type: _angular_core.InputSignal<OtpInputType>;
+    /**
+     * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+     * @default ""
+     */
+    readonly userClass: _angular_core.InputSignal<string>;
+    /**
+     * @description Two-way bindable current value of the OTP input.
+     * @default ""
+     */
+    readonly value: _angular_core.ModelSignal<string>;
+    constructor();
+    blur(): void;
+    focus(options?: FocusOptions): void;
+    focus(index?: number): void;
+    protected onBeforeInput(event: InputEvent): void;
+    protected onBlur(event: FocusEvent): void;
+    protected onCompositionEnd(event: CompositionEvent): void;
+    protected onCompositionStart(): void;
+    protected onFocus(event: FocusEvent): void;
+    protected onInput(_event?: Event): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    protected onKeyUp(): void;
+    protected onPaste(event: ClipboardEvent): void;
+    protected onSelect(): void;
+    protected onSlotPointerDown(event: PointerEvent, index: number): void;
+    private applyUserInsertion;
+    private syncSelection;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpInputComponent, "mona-otp-input", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "characterPattern": { "alias": "characterPattern"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "groupLength": { "alias": "groupLength"; "required": false; "isSignal": true; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "separatorClass": { "alias": "separatorClass"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "slotClass": { "alias": "slotClass"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "complete": "complete"; "inputBlur": "inputBlur"; "inputFocus": "inputFocus"; "touch": "touch"; "value": "valueChange"; }, ["separatorTemplate"], never, true, never>;
+}
+
+interface OtpInputSeparatorContext {
+    $implicit: number;
+    groupIndex: number;
+}
+declare class OtpInputSeparatorTemplateDirective {
+    readonly templateRef: TemplateRef<any>;
+    static ngTemplateContextGuard(_directive: OtpInputSeparatorTemplateDirective, _context: unknown): _context is OtpInputSeparatorContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInputSeparatorTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<OtpInputSeparatorTemplateDirective, "ng-template[monaOtpInputSeparatorTemplate]", never, {}, {}, never, never, true, never>;
+}
+
+export { OtpInputComponent, OtpInputSeparatorTemplateDirective };
+export type { OtpInputSeparatorContext, OtpInputType, OtpInputVariantProps };