otp-angular
Version:
**Otp Angular** is a lightweight, highly customizable, and dependency-free OTP (One-Time Password) input component built for Angular 20+ applications. It offers seamless integration, flexible configuration, and a polished user experience for OTP or verifi
165 lines (161 loc) • 8.39 kB
TypeScript
import * as _angular_core from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
interface OtpAngularType {
length: number;
numbersOnly?: boolean;
autoFocus?: boolean;
isPassword?: boolean;
showError?: boolean;
showCaps?: boolean;
containerClass?: string | Array<string>;
containerStyles?: Object;
inputClass?: string | Array<string>;
inputStyles?: Object | Array<Object>;
placeholder?: string;
separator?: string;
resend?: number;
resendLabel?: string;
resendContainerClass?: string;
resendLabelClass?: string;
resendTimerClass?: string;
theme?: 'light' | 'dark';
}
declare class OtpAngular implements ControlValueAccessor {
private readonly document;
config: _angular_core.ModelSignal<OtpAngularType>;
disabled: _angular_core.WritableSignal<boolean>;
onInputChange: _angular_core.OutputEmitterRef<string | number | null>;
onResendAvailable: _angular_core.OutputEmitterRef<boolean>;
protected defaultConfig: _angular_core.Signal<{
length: number;
numbersOnly: boolean;
autoFocus: boolean;
isPassword: boolean;
showError: boolean;
showCaps: boolean;
containerClass: string | Array<string>;
containerStyles: Object;
inputClass: string | Array<string>;
inputStyles: Object;
placeholder: string;
separator: string;
resend: number;
resendLabel: string;
resendContainerClass: string;
resendLabelClass: string;
resendTimerClass: string;
theme: "light" | "dark";
}>;
protected myValue: _angular_core.WritableSignal<(string | number)[]>;
protected inputStyleArray: _angular_core.Signal<any[]>;
protected inputClassArray: _angular_core.Signal<(string | {
[n: number]: string;
length: number;
toString(): string;
toLocaleString(): string;
toLocaleString(locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string;
pop(): string | undefined;
push(...items: string[]): number;
concat(...items: ConcatArray<string>[]): string[];
concat(...items: (string | ConcatArray<string>)[]): string[];
join(separator?: string): string;
reverse(): string[];
shift(): string | undefined;
slice(start?: number, end?: number): string[];
sort(compareFn?: ((a: string, b: string) => number) | undefined): string[];
splice(start: number, deleteCount?: number): string[];
splice(start: number, deleteCount: number, ...items: string[]): string[];
unshift(...items: string[]): number;
indexOf(searchElement: string, fromIndex?: number): number;
lastIndexOf(searchElement: string, fromIndex?: number): number;
every<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): this is S[];
every(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
some(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): boolean;
forEach(callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any): void;
map<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any): U[];
filter<S extends string>(predicate: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
filter(predicate: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
reduce(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
reduce<U>(callbackfn: (previousValue: U, currentValue: string, currentIndex: number, array: string[]) => U, initialValue: U): U;
reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
reduceRight(callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
reduceRight<U>(callbackfn: (previousValue: U, currentValue: string, currentIndex: number, array: string[]) => U, initialValue: U): U;
find<S extends string>(predicate: (value: string, index: number, obj: string[]) => value is S, thisArg?: any): S | undefined;
find(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
findIndex(predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): number;
fill(value: string, start?: number, end?: number): string[];
copyWithin(target: number, start: number, end?: number): string[];
entries(): ArrayIterator<[number, string]>;
keys(): ArrayIterator<number>;
values(): ArrayIterator<string>;
includes(searchElement: string, fromIndex?: number): boolean;
flatMap<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[];
flat<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[];
at(index: number): string | undefined;
[Symbol.iterator](): ArrayIterator<string>;
[Symbol.unscopables]: {
[x: number]: boolean | undefined;
length?: boolean | undefined;
toString?: boolean | undefined;
toLocaleString?: boolean | undefined;
pop?: boolean | undefined;
push?: boolean | undefined;
concat?: boolean | undefined;
join?: boolean | undefined;
reverse?: boolean | undefined;
shift?: boolean | undefined;
slice?: boolean | undefined;
sort?: boolean | undefined;
splice?: boolean | undefined;
unshift?: boolean | undefined;
indexOf?: boolean | undefined;
lastIndexOf?: boolean | undefined;
every?: boolean | undefined;
some?: boolean | undefined;
forEach?: boolean | undefined;
map?: boolean | undefined;
filter?: boolean | undefined;
reduce?: boolean | undefined;
reduceRight?: boolean | undefined;
find?: boolean | undefined;
findIndex?: boolean | undefined;
fill?: boolean | undefined;
copyWithin?: boolean | undefined;
entries?: boolean | undefined;
keys?: boolean | undefined;
values?: boolean | undefined;
includes?: boolean | undefined;
flatMap?: boolean | undefined;
flat?: boolean | undefined;
at?: boolean | undefined;
[Symbol.iterator]?: boolean | undefined;
readonly [Symbol.unscopables]?: boolean | undefined;
};
} | undefined)[]>;
protected countdown: _angular_core.WritableSignal<number>;
protected isResendAllowed: _angular_core.WritableSignal<boolean>;
private timer;
private value;
private onChange;
private onTouched;
constructor();
setValue(value: string | number): void;
reset(): void;
protected keydown(e: KeyboardEvent, index: number): void;
protected onPaste(e: ClipboardEvent, index: number): void;
private setBoxValue;
private sanitize;
protected onInput(e: Event, index: number): void;
protected blur(e: FocusEvent, index: number): void;
private emit;
protected resend(): void;
writeValue(obj: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
private updateValue;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpAngular, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpAngular, "otp-angular", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, { "config": "configChange"; "onInputChange": "onInputChange"; "onResendAvailable": "onResendAvailable"; }, never, never, true, never>;
}
export { OtpAngular };
export type { OtpAngularType };