import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { default as CxDynamicSelect } from '../dynamic-select/dynamic-select.ts';
import { DeviceType } from '../../../types/src/content-builder';
import { SearchBoxSize, SearchBoxWidthType } from '../../../types/src/search-box';
import { CSSResultGroup } from 'lit';

/**
 * @summary A search box component that provides a user interface for entering search queries.
 *
 * @cssproperty [--padding-left=var(--cx-spacing-x-small)] - Padding for text in input field.
 * @cssproperty [--background-color=transparent] - pair of colors for light and dark theme
 * @cssproperty [--border-color=light-dark(
      var(--cx-color-neutral-0),
      var(--cx-color-neutral-1000)
    )] - pair of colors for light and dark theme
 * @cssproperty [--color=light-dark(
      var(--cx-color-neutral-1000),
      var(--cx-color-neutral-0)
    )] - pair of colors for light and dark theme
 *
 * @event cx-input - Emitted when the control receives input.
 * @event cx-change - Emitted when an alteration to the control's value is committed by the user.
 * @event {{ value: string }} cx-search - Emitted when user hits Enter key or clicks search button (if enabled).
 *
 * @csspart input - The input field for entering search queries.
 * @csspart icon - The icon displayed in the search box, typically a magnifying glass.
 *
 * @typedef SearchBoxSize - 'large' | 'medium' | 'small'
 */
export default class CxSearchBox extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-dynamic-select': typeof CxDynamicSelect;
    };
    /**
     * Reference to form element
     */
    form: HTMLFormElement;
    /**
     * Reference to internal input element
     */
    dynamicSelect: CxDynamicSelect;
    /**
     * Search input's size.
     */
    size: SearchBoxSize;
    /**
     * Placeholder for input
     */
    placeholder: string;
    /**
     * Whether the icon can be clicked to trigger search
     */
    canSearchByIcon: boolean;
    /**
     * Value of the search box.
     */
    value: string;
    /**
     * Latest text the user typed mirrored to search-term and used to decide
     * whether to render the suggestions dropdown.
     */
    searchTerm: string;
    /**
     * The width type of the search box.
     */
    widthType: SearchBoxWidthType;
    /**
     * Device type
     * Don't use this prop since it is controlled by window resize event
     * Used for :host([width-type='adaptive'][device-type='mobile']) selector
     */
    deviceType: DeviceType;
    /**
     * Label for the search box
     */
    label: string;
    /**
     * Breakpoints for responsive design
     */
    breakpoints: [number, number, number];
    constructor();
    runFirstUpdated(): void;
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Emit cx-search with current input value
     */
    private emitSearch;
    private fetchAutocompleteItems;
    private getSearchItems;
    private setInputDisplayValue;
    private removeCurrentOption;
    private setOptionCurrent;
    private setOptionSelected;
    private handleEnter;
    private handleSubmit;
    private handleInput;
    private handleClear;
    private handleClick;
    private handleWindowResize;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-search-box': CxSearchBox;
    }
}
