import { PropertyValues, TemplateResult } from 'lit';
import { DDSFormElement } from "../../base/index.cjs";
import { DaikinInputGroup } from "../input-group/index.cjs";
/**
 * The text field component is a UI element that allows users to input single-line text data.
 * It functions similarly to the HTML `<input type="text">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts, such as names, email addresses, or search queries.
 * Can be used within `daikin-input-group` component.
 *
 * Hierarchies:
 * - `daikin-text-field` (can be used solely)
 * - `daikin-input-group` > `daikin-text-field`
 *
 * @attr form - The form the component belongs to.
 * @attr name - The form name, submitted as a name/value pair when submitting the form.
 * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
 * @prop {String} formAttr - The form the component belongs to.
 * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
 * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
 *
 * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
 * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
 * @fires toggle - Emitted when the user toggles the password mask.
 *
 * @slot left-icon - Specify the icon you want to use on the left. You can also use something other than `daikin-icon`.
 * Available only if the type is one of:
 * - `"text"`
 * - `"number"`
 * - `"password"`
 * - `"email"`
 * - `"tel"`
 *
 * @slot right-icon - Specify the icon you want to use on the right. You can also use something other than `daikin-icon`.
 * Available only if the type is one of:
 * - `"text"`
 * - `"email"`
 * - `"tel"`
 *
 * @example
 *
 * ```js
 * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
 * ```
 *
 * ```html
 * <!-- See `daikin-input-group` component for complete example. -->
 * <daikin-text-field name="name"></daikin-text-field>
 * ```
 */
export declare class DaikinTextField extends DDSFormElement {
    static readonly styles: import('lit').CSSResult;
    /**
     * Type of field.
     *
     * - `"text"`: Basic text input with optional left and right icon slots.
     * - `"number"`: Numeric input with increment/decrement buttons, arrow key support, and optional left icon slot.
     * - `"password"`: Password input with show/hide toggle button to control mask of password and optional left icon slot.
     * - `"email"`: Email input with optional left and right icon slots.
     * - `"tel"`: Telephone input with optional left and right icon slots.
     * - `"search"`: Search input with built-in search icon and clear button when value is present.
     *
     * @default "text"
     */
    type: "text" | "number" | "password" | "email" | "tel" | "search";
    /**
     * Placeholder text.
     */
    placeholder: string;
    /**
     * Whether the text field is readonly.
     */
    readonly: boolean;
    /**
     * Whether the text field is disabled.
     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
     */
    disabled: boolean;
    /**
     * Whether the text field is required.
     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
     */
    required: boolean;
    /**
     * Whether or not to display error states.
     * Ignored if the `disabled` is `true`.
     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
     */
    error: boolean;
    /**
     * Minimum length of value.
     */
    minlength: number | null;
    /**
     * Maximum length of value.
     */
    maxlength: number | null;
    /**
     * Interval between values. This is valid when `type="number"`.
     */
    step: string | null;
    /**
     * The minimum value. This is valid when `type="number"`.
     */
    min: string | null;
    /**
     * The maximum value. This is valid when `type="number"`.
     */
    max: string | null;
    /**
     * The pattern of value.
     */
    pattern: string | null;
    /**
     * Value of `autocomplete` attribute of the internal `<input>`.
     */
    autocomplete: HTMLInputElement["autocomplete"];
    /**
     * When `type="password"`, whether to display the password with a black dot or as text.
     */
    showPassword: boolean;
    /**
     * The label text used as the value of aria-label.
     * Set automatically by `reflectInputGroup` method.
     */
    private _label;
    private _hasLeftSlot;
    private _hasRightSlot;
    private readonly _inputRef;
    /**
     * Focuses on the inner input.
     * @param options focus options
     */
    focus(options?: FocusOptions): void;
    private _handleChange;
    private _handleSlotChange;
    private _handleInput;
    private _handleClearClick;
    private _handleKeyDown;
    private _updateNumberValue;
    private _createIcon;
    private _handleShowPasswordClick;
    render(): TemplateResult<1>;
    updated(changedProperties: PropertyValues<this>): void;
    /**
     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
     * @private
     */
    reflectInputGroup(inputGroup: DaikinInputGroup): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "daikin-text-field": DaikinTextField;
    }
}