import { Cre8Element } from '../cre8-element';
import '../remove-tag/remove-tag';
import '../field-note/field-note';
import '../button/button';
import '../checkbox-field-item/checkbox-field-item';
/**
 * Multiselect is used when multiple options can be chosen from a static dropdown
 * This component has a list of items in the dropdown that can be added as "selected tags"
 * The checkbox will always reflect the selected nature of the item and is not removed
 * from the dropdown when clicked, the tags will be added and removed based on their state.
 *
 * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
 * current list after the change is given in the detail.
 */
export declare class Cre8MultiSelect extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * The list of string items the user can choose in the dropdown
     *
     * Note: For passing props containing arrays and complex types, you should pass the props using a
     * period in from of the prop like so: `.items="[]"`
     * (this is only needed for Web Components and not the React version)
     * @attr {string[]}
     */
    items: string[];
    selectedTagItems: string[];
    /**
     * The list of string items that are initially in the selected list of tags
     * Note: This list MUST be a subset of the array of items to function.
     * i.e. if items=['cat', 'dog', 'bird'], preselectedItems=['cat'] is valid
     * while preselectedItems=['cat', 'goat'] is not and will break the component.
     *
     * Note: For passing props containing arrays and complex types, you should pass the props using a
     * period in from of the prop like so: `.items="[]"`
     * (this is only needed for Web Components and not the React version)
     * @attr {string[]}
     */
    preselectedItems: string[];
    dropdownOpen: boolean;
    /**
     * The required label that appears above the multiselect
     * @attr {string}
     */
    label: string;
    /**
     * The unique id of the select
     * @attr {string}
     */
    fieldId?: string;
    /**
     * Optional field note text can be added to provide additional field guidance.
     * @attr {string}
     */
    fieldNote?: string;
    /**
     * Used to connect the field note in text field to the text menu for accessibility
     * @attr {string}
     */
    ariaDescribedBy?: string;
    /**
     * Additional aria-describedby connection to id for additional success and error notes to be accessible
     * @attr {string}
     */
    validationAriaDescribedBy?: string;
    /**
     * The disabled attribute on the select
     * @attr {boolean}
     */
    disabled?: boolean;
    /**
     * Changes the component's treatment to represent an error state
     * @attr {boolean}
     */
    isError?: boolean;
    /**
     * The error field note that appears below the default field note
     * @attr {string}
     */
    errorNote?: string;
    /**
     * Changes the component's treatment to represent a success state
     * @attr {boolean}
     */
    isSuccess?: boolean;
    /**
     * The success field note that appears below the default field note
     * @attr {string}
     */
    successNote?: string;
    constructor();
    firstUpdated(): void;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private _renderDropdownItems;
    private _renderSelectedTags;
    private setPreselectedItemsinDropdown;
    private clearAllTags;
    private emitSelectedItems;
    private toggleDropDown;
    private _handleOnClick;
    private _handleListItemClick;
    private _handleDropdownItemInput;
    private _handleRemoveTagClick;
    private dropdownArrowClick;
    private _handleButtonToListKeydown;
    private _handleListKeydown;
    private _initializeAria;
    /**
     * Aria describedby string based on field notes and error/success notes
     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
     * render both in the input's `aria-describedby` attribute
     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
     */
    private _fieldNoteAria;
    /**
     * Render the success or error field notes
     * 1. If there is a successNote, then return the field note with the success message and state.
     * 2. If there is a errorNote, then return the field note with the error message and state.
     */
    private _renderSuccessErrorFieldNote;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-multi-select': Cre8MultiSelect;
    }
}
export default Cre8MultiSelect;
//# sourceMappingURL=multi-select.d.ts.map