import { TextInput } from "../text-input/text-input.js";
/**
 * SearchBox
 * @summary A SearchBox custom HTML input element based on Fluent UI's SearchBox. Inherits from fabric UX TextInput.
 *
 * @example
 * ```html
 * <fabric-search-box aria-label="Search Box" placeholder="Search..."></fabric-search-box>
 * ```
 *
 * @attr {string | undefined} appearance - Indicates the styled appearance of the element.
 * @attr {string | undefined} control-size - Sets the size of the control.
 * @attr {string | undefined} autocomplete - Indicates the element's autocomplete state.
 * @attr {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @attr {string} current-value - The current value of the input.
 * @attr {string | undefined} dirname - Sets the directionality of the element to be submitted with form data.
 * @attr {boolean | undefined} disabled - Sets the element's disabled state.
 * @attr {string | undefined} form - The id of a form to associate the element to.
 * @attr {string | undefined} list - Allows associating a `<datalist>` to the element by ID.
 * @attr {number | undefined} maxlength - The maximum number of characters a user can enter.
 * @attr {number | undefined} minlength - The minimum number of characters a user can enter.
 * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @attr {string | undefined} pattern - A regular expression that the value must match to pass validation.
 * @attr {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
 * @attr {boolean | undefined} readonly - When true, the control will be immutable by user interaction.
 * @attr {boolean | undefined} required - The element's required attribute.
 * @attr {number | undefined} size - Sets the width of the element to a specified number of characters.
 * @attr {string | boolean | undefined} spellcheck - Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
 * @attr {string | undefined} type - Allows setting a type or mode of text.
 * @attr {string} value - The initial value of the input.
 *
 * @prop {string | undefined} appearance - Indicates the styled appearance of the element.
 * @prop {string | undefined} controlSize - Sets the size of the control.
 * @prop {string | undefined} autocomplete - Indicates the element's autocomplete state.
 * @prop {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
 * @prop {string} currentValue - The current value of the input.
 * @prop {string | undefined} dirname - Sets the directionality of the element to be submitted with form data.
 * @prop {boolean | undefined} disabled - Sets the element's disabled state.
 * @prop {string | undefined} form - The id of a form to associate the element to.
 * @prop {string | undefined} list - Allows associating a `<datalist>` to the element by ID.
 * @prop {number | undefined} maxlength - The maximum number of characters a user can enter.
 * @prop {number | undefined} minlength - The minimum number of characters a user can enter.
 * @prop {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
 * @prop {string | undefined} pattern - A regular expression that the value must match to pass validation.
 * @prop {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
 * @prop {boolean | undefined} readOnly - When true, the control will be immutable by user interaction.
 * @prop {boolean | undefined} required - The element's required attribute.
 * @prop {number | undefined} size - Sets the width of the element to a specified number of characters.
 * @prop {string | boolean | undefined} spellcheck - Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
 * @prop {string | undefined} type - Allows setting a type or mode of text.
 * @prop {string} value - The initial value of the input.
 * @prop {HTMLElement | undefined} clearButton - The clear button element.
 *
 * @slot start - Content which can be provided before the input.
 * @slot end - Content which can be provided after the input.
 * @slot - The default slot for input content.
 *
 * @csspart root - The root container for the internal control.
 * @csspart control - The internal `<input>` control.
 *
 * @fires change - Fires a custom 'change' event when the value has changed.
 * @fires input - Fires a custom 'input' event when the value has changed.
 * @fires search - Fires a custom 'submit' event when the search is submitted.
 * @fires select - Fired when text is selected in the input.
 *
 * @method clear - Clears the search box value and focuses the input.
 * @method currentValueChanged - Tracks the current value of the input and shows/hides the clear button.
 * @method checkValidity - Checks the validity of the element and returns the result.
 * @method select - Selects all the text in the text field.
 * @method setCustomValidity - Sets the custom validity message.
 * @method reportValidity - Reports the validity of the element.
 *
 * @extends TextInput
 * @tagname fabric-search-box
 * @public
 */
export declare class SearchBox extends TextInput {
    type: "text";
    /**
     * The clear button element.
     */
    clearButton: HTMLElement | undefined;
    /** Focuses the input element */
    focus(): void;
    /** Blurs the input element */
    blur(): void;
    /** Show the clear button */
    private showClearButton;
    /** Hide the clear button */
    private hideClearButton;
    /**
     * Tracks the current value of the input.
     *
     * @param prev - the previous value
     * @param next - the next value
     *
     * @internal
     */
    currentValueChanged(prev: string, next: string): void;
    /**
     * Clear the search box value
     * @method
     */
    clear(): void;
    /** Handle the submit action */
    private handleSubmit;
    /**
     * Emits the search event.
     *
     * @fires search - Fired when a search is submitted.
     */
    private emitSearch;
    private handleKeydown;
    connectedCallback(): void;
    disconnectedCallback(): void;
}
//# sourceMappingURL=search-box.d.ts.map