import { PnLanguages } from "../../../index";
/**
 * The `pn-input` is a regular `input` but styled. This means you can use native events to listen to the changes.
 * Always use the `label` prop to make sure the input is accessible.
 *
 * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
 * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
 *
 * @slot helpertext - You can use this slot instead of the prop `helpertext`. Recommended, only if you need to include additional HTML markup.
 * Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.2.0}
 * @slot error - You can use this slot instead of the prop `error`. Recommended, only if you need to include additional HTML markup.
 * Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.2.0}
 */
export declare class PnInput {
    private readonly id;
    private idMessage;
    private prefix;
    private suffix;
    private mo;
    hostElement: HTMLElement;
    offsetLeft: number;
    offsetRight: number;
    showHelperSlot: boolean;
    showErrorSlot: boolean;
    showPassword: boolean;
    togglePassword(): void;
    /** Text label placed above the input field. */
    label: string;
    /** Text message placed underneath the input field. */
    helpertext?: string;
    /**
     * Provide a unique HTML id to connect the input with the label.
     * A unique uuid ID will be generated if this field is left empty.
     **/
    inputid: string;
    /** Set the value of the input. */
    value: string;
    /**
     * Set the language manually for the translations of show/hide/clear button text.
     * Not needed if you have the pntopbar on the page.
     **/
    language?: PnLanguages;
    /** Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. @since v7.21.0 */
    compact?: boolean;
    /**
     * Select an icon to display before the input field value.
     * `icon` takes precedence over the `text-prefix` prop.
     *
     * @see {@link textPrefix}
     * @category Visual
     **/
    icon: string;
    /**
     * Set a small text before the input field value.
     * Cannot be used together with an `icon` at the same time.
     *
     * @see {@link icon}
     * @see {@link textSuffix}
     * @category Visual
     **/
    textPrefix: string;
    /**
     * Set a small text after the input field value.
     * Cannot be used with the `text-prefix` prop at the same time.
     *
     * @see {@link textPrefix}
     * @category Visual
     **/
    textSuffix: string;
    /** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category HTML input */
    type?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | '';
    /**
     * HTML input name. Setting a name will help the browser understand what type of data the input have
     * and can better assist with autofill data based on previous entires much better.
     *
     * @category HTML input
     **/
    name?: string;
    /**
     * Provide a placeholder text. Remember that this is no replacement for a label.
     * The placeholder should be a nice addition to the label/helpertext, not important information.
     *
     * @category HTML input
     **/
    placeholder?: string;
    /**
     * Let the browser know what type of autocorrects the input should use.
     * Works much better if a `name` and `inputid` is supplied.
     * @see {@link name}
     * @see {@link inputid}
     *
     * @category HTML input */
    autocomplete?: string;
    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML input */
    maxlength: number;
    /**
     * Hint the browser about what type of virtual keyboard should be used.
     * The browser will be able to decide this on its own most of the time,
     * especially if you use the `type`, `name` and `inputid` props.
     *
     * Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
     *
     * @category HTML input
     **/
    inputmode?: 'text' | 'none' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    /** Point to a datalist element for this input. @category HTML input */
    list?: string;
    /** Pattern prop. @category HTML input*/
    pattern?: string;
    /** Set the `min` value of the `number` input. @category HTML input */
    min?: number | string;
    /** Set the `max` value of the `number` input. @category HTML input */
    max?: number | string;
    /** Set a `step` for the number input. @category HTML input */
    step?: number | string;
    /** While you can use the `aria-label`, using a `label` is far more accessible. @category HTML input */
    arialabel?: string;
    /** Set the ID of what this input controls. @category HTML input */
    ariacontrols?: string;
    /** Set the input as `required`. @category State */
    required: boolean;
    /** Set the input as `disabled`. @category State */
    disabled: boolean;
    /** Set the input as `readonly`. @category State */
    readonly: boolean;
    /** Set the input as `valid`. Provides a green color and a check icon. @category Validation */
    valid?: boolean;
    /**
     * Set the input as `invalid`. Provides a red color and red warning icon.
     * @see{@link error Provide an error message.}
     * @category Validation
     **/
    invalid: boolean;
    /**
     * Set the input as `invalid` and display an error message (applies the same style as `invalid`).
     *
     * Error message; will take precedence over helpertext if both are provided.
     * @see{@link invalid Set invalid without an error message.}
     * @category Validation
     **/
    error?: string;
    handleOffset(): void;
    handleMessage(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    componentWillLoad(): Promise<void>;
    componentDidLoad(): void;
    private setVal;
    private clearVal;
    private translate;
    private hasHelperText;
    private hasErrorMessage;
    /** If any error is active, either via the prop `invalid` or `error` prop/slot. */
    private hasError;
    /** If any helpertext or error message is active. Checks both props and slots. */
    private hasMessage;
    private checkSlottedHelper;
    private checkSlottedError;
    private getInputType;
    private isPassword;
    private passwordText;
    /** Check if there is a valid or error state active. Returns false if neither is true. */
    private displayState;
    /**
     * Returns the correct icon for the current state (valid or error).
     * Defaults to error icon.
     * @see {@link displayState}
     */
    private stateIcon;
    /**
     * Returns the correct color for the validation icon. Defaults to red.
     * @see {@link displayState}
     */
    private stateColor;
    private showPrefix;
    private showSuffix;
    private showClear;
    private validLabel;
    private useLabel;
    /** Compact label must be positioned after the input element in order to work. */
    private useCompactLabel;
    private renderLabel;
    render(): HTMLPnInputElement;
}
