import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from './input-otp-interface.js';
/**
 * A component for entering one-time passwords (OTP) with multiple input fields.
 *
 * @version 8.8.0
 * @status new
 *
 * @slot - The default slot for the input description.
 * @slot validity-icon - A slot for a custom validity icon. If not provided, a default icon will be used.
 *
 * @part validity-icon - The validity icon.
 */
export declare class InputOTP implements ComponentInterface {
    private inputRefs;
    private inputId;
    private slotCtrl;
    /**
     * Stores the initial value of the input when it receives focus.
     * Used to determine if the value changed during the focus session
     * to avoid emitting unnecessary change events on blur.
     */
    private focusedValue?;
    /**
     * Tracks whether the user is navigating through input boxes using keyboard navigation
     * (arrow keys, tab) versus mouse clicks. This is used to determine the appropriate
     * focus behavior when an input box is focused.
     */
    private isKeyboardNavigation;
    el: HTMLNanoInputOtpElement;
    private inputValues;
    hasFocus: boolean;
    private previousInputValues;
    private invalid;
    private valid;
    /**
     * If `true`, the user cannot interact with the input.
     */
    disabled: boolean;
    /**
     * A hint to the browser for which keyboard to display.
     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
     *
     * For numbers (type="number"): "numeric"
     * For text (type="text"): "text"
     */
    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
    /**
     * The number of input boxes to display.
     */
    length: number;
    /**
     * A regex pattern string for allowed characters. Defaults based on type.
     *
     * For numbers (`type="number"`): `"[\p{N}]"`
     * For text (`type="text"`): `"[\p{L}\p{N}]"`
     */
    pattern?: string;
    /**
     * If `true`, the user cannot modify the value.
     */
    readonly: boolean;
    /**
     * The type of input allowed in the input boxes.
     */
    type: 'text' | 'number';
    /**
     * The value of the input group.
     */
    value?: string | number | null;
    /**
     * If `true`, allows the input to be completely filled with invalid values.
     * By default, if any input box contains an invalid value, the entire input group
     * is marked as invalid.
     * Default is `false`.
     */
    allowInvalid: boolean;
    /**
     * If `true`, shows a validity icon when all input boxes are filled.
     * A check icon is shown if all values are valid, and an X icon is shown if any value is invalid.
     * This does not affect the `invalid` or `valid` states of the input group.
     * Default is `false`.
     * */
    showValidity: boolean;
    /**
     * The `nanoInput` event is fired each time the user modifies the input's value.
     * Unlike the `nanoChange` event, the `nanoInput` event is fired for each alteration
     * to the input's value. This typically happens for each keystroke as the user types.
     *
     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
     * the input is cleared on edit, the type is `null`.
     */
    nanoInput: EventEmitter<InputOtpInputEventDetail>;
    /**
     * The `nanoChange` event is fired when the user modifies the input's value.
     * Unlike the `nanoInput` event, the `nanoChange` event is only fired when changes
     * are committed, not as the user types.
     *
     * The `nanoChange` event fires when the `<nano-input-otp>` component loses
     * focus after its value has changed.
     *
     * This event will not emit when programmatically setting the `value` property.
     */
    nanoChange: EventEmitter<InputOtpChangeEventDetail>;
    /**
     * Emitted when all input boxes have been filled with valid values.
     */
    nanoComplete: EventEmitter<InputOtpCompleteEventDetail>;
    /**
     * Emitted when the input group loses focus.
     */
    nanoBlur: EventEmitter<FocusEvent>;
    /**
     * Emitted when the input group is cleared.
     */
    nanoClear: EventEmitter<void>;
    /**
     * Emitted when the input group has focus.
     */
    nanoFocus: EventEmitter<FocusEvent>;
    /**
     * Sets focus to an input box.
     * @param index - The index of the input box to focus (0-based).
     * If provided and the input box has a value, the input box at that index will be focused.
     * Otherwise, the first empty input box or the last input if all are filled will be focused.
     */
    setFocus(index?: number): Promise<void>;
    /**
     * Resets the input boxes to empty values.
     */
    clear(): Promise<void>;
    valueChanged(): void;
    componentWillLoad(): void;
    componentDidLoad(): void;
    /**
     * Get the regex pattern for allowed characters.
     * If a pattern is provided, use it to create a regex pattern
     * Otherwise, use the default regex pattern based on type
     */
    private get validKeyPattern();
    private get specialCharsPattern();
    /**
     * Gets the string pattern to pass to the input element
     * and use in the regex for allowed characters.
     * @returns {string} The regex pattern string for allowed characters.
     */
    private getPattern;
    /**
     * Get the default value for inputmode.
     * If inputmode is provided, use it.
     * Otherwise, use the default inputmode based on type
     * @returns {string} The inputmode to use for the input boxes.
     */
    private getInputmode;
    /**
     * Initializes the input values array based on the current value prop.
     * This splits the value into individual characters and validates them against
     * the allowed pattern. The values are then used as the values in the native
     * input boxes and the value of the input group is updated.
     */
    private initializeValues;
    /**
     * Returns `true` if the document or host element
     * has a `dir` set to `rtl`. The host value will always
     * take priority over the root document value.
     * @returns {boolean} True if RTL direction is set, false otherwise.
     */
    private isRTL;
    /**
     * Updates the value of the input group.
     * This updates the value of the input group and emits an `nanoChange` event.
     * If all of the input boxes are filled, it emits an `nanoComplete` event.
     */
    private updateValue;
    /**
     * Emits an `nanoChange` event.
     * This API should be called for user committed changes.
     * This API should not be used for external value changes.
     */
    private emitNanoChange;
    /**
     * Emits an `nanoInput` event.
     * This is used to emit the input value when the user types,
     * backspaces, or pastes.
     */
    private emitNanoInput;
    /**
     * Handles the focus behavior for the input OTP component.
     *
     * Focus behavior:
     * 1. Keyboard navigation: Allow normal focus movement
     * 2. Mouse click:
     *    - If clicked box has value: Focus that box
     *    - If clicked box is empty: Focus first empty box
     *
     * Emits the `nanoFocus` event when the input group gains focus.
     * @returns {(event: FocusEvent) => void} Event handler for focus events.
     */
    private onFocus;
    /**
     * Handles the blur behavior for the input OTP component.
     * Emits the `nanoBlur` event when the input group loses focus.
     */
    private onBlur;
    /**
     * Focuses the next input box.
     */
    private focusNext;
    /**
     * Focuses the previous input box.
     */
    private focusPrevious;
    /**
     * Searches through the input values and returns the index
     * of the first empty input.
     * Returns -1 if all inputs are filled.
     * @returns {number} The index of the first empty input, or -1 if all are filled.
     */
    private getFirstEmptyIndex;
    /**
     * Returns the index of the input that should be tabbed to.
     * If all inputs are filled, returns the last input's index.
     * Otherwise, returns the index of the first empty input.
     * @returns {number} The index to tab to.
     */
    private getTabbableIndex;
    /**
     * Updates the tabIndexes for the input boxes.
     * This is used to ensure that the correct input is
     * focused when the user navigates using the tab key.
     */
    private updateTabIndexes;
    /**
     * Handles keyboard navigation for the OTP component.
     *
     * Navigation:
     * - Backspace: Clears current input and moves to previous box if empty
     * - Arrow Left/Right: Moves focus between input boxes
     * - Tab: Allows normal tab navigation between components
     * @returns {(event: KeyboardEvent) => void} Event handler for keydown events.
     */
    private onKeyDown;
    /**
     * Processes all input scenarios for each input box.
     *
     * This function manages:
     * 1. Autofill handling
     * 2. Input validation
     * 3. Full selection replacement or typing in an empty box
     * 4. Inserting in the middle with available space (shifting)
     * 5. Single character replacement
     * @returns {(event: InputEvent) => void} Event handler for input events.
     */
    private onInput;
    /**
     * Handles pasting text into the input OTP component.
     * This function prevents the default paste behavior and
     * validates the pasted text against the allowed pattern.
     * It then updates the value of the input group and focuses
     * the next empty input after pasting.
     */
    private onPaste;
    /**
     * Determines if a separator should be shown for a given index by:
     * - Checking if the total length is even (no separator for odd lengths)
     * - If even, showing a separator after the middle index
     *
     * @param index - The index to check for a separator.
     * @returns {boolean} True if a separator should be shown after the given index, false otherwise.
     */
    private showSeparator;
    /**
     * Filters the input string to only include valid characters based on the
     * `validKeyPattern` regex. If `allowInvalid` is true, it will also
     * exclude special characters. The resulting array is sliced to the
     * maximum length of the input OTP.
     * @param str - The input string to filter.
     * @returns {string[]} An array of valid characters.
     */
    private getValidChars;
    /**
     * Computes the validity of the input group based on the current input values.
     * Sets the following `invalid` and `valid` states:
     * - `invalid` is true if `allowInvalid` is true and any input value is invalid.
     * - `valid` is true if all input boxes are filled with valid values.
     */
    private computeValidity;
    render(): any;
}
