@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
282 lines (281 loc) • 8.56 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, QueryList, Renderer2 } from "@angular/core";
import { TextBoxComponent } from "../textbox/textbox.component";
import { InputFillMode, InputRounded, InputSize } from "../common/models";
import { ControlValueAccessor, FormControl } from "@angular/forms";
import { LocalizationService } from "@progress/kendo-angular-l10n";
import { OTPInputType } from "./models/otpinput-type";
import { OTPSeparatorIcon } from "./models/separator-icon";
import * as i0 from "@angular/core";
/**
* Represents the Kendo UI OTP Input component for Angular.
*
* Use the OTP Input to enter one-time passwords or verification codes.
*
* @example
* ```html
* <kendo-otpinput type="number" [(ngModel)]="otpValue"></kendo-otpinput>
* ```
*
* @remarks
* Supported children components are: {@link OTPInputCustomMessagesComponent}.
*/
export declare class OTPInputComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
hostElement: ElementRef;
private cdr;
private injector;
private renderer;
private localizationService;
private zone;
/**
* Sets the total number of input fields.
*
* @default 4
*/
set length(value: number);
get length(): number;
/**
* Sets the input type.
*
*
* @default 'text'
*/
type: OTPInputType;
/**
* Sets whether the input fields are separate or adjacent.
*
* @default true
*/
spacing: boolean;
/**
* Sets the separator between groups of input fields. You can use this only when `groupLength` is set.
*/
separator: string | OTPSeparatorIcon;
/**
* When `true`, disables the OTPInput.
*
* @default false
*/
disabled: boolean;
/**
* When `true`, sets the OTPInput to read-only mode.
*
* @default false
*/
readonly: boolean;
/**
* Sets the placeholder for the input fields.
*/
placeholder: string;
/**
* Sets the length of the groups. If you set a number, all groups have the same length. If you set an array, each group can have a different length.
*/
get groupLength(): number | Array<number>;
set groupLength(length: number | Array<number>);
/**
* Sets the value of the component. Unfilled input fields are represented with а space.
*/
get value(): string;
set value(input: string);
/**
* Sets the padding of the input fields.
*
* @default 'medium'
*/
set size(size: InputSize);
get size(): InputSize;
/**
* Sets the border radius of the OTP Input.
*
* @default 'medium'
*/
set rounded(rounded: InputRounded);
get rounded(): InputRounded;
/**
* Sets the background and border styles of the OTP Input.
*
* @default 'solid'
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* Sets the HTML attributes of the inner input element. You cannot change attributes that are required for the component to work.
*/
set inputAttributes(attributes: {
[key: string]: string;
});
get inputAttributes(): {
[key: string]: string;
};
/**
* Fires when the user changes the value.
*
* This event does not fire when you change the value programmatically or through form bindings.
*/
valueChange: EventEmitter<any>;
/**
* Fires when the user focuses the OTP Input.
*/
onFocus: EventEmitter<any>;
/**
* Fires when the user blurs the OTP Input.
*/
onBlur: EventEmitter<any>;
wrapperClass: boolean;
get invalidClass(): boolean;
direction: string;
role: string;
/**
* @hidden
*/
inputFields: QueryList<TextBoxComponent>;
/**
* @hidden
*/
set inputGroups(elements: QueryList<ElementRef>);
get inputGroups(): QueryList<ElementRef>;
/**
* @hidden
*/
groupLengthArray: Array<number>;
/**
* @hidden
*/
inputsArray: Array<any>;
/**
* @hidden
*/
inputsValues: Array<any> | null;
/**
* @hidden
*/
adjacentGroups: Array<number> | null;
private _length;
private _groupLength;
private _inputGroups;
private separatorPositions;
private _value;
private _size;
private _rounded;
private _fillMode;
private _isFocused;
private focusChangedProgrammatically;
private inputFieldValueChanged;
private focusedInput;
private _inputAttributes;
parsedAttributes: {
[key: string]: string;
};
private get defaultAttributes();
private subscriptions;
private ngChange;
private ngTouched;
constructor(hostElement: ElementRef, cdr: ChangeDetectorRef, injector: Injector, renderer: Renderer2, localizationService: LocalizationService, zone: NgZone);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: any): void;
ngOnDestroy(): void;
/**
* @hidden
*/
get formControl(): FormControl;
/**
* @hidden
*/
writeValue(value: string): void;
/**
* @hidden
*/
registerOnChange(fn: (value: string) => any): void;
/**
* @hidden
*/
registerOnTouched(fn: () => any): void;
/**
* @hidden
*/
setDisabledState(isDisabled: boolean): void;
/**
* @hidden
*/
get isControlInvalid(): boolean;
/**
* @hidden
*/
get isFocused(): boolean;
/**
* @hidden
*/
set isFocused(value: boolean);
/**
* Returns `true` if the component has groups.
*
* @hidden
*/
get hasGroups(): boolean;
/**
* @hidden
*/
showGroupSeparator(index: number): boolean;
/**
* @hidden
*/
showSeparator(index: number): boolean;
/**
* @hidden
*/
handleValueChange(index?: number, groupIndex?: number): void;
/**
* @hidden
*/
handleInputFocus(index: number, groupIndex?: number): void;
/**
* @hidden
*/
handleInput(event: any, index: number, groupIndex?: number): void;
/**
* @hidden
*/
fillInputs(text: string, start?: number, replaceLast?: boolean): void;
/**
* Focuses the OTP Input at the specified index provided as an argument.
*
* @param index The index of the input to focus.
*/
focus(index?: number): void;
/**
* Blurs the OTP Input.
*/
blur(): void;
/**
* @hidden
*/
handleFocus(): void;
/**
* @hidden
*/
handleBlur(): void;
private getIndexByGroup;
private focusNext;
private focusPrevious;
private handlePaste;
private handleKeydown;
private isValidGroupArray;
private populateGroupArray;
private populateSeparatorPositions;
private clearGroups;
private clearInputValues;
private handleInputChanges;
private setGroupFillMode;
private setInputAttributes;
private setDefaultAttributes;
private ariaLabel;
private isValidNumber;
private showInvalidInput;
private containsDigitsOrSpaces;
static ɵfac: i0.ɵɵFactoryDeclaration<OTPInputComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<OTPInputComponent, "kendo-otpinput", ["kendoOTPInput"], { "length": { "alias": "length"; "required": false; }; "type": { "alias": "type"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "groupLength": { "alias": "groupLength"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; }, never, never, true, never>;
}