import { EventEmitter } from '../../stencil-public-runtime';
import { FormControl } from '../form-control';
export type DatacomDropDownVariantType = 'standard' | 'multi' | 'combobox';
/**
 * HTML Select component with styled options.
 *
 * The multiple select option unlike the standard select is within the drop down.
 * Multiple items are selected with simple click rather than requiring ctrl+click
 */
export declare class DatacomDropdown implements FormControl {
    /**
     * HTML element input properties
     */
    name: string;
    value?: string;
    placeholder?: string;
    disabled?: boolean;
    readonly?: boolean;
    required?: boolean;
    form?: string;
    title: string;
    /**
     * Drop down variant
     */
    variant: DatacomDropDownVariantType;
    /**
     * Control label
     */
    label: string;
    /**
     * Error message to display in the case of input validity checks
     * or explicitly with 'valid' property
     */
    message?: string;
    isValid?: boolean;
    /**
     * Optional help text
     */
    help?: string;
    /**
     * Automatically show error state if invalid on form submit
     */
    autoValidate?: boolean;
    /**
     * Event for when select option has been changed
     */
    changed: EventEmitter<string[]>;
    /**
     * Error mutable state will re-render the control to display error message, icon and focus border
     */
    isInError: boolean;
    /**
     * Is the drop down list displayed
     */
    isOpen: boolean;
    /**
     * Controls visibility of filter clear button for 'combobox' variant
     */
    showFilterClear: boolean;
    /**
     * Host element
     */
    private host;
    /**
     * The html select element used in form submit
     */
    private selectElement;
    /**
     * The text input to filter options
     */
    private searchInputElement;
    /**
     * The nearest form for the component
     */
    private formElement;
    /**
     * Is the drop down list in filter mode
     */
    private isFiltering;
    /**
     * The component is 'dirty' if it has been touched by user input
     *
     * @see onInput
     */
    private isDirty;
    /**
     * Random id used by label to associate with the input control.
     *
     * This is randomly generated as it cannot be coded to a known value as all instances
     * on the page would have the same value.
     */
    private inputId;
    /**
     * List of selected option indexes
     */
    selected: number[];
    /**
     * Get a list of select values
     *
     * @returns string[]
     */
    getSelected(): Promise<string[]>;
    /**
     * Force validation on the form control to display any error messages
     *
     * @returns boolean
     */
    validate(): Promise<boolean>;
    /**
     * Check if the control is valid
     */
    checkValidity(): Promise<boolean>;
    /**
     * Capture input element reference on mount. The element is used
     * for form submission.
     *
     * @param el
     */
    private setSelectElementRef;
    /**
     * Get reference to text input for option searching
     *
     * @param el
     */
    private setInputElementRef;
    /**
     * Cache of children options
     */
    private options;
    /**
     * Get a list of options children
     *
     * @returns List of options
     */
    private getOptions;
    /**
     * Get a single child option by index number
     *
     * @param index
     * @returns
     */
    private getOption;
    /**
     * Clear the search filter and redisplay all options
     */
    private clearFilter;
    /**
     * Filter options based on typed text
     *
     * @param find
     * @returns
     */
    private filter;
    /**
     * Close the drop down list
     */
    private close;
    /**
     * Open the drop down list
     */
    private open;
    /**
     * Select an item from the drop down list.
     *
     * The behaviour varies depending on the 'multiple' property.
     *
     * @param index index of option selected or deselected
     * @param withToggle toggle the selected state
     */
    private select;
    /**
     * Clear all selected items
     */
    private clear;
    /**
     * *** Event listeners ***
     */
    /**
     * Handle the custom select/deselect event from the option component.
     *
     * @param event
     */
    handleItemSelected(event: CustomEvent<number>): void;
    /**
     * Handle any click events outside the control and close the dropdown.
     */
    handleOutsideClick(event: MouseEvent): void;
    /**
     * Handle key entry in to the search input and filter options
     */
    handleInputEntry: (event: KeyboardEvent) => void;
    /**
     * Handle opening and closing of options drop down from click on component
     *
     * @param event
     */
    handleClick: (event: MouseEvent) => void;
    /**
     * Watch for form submit and prevent if the input is invalid
     *
     * @param event
     */
    handleFormSubmit: (event: SubmitEvent) => Promise<void>;
    /**
     * Handle key press on the control in a closed state should open the dropdown list
     *
     * @param event
     */
    handleKeyUp: (event: KeyboardEvent) => void;
    /**
     * Handle clear selection event
     *
     * @param event
     * @returns
     */
    handleClear: (event: MouseEvent) => void;
    /**
     * Handle filter clear event
     *
     * @param event
     * @returns
     */
    handleFilterClear: (event: MouseEvent) => void;
    /**
     * *** Component lifecycle methods ***
     */
    /**
     * Set up the state of children options
     *
     * @returns void
     */
    componentWillLoad(): Promise<void>;
    /**
     * After the first render show any selected state
     *
     * @returns void
     */
    componentDidLoad(): Promise<void>;
    /**
     * When removed from the DOM, remove any event listeners
     */
    disconnectedCallback(): void;
    chevronIcon: import("@stencil/core").VNode;
    /**
     * Render view control
     *
     * @returns JSX Fragment
     */
    private renderViewControl;
    /**
     * Render a dropdown list with search input for simple select, or
     * a combo droplist with a selection summary
     *
     * @returns JSX Fragment
     */
    renderDropdown(): any;
    render(): any;
}
export type HTMLDatacomDropdownElement = HTMLElement & DatacomDropdown;