import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
import { CSSResult } from 'lit';
import { FormControlInterface } from '@justeattakeaway/pie-webc-core';
import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
import { PIEInputElement } from '@justeattakeaway/pie-webc-core';
import { PropertyValues } from 'lit';
import { RTLInterface } from '@justeattakeaway/pie-webc-core';
import { TemplateResult } from 'lit-html';

/**
 * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component).
 */
declare type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status' | 'disabled' | 'readonly'>;

/**
 * Default values for optional properties that have default fallback values in the component.
 */
export declare const defaultProps: DefaultProps;

export declare const inputModes: readonly ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"];

/**
 * @tagname pie-text-input
 * @event {InputEvent} input - when the input value is changed.
 * @event {CustomEvent} change - when the input value is changed.
 * @slot leadingText - Short text to display at the start of the input. Wrap the text in a <span>. Do not use with leadingIcon at the same time.
 * @slot leadingIcon - An icon to display at the start of the input. Do not use with leadingText at the same time.
 * @slot trailingText - Short text to display at the end of the input. Wrap the text in a <span>. Do not use with trailingIcon at the same time.
 * @slot trailingIcon - An icon to display at the end of the input. Do not use with trailingText at the same time.
 */
export declare class PieTextInput extends PieTextInput_base implements TextInputProps, PIEInputElement {
    type: "number" | "text" | "password" | "url" | "email" | "tel";
    value: string;
    name: TextInputProps['name'];
    disabled: boolean;
    pattern: TextInputProps['pattern'];
    minlength: TextInputProps['minlength'];
    maxlength: TextInputProps['maxlength'];
    autocomplete: TextInputProps['autocomplete'];
    placeholder: TextInputProps['placeholder'];
    autoFocus: TextInputProps['autoFocus'];
    inputmode: TextInputProps['inputmode'];
    readonly: boolean;
    defaultValue: TextInputProps['defaultValue'];
    assistiveText: TextInputProps['assistiveText'];
    status: "default" | "success" | "error";
    step: TextInputProps['step'];
    min: TextInputProps['min'];
    max: TextInputProps['max'];
    size: "small" | "medium" | "large";
    required: boolean;
    private input;
    focusTarget: HTMLElement;
    /**
     * (Read-only) returns a ValidityState with the validity states that this element is in.
     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
     */
    get validity(): ValidityState;
    /**
     * Called after the disabled state of the element changes,
     * either because the disabled attribute of this element was added or removed;
     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
     * @param disabled - The latest disabled state of the input.
     */
    formDisabledCallback(disabled: boolean): void;
    /**
     * Called when the form that owns this component is reset.
     * Resets the value to the default value.
     */
    formResetCallback(): void;
    protected firstUpdated(): void;
    protected updated(_changedProperties: PropertyValues<this>): void;
    /**
     * Handles data processing in response to the input event. The native input event is left to bubble up.
     * @param event - The input event.
     */
    private handleInput;
    /**
     * Captures the native change event and wraps it in a custom event.
     * @param event - The change event.
     */
    private handleChange;
    render(): TemplateResult<1>;
    static styles: CSSResult;
}

declare const PieTextInput_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof PieElement;

export declare const sizes: readonly ["small", "medium", "large"];

export declare const statusTypes: readonly ["default", "success", "error"];

export declare interface TextInputProps {
    /**
     * The type of HTML input to render.
     */
    type?: typeof types[number];
    /**
     * The value of the input (used as a key/value pair in HTML forms with `name`).
     */
    value: string;
    /**
     * The name of the input (used as a key/value pair with `value`). This is required in order to work properly with forms.
     */
    name?: string;
    /**
     * Same as the HTML disabled attribute - indicates whether or not the input is disabled.
     */
    disabled?: boolean;
    /**
     * Specifies a regular expression the form control's value should match
     */
    pattern?: string;
    /**
     * Minimum length (number of characters) of value. Only applies to types: `text`, `url`, `tel`, `email`, and `password`.
     */
    minlength?: number;
    /**
     * Maximum length (number of characters) of value. Only applies to types: `text`, `url`, `tel`, `email`, and `password`.
     */
    maxlength?: number;
    /**
     * Allows the user to enable or disable autocomplete functionality on the input field.
     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more information and values.
     */
    autocomplete?: string;
    /**
     * The placeholder text to display when the input is empty. Only applies to types: `text`, `url`, `tel`, `email`, and `password`.
     */
    placeholder?: string;
    /**
     * If true, the input will be focused on the first render.
     * No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) for more information.
     */
    autoFocus?: boolean;
    /**
     * Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element.
     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#inputmode) for more information.
     */
    inputmode?: typeof inputModes[number];
    /**
     * When true, the user cannot edit the control. Not the same as disabled.
     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
     */
    readonly?: boolean;
    /**
     * An optional default value to use when the input is reset.
     */
    defaultValue?: string;
    /**
     * An optional assistive text to display below the input element. Must be provided when the status is success or error.
     */
    assistiveText?: string;
    /**
     * The status of the input component / assistive text. Can be default, success or error.
     */
    status?: typeof statusTypes[number];
    /**
     * An optional amount that value should be incremented or decremented by when using the up and down arrows in the input. Only applies when type is `number`.
     */
    step?: number;
    /**
     * The minimum value of the input. Only applies when type is `number`. If the value provided is lower, the input is invalid.
     */
    min?: number;
    /**
     * The maximum value of the input. Only applies when type is `number`. If the value provided is higher, the input is invalid.
     */
    max?: number;
    /**
     * The size of the input field. Can be `small`, `medium`, or `large`. Defaults to `medium`.
     */
    size?: typeof sizes[number];
    /**
     * If true, the input is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
     */
    required?: boolean;
}

export declare const types: readonly ["text", "number", "password", "url", "email", "tel"];

export { }