import { EventEmitter } from '../../stencil-public-runtime'; import type { InputCodeInputMode, InputCodeEnterKeyHint } from './exports'; export declare class InputCode { host: HTMLRInputCodeElement; /** Specifies the `id` of the `
` to which the element belongs. */ form?: string; /** Specifies a name for an input for submission within formData object. */ name: string; /** Number of digits (typically 4–6). * @default: 4 */ length: number; /** Whether the input is disabled */ disabled?: boolean; /** Specifies if element must be ignored during validation of the form elements. */ novalidate?: boolean; /** Whether the input is required */ required?: boolean; /** * Read-only mode (mirrors native `readonly`): value cannot be changed by the user, * but the field can still receive focus, be selected, and be submitted with a form. */ readonly?: boolean; /** Label for accessibility. * @default: 'Verification code' */ label: string; /** Text of an additional marker in the label */ fieldIndicator?: string; /** Description for accessibility */ hint?: string; /** Validity indicator, serving to change UI of the component */ invalid?: boolean; /** The way to provide error message separately from Constraint Validation API. */ error?: string; /** Visual indication of valid state */ valid?: boolean; /** Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API */ tooShortMessage?: string; /** Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method. */ customErrorMessage?: string; /** Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */ valueMissingMessage?: string; /** Defines if the component suppose to occupy 100% width */ fullWidth?: boolean; /** Defines label for each character's input. * Default "Character: ${character number}" */ ariaCharacterLabel?: string; /** Defines initial value */ value?: string | null; /** Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes. * @default: 'numeric' */ inputmode?: InputCodeInputMode; /** Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion. * @default: 'done' */ enterkeyhint?: InputCodeEnterKeyHint; /** Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill. * @default: 'one-time-code' */ autocomplete?: string; /** Emits the current code value as it changes */ rChange: EventEmitter<{ value: string; }>; /** Emits event after each validation */ rValidate: EventEmitter<{ state: string; message: string; }>; /** Emits 'rReset' event when form containing the component was reset */ rReset: EventEmitter<{ element: HTMLRInputCodeElement; value: any; }>; /** Emits when all segments are filled with values */ rComplete: EventEmitter<{ value: string; isComplete: boolean; }>; /** Holds the current values of each input box */ values: string[]; /** Tracks whether the component was previously in a complete state */ wasComplete: boolean; /** Tracks the last completed value to detect changes */ lastCompletedValue: string; /** Validity state passed from validateFormElement function after validation */ validityState: string | null; /** Validity message passed from validateFormElement function after validation */ validityMessage: string | null; private inputs; /** * Validates segment index and throws descriptive errors if invalid. * @param index - The index to validate * @throws Error if index is not an integer or out of bounds */ private validateSegmentIndex; /** * Gets the current complete code value by joining all individual digit values. * @returns Promise that resolves to the complete code string */ getValue(): Promise; /** * Resets the component by clearing all input values and focusing the first input. * @returns Promise that resolves when reset is complete */ reset(): Promise; /** * Sets provided value. * */ setValue(value: string | null): Promise; /** Validates an element, displays provided message in case value is invalid. */ setCustomValidity(message: string): Promise; /** * Validates the input code without triggering UI and returns a boolean indicating its validity. * @returns A boolean indicating whether the input code is valid. */ checkValidity(): Promise; /** * Focuses a specific segment (input) by index. * @param index - The zero-based index of the segment to focus (0 to length-1) * @returns Promise that resolves when focus is set, or rejects if index is invalid */ focusSegment(index: number): Promise; /** * Gets the value of a specific segment by index. * @param index - The zero-based index of the segment (0 to length-1) * @returns Promise that resolves to the segment value (single character string or empty string) */ getSegmentValue(index: number): Promise; /** * Sets the value of a specific segment by index. * @param index - The zero-based index of the segment (0 to length-1) * @param value - The value to set (will be truncated to first character if longer) */ setSegmentValue(index: number, value: string): Promise; handleValuesChange(): void; handleLengthChange(newLength: number): void; /** * Checks if all segments are filled and emits rComplete event when: * 1. Transitioning from incomplete to complete * 2. Complete and value has changed from previous completed value */ private checkAndEmitCompletion; private handleInput; private handleKeyDown; private createInputHandler; private createKeyDownHandler; private handlePaste; private get firstEmptyInput(); private onHostClick; private uniqueId; private nativeElement; private get message(); private get ariaDescribedBy(); /** Identify wrapping form element */ private get parentFormEl(); /** * Determine whether this element should be ignored * during Constraint Validation API validation. * */ private get isNoValidate(); private getValidityStateData; private validateFormElement; private onResetForm; private onSubmitForm; private contributeToFormData; private connectFormEventListeners; private disconnectFormEventListeners; connectedCallback(): void; disconnectedCallback(): void; private get hasMessage(); private get groupDescribedby(); componentWillLoad(): void; componentDidLoad(): void; render(): any; }