import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
import { IInputMaskOptions } from './types';
import { IIconOptions, IMultiIconOptions } from '../../global/interfaces/IIconOptions';
import { IChipOptions } from '../tk-chips/types';
/**
 * The TkInput component is used to capture text input from the user.
 * @react `import { TkInput } from '@takeoff-ui/react'`
 * @vue `import { TkInput } from '@takeoff-ui/vue'`
 * @angular `import { TkInput } from '@takeoff-ui/angular'`
 */
export declare class TkInput implements ComponentInterface {
    private nativeInput?;
    private tabindex?;
    private uniqueId;
    private cleaveInstance;
    private readOnly;
    private editable;
    el: HTMLTkInputElement;
    internals: ElementInternals;
    hasFocus: boolean;
    inputType: string;
    isCounter: boolean;
    isPassword: boolean;
    passwordStrength: number;
    /**
     * the user cannot interact with the input.
     */
    disabled: boolean;
    /**
     * Indicates whether the input is in an invalid state
     * @defaultValue false
     */
    invalid: boolean;
    /**
     * Indicates whether the input can be cleared
     * @defaultValue false
     */
    clearable: boolean;
    /**
     * This is the error message that will be displayed.
     */
    error: string;
    /**
     * Provided a hint or additional information about the input.
     */
    hint: string;
    /**
     * Specifies a material icon name to be displayed.
     */
    icon?: string | IIconOptions | IMultiIconOptions;
    /**
     * Defines the position of the icon.
     * @defaultValue left
     */
    iconPosition: 'left' | 'right';
    /**
     * Defines the label for the input.
     */
    label: string;
    /**
     * Defines the prefix of the input;
     */
    pre?: string;
    /**
     * The maskOptions prop is used to define masking configurations supported by the Cleave.js library. With this prop, you can specify any masking options described in the Cleave.js documentation (https://nosir.github.io/cleave.js/). For example, you can configure it for formatting dates, phone numbers, or credit card numbers as needed.
     */
    maskOptions: IInputMaskOptions;
    protected maskOptionsChanged(newValue: IInputMaskOptions, oldValue: IInputMaskOptions): void;
    /**
     * Maximum value for number inputs
     */
    max?: string | number;
    /**
     * Minimum value for number inputs
     */
    min?: string | number;
    /**
     * The name of the control, which is submitted with the form data.
     */
    name: string;
    /**
     * Placeholder text displayed when the input is empty.
     */
    placeholder?: string | null;
    /**
     * If `true`, the user cannot modify the value.
     * @defaultValue false
     */
    readonly: boolean;
    /**
     * Sets size for the component.
     * @defaultValue base
     */
    size: 'large' | 'base' | 'small';
    /**
     * if type = password safety status bar visible
     */
    showSafetyStatus: boolean;
    /**
     * Displays a red asterisk (*) next to the label for visual emphasis.
     */
    showAsterisk: boolean;
    /**
     * The key to use for option labels
     * @defaultValue label
     */
    chipLabelKey: string;
    /**
     * Sets options for all chips rendered in chips mode.
     */
    chipOptions: IChipOptions;
    /**
     * input type
     */
    mode: 'text' | 'password' | 'counter' | 'number' | 'chips';
    /**
     * Sets step for decimal value with mode number
     */
    step: string;
    /**
     * A function that determines whether a chip is disabled.
     */
    chipDisabled: Function;
    /**
     * Shows a loading spinner on the right side of the input.
     * @defaultValue false
     */
    loading: boolean;
    /**
     * Hides the password lock icon.
     * @defaultValue false
     */
    hidePasswordIcon: boolean;
    /**
     * The value of the input.
     */
    value?: string | string[] | number | any[];
    protected valueChanged(newValue: any, oldValue: any): void;
    /**
     * Sets the data-testid attribute on the root container element.
     */
    dataTestid?: string;
    /**
     * Emitted when the value has changed.
     */
    tkChange: EventEmitter<any>;
    /**
     * Emitted when the input loses focus.
     */
    tkBlur: EventEmitter<void>;
    /**
     * Emitted when the input has focus.
     */
    tkFocus: EventEmitter<void>;
    /**
     * Emitted when the clear button has click.
     */
    tkClearClick: EventEmitter<void>;
    componentWillLoad(): void;
    componentDidLoad(): void;
    componentDidUpdate(): void;
    formResetCallback(): void;
    /**
     * Sets focus on the specified `tk-input`. Use this method instead of the global
     * `input.focus()`.
     */
    setFocus(): Promise<void>;
    private validateMinMax;
    /**
     * Toggles the visibility of the password input field.
     *
     * This method is called when the user interacts with the visibility toggle icon.
     *
     * @param event The mouse event triggered by the user interaction.
     * @param val A boolean value indicating whether to show or hide the password.
     */
    private visiblePassword;
    /**
     * Calculates the strength of a given password.
     *
     * The password strength is determined based on the following criteria:
     * - Length of at least 8 characters
     * - Presence of uppercase letters
     * - Presence of lowercase letters
     * - Presence of numbers
     * - Presence of special characters
     *
     * Each met criterion increases the strength by 1. The maximum strength is 5.
     *
     * @param password The password to be evaluated.
     * @returns A number representing the password strength.
     */
    private calculatePasswordStrength;
    private clampValueByLimit;
    private isMaskDelimiterCharacter;
    private handleInput;
    private handleInputKeyUp;
    private handleInputBlur;
    private handleFormReset;
    private handleInputKeyDown;
    private handleMinusButtonClick;
    private handlePlusButtonClick;
    private handleChipsRemove;
    private handleClearButtonClick;
    private handleClearButtonKeyDown;
    private handleInputFocus;
    private handleMouseDown;
    private handleMouseUp;
    /**
     * Handles label click:
     * - preventDefault() stops the browser from dispatching a synthetic click
     *   on the associated <input> (caused by htmlFor).
     * - Manual focus() preserves the label-click-to-focus UX.
     */
    private handleLabelClick;
    /**
     * Renders the password strength indicator lines.
     *
     * The strength lines visually indicate the password strength:
     * - 1 or 2 filled lines: Weak (red color)
     * - 3 filled lines: Medium (yellow color)
     * - 4 filled lines: Strong (green color)
     *
     * The method creates four lines and assigns a CSS class based on the current password strength.
     *
     * @returns An array of JSX elements representing the strength indicator lines.
     */
    private renderStrengthLines;
    private renderChips;
    private renderInput;
    private renderLabel;
    private renderAlignmentButtons;
    private renderPasswordIcons;
    render(): any;
}
