import Tailwind from '../base/tailwind-base';
/**
 * @tag plus-input
 * @summary Form input component that provides various input types, validation, and styling features.
 *
 * @slot prefix - Content to be placed before the input
 * @slot suffix - Content to be placed after the input
 *
 * @csspart input - The native input element
 * @csspart wrapper - The input wrapper element
 * @csspart prefix - The prefix container
 * @csspart suffix - The suffix container
 * @csspart clear-button - The clear button
 * @csspart password-toggle - The password visibility toggle button
 *
 * @event plus-input - Emitted when the input value changes
 * @event plus-change - Emitted when the input value changes and the input loses focus
 * @event plus-focus - Emitted when the input gains focus
 * @event plus-blur - Emitted when the input loses focus
 * @event plus-clear - Emitted when the clear button is clicked
 * @event plus-password-toggle - Emitted when the password visibility is toggled
 * @event plus-invalid - Emitted when the input value is invalid
 *
 * @example
 * ```html
 * <plus-input
 *   label="Email"
 *   type="email"
 *   required
 *   pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
 *   error-message="Please enter a valid email address"
 *   @plus-invalid=${(e) => console.log('Invalid input:', e.detail)}
 * ></plus-input>
 * ```
 */
export default class PlusInput extends Tailwind {
    static styles: import("lit").CSSResult[];
    /**
     * Reference to the native input element
     * @private
     */
    input: HTMLInputElement;
    /**
     * Indicates if the input has focus
     * @private
     */
    private hasFocus;
    /**
     * Validation message for the input
     * @private
     */
    private validationMessage;
    /**
     * The type of input
     * @type {'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url'}
     * @default 'text'
     */
    type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
    /**
     * The name of the input
     * @type {string}
     * @default ''
     */
    name: string;
    /**
     * The value of the input
     * @type {string}
     * @default ''
     */
    value: string;
    /**
     * The placeholder text
     * @type {string}
     * @default ''
     */
    placeholder: string;
    /**
     * The size of the input
     * @type {'sm'|'md'|'lg'}
     * @default 'md'
     */
    size: 'sm' | 'md' | 'lg';
    /**
     * Whether the input should have a clear button
     * @type {boolean}
     * @default false
     * @attr clearable
     */
    clearable: boolean;
    /**
     * Whether the input is disabled
     * @type {boolean}
     * @default false
     * @attr disabled
     */
    disabled: boolean;
    /**
     * Whether the input is readonly
     * @type {boolean}
     * @default false
     * @attr readonly
     */
    readonly: boolean;
    /**
     * Whether the input is required
     * @type {boolean}
     * @default false
     * @attr required
     */
    required: boolean;
    /**
     * Whether to show a password toggle button
     * @type {boolean}
     * @default false
     * @attr password-toggle
     */
    passwordToggle: boolean;
    /**
     * Whether the password is visible
     * @type {boolean}
     * @default false
     * @attr password-visible
     */
    passwordVisible: boolean;
    /**
     * The label for the input
     * @type {string}
     */
    label?: string;
    /**
     * The validation pattern for the input
     * @type {string}
     */
    pattern?: string;
    /**
     * The minimum length of the input value
     * @type {number}
     */
    minlength?: number;
    /**
     * The maximum length of the input value
     * @type {number}
     */
    maxlength?: number;
    /**
     * The minimum value of the input
     * @type {number|string}
     */
    min?: number | string;
    /**
     * The maximum value of the input
     * @type {number|string}
     */
    max?: number | string;
    /**
     * The step value for numeric inputs
     * @type {number|'any'}
     */
    step?: number | 'any';
    /**
     * Whether autocorrect is enabled
     * @type {'off'|'on'}
     */
    autocorrect?: 'off' | 'on';
    /**
     * The autocomplete attribute
     * @type {string}
     */
    autocomplete?: string;
    /**
     * Whether the input should automatically get focus
     */
    autoFocus?: boolean;
    /**
     * The enterkeyhint attribute
     * @type {'enter'|'done'|'go'|'next'|'previous'|'search'|'send'}
     */
    enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
    /**
     * The inputmode attribute
     * @type {'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url'}
     */
    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    /**
     * Whether spellcheck is enabled
     */
    spellCheck?: boolean;
    /**
     * Caption text to display below the input
     * @type {string}
     */
    caption?: string;
    /**
     * Whether the input is in an error state
     * @type {boolean}
     * @default false
     * @attr error
     */
    error: boolean;
    /**
     * The error message to display
     * @type {string}
     * @default ''
     */
    errorMessage: string;
    /**
     * Whether the input should take up full width
     * @type {boolean}
     * @default false
     */
    fullWidth: boolean;
    /**
     * Whether the input is used as part of a select component
     * @type {boolean}
     * @default false
     * @internal
     * @attr isSelect
     */
    isSelect: boolean;
    /**
     * Icon name for the prefix icon
     * @type {string}
     */
    prefixIcon?: string;
    /**
     * Icon name for the suffix icon
     * @type {string}
     */
    suffixIcon?: string;
    constructor();
    /**
     * Checks the validity of the input against constraints.
     * @returns {boolean} True if the input is valid, false otherwise.
     */
    checkValidity(): boolean;
    /**
     * Reports the validity of the input. If the input is invalid,
     * it dispatches an 'invalid' event and focuses the input.
     * @returns {boolean} True if the input is valid, false otherwise.
     */
    reportValidity(): boolean;
    /**
     * Sets a custom validation message for the input.
     * @param {string} message - The custom validation message.
     */
    setCustomValidity(message: string): void;
    /**
     * Called when the input loses focus
     * @private
     */
    private handleBlur;
    /**
     * Called when the input value changes
     * @private
     */
    private handleChange;
    /**
     * Called when the clear button is clicked
     * @param {MouseEvent} event The event object
     * @private
     */
    private handleClearClick;
    /**
     * Called when the password toggle button is clicked
     * @param {MouseEvent} event The event object
     * @private
     */
    private handlePasswordToggle;
    /**
     * Called when the input receives focus
     * @private
     */
    private handleFocus;
    /**
     * Called when the input value changes
     * @private
     */
    private handleInput;
    /**
     * Gets the validation message for the input
     * @returns {string} The validation message
     * @private
     */
    private getValidationMessage;
    /**
     * Validates the input
     * @private
     */
    private validate;
    /**
     * Called when the input is invalid
     * @param {Event} event The event object
     * @private
     */
    private handleInvalid;
    /**
     * Called when a key is pressed
     * @param {KeyboardEvent} event The event object
     * @private
     */
    private handleKeyDown;
    /**
     * Calculates the step value
     * @returns {number} The calculated step value
     * @private
     */
    private getStepValue;
    /**
     * Called when a slot changes
     * @param {Event} e The event object
     * @private
     */
    handleSlotchange(e: Event): void;
    /**
     * Renders the component
     * @returns {TemplateResult} The template to render
     * @override
     */
    render(): import("lit-html").TemplateResult<1>;
}
export { PlusInput };
//# sourceMappingURL=input.d.ts.map