import { EventEmitter } from '../../../stencil-public-runtime';
import type { PnLanguages, PnSearchFieldButton } from "../../../globals/types";
/**
 * The search field has multiple button variants that changes the visual appearance.
 *
 * @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).
 */
export declare class PnSearchField {
    id: string;
    searchElement: HTMLInputElement;
    hostElement: HTMLElement;
    /** Provide an aria-label for the search field. */
    label: string;
    /** Set the value of the search field. */
    value: string;
    /** Set a search field placeholder. This is no replacement for a `label`. */
    placeholder?: string;
    /** Set a unique ID for the search input. */
    searchid: string;
    /** Set HTML name of the search input. */
    name?: string;
    /** Allow the browser to autocomplete the search field. */
    autocomplete?: string;
    /** Point to a datalist element with this id. */
    list?: string;
    /** Override the pntopbar language. */
    language?: PnLanguages;
    /** Disable the search field. @category State */
    disabled: boolean;
    /** Set the search field as required. @category State */
    required: boolean;
    /** Display loading animation. @category State */
    loading: boolean;
    /**
     * Button variant changes the visual of the search field:
     * - `''` Standard with a blue button.
     * - `simple` | ~~`icon`~~ with simple white icon only button.
     * - `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button.
     * - `jumbo` with a larger blue icon only button.
     *
     * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.
     *
     * @category Button
     */
    button: PnSearchFieldButton;
    /** Label for the button element. @category Button */
    buttonLabel?: string;
    /** Add a tooltip to the search button. @category Button */
    buttonTooltip?: string;
    /**
     * Light instead of dark search button.
     *
     * @deprecated The color is now set automatically based on the button prop.
     * @category Button
     */
    buttonLight: boolean;
    /** This is emitted on search submission both with keyboard and mouse. */
    search: EventEmitter<string>;
    /** Custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */
    update: EventEmitter<string>;
    inputHandler(): void;
    componentWillLoad(): Promise<void>;
    private translate;
    private emitSearch;
    private setVal;
    private clearInput;
    private getButtonLabel;
    /** icon === simple-search */
    private searchSimple;
    /** none | icon-inline  === auto-search */
    private searchAuto;
    private searchJumbo;
    private searchButtonAppearance;
    private searchButtonVariant;
    render(): any;
}
