@ngxpert/input-otp/types/ngxpert-input-otp.d.ts

One-time password input component for Angular.

import * as _angular_core from '@angular/core';
import { InputSignal, OutputEmitterRef, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
import { ControlValueAccessor, Validator, FormControl, AbstractControl, ValidationErrors } from '@angular/forms';

interface SlotProps {
    isActive: InputSignal<boolean>;
    char: string | null;
    placeholderChar: InputSignal<string | null>;
    hasFakeCaret: InputSignal<boolean>;
}
interface InputOTPInputsOutputs {
    maxLength: InputSignal<number>;
    textAlign?: InputSignal<'left' | 'center' | 'right'>;
    pattern?: InputSignal<string | RegExp | undefined>;
    placeholder?: InputSignal<string | undefined>;
    inputMode?: InputSignal<'numeric' | 'text'>;
    disabled?: InputSignal<boolean>;
    autoComplete?: InputSignal<string | undefined>;
    pushPasswordManagerStrategy?: InputSignal<'increase-width' | 'none'>;
    containerClass?: InputSignal<string | undefined>;
    complete: OutputEmitterRef<string>;
}
interface OTPSlot {
    char: string | null;
    placeholderChar: string | null;
    isActive: boolean;
    hasFakeCaret: boolean;
}
interface OTPRenderContext {
    slots: OTPSlot[];
    isFocused: boolean;
    isHovering: boolean;
}

declare class InputOTPComponent implements AfterViewInit, OnDestroy, ControlValueAccessor, Validator, InputOTPInputsOutputs {
    static nextId: number;
    readonly idNextId: string;
    id: _angular_core.InputSignal<string | undefined>;
    name: _angular_core.InputSignal<string | undefined>;
    containerRef: _angular_core.Signal<ElementRef<HTMLDivElement> | undefined>;
    inputRef: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
    maxLength: _angular_core.InputSignal<number>;
    textAlign: _angular_core.InputSignal<"left" | "center" | "right">;
    pattern: _angular_core.InputSignal<string | RegExp | undefined>;
    placeholder: _angular_core.InputSignal<string | undefined>;
    inputMode: _angular_core.InputSignal<"numeric" | "text">;
    disabled: _angular_core.InputSignal<boolean>;
    autoComplete: _angular_core.InputSignal<string | undefined>;
    pushPasswordManagerStrategy: _angular_core.InputSignal<"increase-width" | "none">;
    containerClass: _angular_core.InputSignal<string | undefined>;
    complete: _angular_core.OutputEmitterRef<string>;
    mirrorSelectionStart: _angular_core.WritableSignal<number | null>;
    mirrorSelectionEnd: _angular_core.WritableSignal<number | null>;
    isFocused: _angular_core.WritableSignal<boolean>;
    isHovering: _angular_core.WritableSignal<boolean>;
    hasPWMBadge: _angular_core.WritableSignal<boolean>;
    hasPWMBadgeSpace: _angular_core.WritableSignal<boolean>;
    done: _angular_core.WritableSignal<boolean>;
    formControl: FormControl<string | null>;
    value: _angular_core.Signal<string | null | undefined>;
    slots: _angular_core.Signal<OTPSlot[]>;
    private resizeObserver?;
    private previousValue;
    private document;
    private renderer2;
    private isIOS;
    private inputMetadataRef;
    private onDocumentSelectionChange?;
    constructor();
    writeValue(value: string): void;
    registerOnChange(fn: (value: string | null) => void): void;
    registerOnTouched(fn: () => void): void;
    setDisabledState(isDisabled: boolean): void;
    validate(control: AbstractControl<string | null>): ValidationErrors | null;
    private valueOrFocusedChanged;
    rootStyle: _angular_core.Signal<Record<string, string>>;
    inputStyle: _angular_core.Signal<Record<string, string | undefined>>;
    ngAfterViewInit(): void;
    private safeInsertRule;
    ngOnDestroy(): void;
    onMouseEnter(): void;
    onMouseLeave(): void;
    onFocus(): void;
    onBlur(): void;
    private changeFocus;
    private setupResizeObserver;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputOTPComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputOTPComponent, "input-otp", ["inputOtp"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": true; "isSignal": true; }; "textAlign": { "alias": "textAlign"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "inputMode": { "alias": "inputMode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autoComplete": { "alias": "autoComplete"; "required": false; "isSignal": true; }; "pushPasswordManagerStrategy": { "alias": "pushPasswordManagerStrategy"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; }, { "complete": "complete"; }, never, ["*"], true, never>;
}

declare const REGEXP_ONLY_DIGITS = "^\\d+$";
declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";

export { InputOTPComponent, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };
export type { InputOTPInputsOutputs, OTPRenderContext, OTPSlot, SlotProps };