import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
import { KeyValue } from '../types';
type Selection = {
    value: string | KeyValue;
};
/**
 * `ino-autocomplete` is a component that acts similarly to the native `datalist` feature of the `<input>` element.
 *
 * Unlike other components, `ino-autocomplete` is stateful, meaning it maintains its own state. This makes it less
 * flexible to some extent compared to stateless components.
 *
 * ## Responsibilities
 * The component handles the following tasks:
 * - Management of the `value` property of the `<ino-input>` element.
 * - Management of showing and hiding the different options based on the input.
 * - Keyboard navigation among the options.
 *
 * ## Filtering
 * The options are filtered using `.includes(...)`, which ignores case sensitivity.
 *
 * @slot input - An `<ino-input>` element that will be controlled by this component
 */
export declare class Autocomplete implements ComponentInterface {
    el: HTMLInoAutocompleteElement;
    private listEl;
    private inoInputEl;
    private inputEl;
    private autocomplete;
    /**
     * Number of ms the search function should be delayed after the user typed something.
     */
    debounce: number;
    /**
     * Text to display when there are no options found, where `$` is the placeholder for the input of the user.
     */
    noOptionsText: string;
    /**
     * All options either as a string array or as an array of `{key: string; value: string}` objects.
     */
    options: string[] | KeyValue[];
    onOptionsChange(): void;
    /**
     * The selected value.
     */
    value: string | KeyValue | null;
    onValueChange(value: string | KeyValue | null): void;
    /**
     * Emits the list item the user clicked on either as a string or
     * a `{key: string; value: string}` object depending on the provided options.
     *
     * Trigger on two occasions:
     * 1. The user clicked on a list-item.
     * 2. The user types in a string that matches an option and blurs the input
     */
    valueChange: EventEmitter<string | {
        key: string;
        value: string;
    }>;
    onItemSelect(ev: CustomEvent<{
        selection: Selection;
    }>): void;
    onClose(ev: CustomEvent<any>): void;
    componentDidLoad(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private onInputValueChange;
    private initComponents;
    private initAutocomplete;
    private createNoMatchMessage;
    private resetInput;
    private static isKeyValue;
    private static UNSELECTED_INPUT_CLASS;
    private styleInputSelected;
    private styleInputUnselected;
    render(): any;
}
export {};