ngx-otp-inputs
Version:
A customizable standalone Angular OTP input component with RTL/LTR support, masking, auto-submit, and reactive forms integration.
51 lines (50 loc) • 2.79 kB
TypeScript
import { EventEmitter, OnInit, QueryList, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import * as i0 from "@angular/core";
export declare class NgxOtpInputsComponent implements OnInit, ControlValueAccessor, AfterViewInit {
private cdr;
constructor(cdr: ChangeDetectorRef);
otpIndexes: number[];
otpValues: string[];
length: number;
direction: 'ltr' | 'rtl';
disabled: boolean;
inputType: 'number' | 'text' | 'alphanumeric';
autoFocus: boolean;
inputClass: string;
wrapperClass: string;
readonly: boolean;
status: 'success' | 'failed' | null;
autoSubmit: boolean;
maskInput: boolean;
inputMode: 'text' | 'numeric' | 'decimal' | 'tel' | 'email';
autoBlur: boolean;
ariaLabels: string[];
completed: EventEmitter<string>;
changed: EventEmitter<string>;
inputs: QueryList<ElementRef<HTMLInputElement>>;
private pendingValue;
private onChange;
onTouched: () => void;
ngOnInit(): void;
ngAfterViewInit(): void;
writeValue(value: string): void;
private setOtpValue;
registerOnChange(fn: (value: string) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState(isDisabled: boolean): void;
onInput(event: Event, index: number): void;
onKeyDown(event: KeyboardEvent, index: number): void;
onPaste(event: ClipboardEvent): void;
get isCompleted(): boolean;
private checkCompletion;
private getSanitizeRegex;
get otpValue(): string;
reset(): void;
private handleCompletion;
private emitChange;
private focusFirstInput;
get inputClasses(): string[];
static ɵfac: i0.ɵɵFactoryDeclaration<NgxOtpInputsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<NgxOtpInputsComponent, "lib-ngx-otp-inputs", never, { "length": { "alias": "length"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "inputType": { "alias": "inputType"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "inputClass": { "alias": "inputClass"; "required": false; }; "wrapperClass": { "alias": "wrapperClass"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "status": { "alias": "status"; "required": false; }; "autoSubmit": { "alias": "autoSubmit"; "required": false; }; "maskInput": { "alias": "maskInput"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "autoBlur": { "alias": "autoBlur"; "required": false; }; "ariaLabels": { "alias": "ariaLabels"; "required": false; }; }, { "completed": "completed"; "changed": "changed"; }, never, never, true, never>;
}