@syncfusion/ej2-inputs
Version:
A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.
165 lines (146 loc) • 4.92 kB
TypeScript
import { INotifyPropertyChanged, NotifyPropertyChanges, Component, Property, getUniqueID, isNullOrUndefined, addClass, attributes, removeClass, remove, EmitType, Event, EventHandler } from '@syncfusion/ej2-base';
import {OtpInputType,OtpInputStyle,TextTransform,OtpChangedEventArgs,OtpFocusEventArgs,OtpInputEventArgs} from "./otp-input";
import {ComponentModel} from '@syncfusion/ej2-base';
/**
* Interface for a class OtpInput
*/
export interface OtpInputModel extends ComponentModel{
/**
* Specifies the length of the Otp (One-Time Password) to be entered by the user.
* This determines the number of input fields in the Otp Input.
*
* {% codeBlock src='otp-input/length/index.md' %}{% endcodeBlock %}
*
* @default 4
*/
length?: number;
/**
* Specifies the value of the Otp (One-Time Password) input.
* This can be a string or a number, representing the Otp value entered by the user.
*
* {% codeBlock src='otp-input/value/index.md' %}{% endcodeBlock %}
*
* @default ''
* @aspType string
*/
value?: string | number;
/**
* Specifies the input type of the Otp.
*
* {% codeBlock src='otp-input/type/index.md' %}{% endcodeBlock %}
*
* @isenumeration true
* @default OtpInputType.Number
* @asptype OtpInputType
*/
type?: string | OtpInputType;
/**
* Specifies the separator used to separate each input field in the Otp Input component.
* The separator is displayed between each input field.
*
* {% codeBlock src='otp-input/separator/index.md' %}{% endcodeBlock %}
*
* @default ''
*/
separator?: string;
/**
* Specifies the text that is shown as a hint/placeholder until the user focuses on or enters a value in the Otp Input.
* If a single text is provided, it will be used for all input fields; otherwise, each text letter will be used for each field.
*
* {% codeBlock src='otp-input/placeholder/index.md' %}{% endcodeBlock %}
*
* @default ''
*/
placeholder?: string;
/**
* Specifies the style variant for the input fields in the Otp Input component.
*
* {% codeBlock src='otp-input/stylingMode/index.md' %}{% endcodeBlock %}
*
* @isenumeration true
* @default OtpInputStyle.Outlined
* @asptype OtpInputStyle
*/
stylingMode?: string | OtpInputStyle;
/**
* Specifies whether the Otp input component is disabled.
* When set to true, the component is disabled and user input is not allowed.
*
* @default false
*/
disabled?: boolean;
/**
* Defines one or more CSS classes that can be used to customize the appearance of the Otp (One-Time Password) input component.
*
* @default ''
*/
cssClass?: string;
/**
* Specifies whether the OTP input field should automatically receive focus when the component is rendered.
*
* @type {boolean}
* @default false
*/
autoFocus?: boolean;
/**
* Specifies the case transformation for the OTP input text.
*
* Valid values are:
* - `TextTransform.Uppercase` for uppercase transformation.
* - `TextTransform.Lowercase` for lowercase transformation.
* - `TextTransform.None` for no transformation.
*
* @isenumeration true
* @asptype TextTransform
* @type {TextTransform}
* @default TextTransform.None
*/
textTransform?: string | TextTransform;
/**
* Specifies additional HTML attributes to be applied to the Otp (One-Time Password) input component.
*
* {% codeBlock src='otp-input/htmlAttributes/index.md' %}{% endcodeBlock %}
*
* @default {}
*/
htmlAttributes?: { [key: string]: string };
/**
* Defines the ARIA-label attribute for each input field in the Otp (One-Time Password) input component.
* Each string in the array corresponds to the ARIA-label attribute for each input field.
*
* {% codeBlock src='otp-input/ariaLabels/index.md' %}{% endcodeBlock %}
*
* @default []
*/
ariaLabels?: string[];
/**
* Event triggers after the creation of the Otp Input.
*
* @event created
*/
created?: EmitType<Event>;
/**
* Event triggers after the value is changed and the Otp input is focused out.
*
* @event change
*/
valueChanged?: EmitType<OtpChangedEventArgs>;
/**
* Event triggers when the Otp input is focused.
*
* @event focus
*/
focus?: EmitType<OtpFocusEventArgs>;
/**
* Event triggers when the Otp input is focused out.
*
* @event blur
*/
blur?: EmitType<OtpFocusEventArgs>;
/**
* Event triggers each time when the value of each Otp input is changed.
*
* @event input
*/
input?: EmitType<OtpInputEventArgs>;
}