@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
285 lines (284 loc) • 8.86 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";
export declare class OTPInputComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
hostElement: ElementRef;
private cdr;
private injector;
private renderer;
private localizationService;
private zone;
/**
* Configures the total number of input fields.
*
* @default 4
*/
set length(value: number);
get length(): number;
/**
* Configures the input type.
*
* * The possible values are:
* * `text` (default)
* * `number`
* * `password`
*
* @default 'text'
*/
type: OTPInputType;
/**
* Configures whether the input fields are separate or adjacent to each other.
*
* @default true
*/
spacing: boolean;
/**
* Specifies the separator between groups of input fields.
*
* > The configuration can only be applied when `groupLength` is set.
*/
separator: string | OTPSeparatorIcon;
/**
* Configures whether the component is enabled or disabled.
*
* @default false
*/
disabled: boolean;
/**
* Configures whether the component is readonly.
*
* @default false
*/
readonly: boolean;
/**
* Configures the placeholder of the input fields.
*/
placeholder: string;
/**
* Configures the length of the groups. If `groupLength` is a number, all groups will have the same length. If it's an array, each group can have a different length.
*/
get groupLength(): number | Array<number>;
set groupLength(length: number | Array<number>);
/**
* Configures the value of the component. Unfilled input fields are represented with space.
*/
get value(): string;
set value(input: string);
/**
* The `size` property specifies the padding of the input fields.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: InputSize);
get size(): InputSize;
/**
* The `rounded` property specifies the border radius of the OTP Input.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `full`
* * `none`
*/
set rounded(rounded: InputRounded);
get rounded(): InputRounded;
/**
* The `fillMode` property specifies the background and border styles of the OTP Input.
*
* The possible values are:
* * `flat`
* * `solid` (default)
* * `outline`
* * `none`
*/
set fillMode(fillMode: InputFillMode);
get fillMode(): InputFillMode;
/**
* Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
*/
set inputAttributes(attributes: {
[key: string]: string;
});
get inputAttributes(): {
[key: string]: string;
};
/**
* Fires each time the value is changed by the user—
* When the value of the component is programmatically changed to `ngModel` or `formControl`
* through its API or form binding, the `valueChange` event is not triggered because it
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
*/
valueChange: EventEmitter<any>;
/**
* Fires each time the user focuses the OTP Input.
*/
onFocus: EventEmitter<any>;
/**
* Fires each time 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);
/**
* @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.
*/
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>;
}