import { nothing } from 'lit';
import { ClassInfo } from 'lit/directives/class-map.js';
import { OmniFormElement } from '../core/OmniFormElement.js';
import { RenderFunction } from '../render-element/RenderElement.js';
import '../icons/Loading.icon.js';
import '../render-element/RenderElement.js';
import '../icons/ChevronDown.icon.js';
import '../icons/Clear.icon.js';
import '../icons/More.icon.js';
/**
 * Control to get / set a value within a list of options.
 *
 * @import
 * ```js
 * import '@capitec/omni-components/select';
 * ```
 * @example
 *
 * ```html
 * <omni-select
 *   label="Enter a value"
 *   value="Hello World"
 *   hint="Required"
 *   error="Field level error message"
 *   items={'item1','item2','item3','item4'}
 *   display-field="label"
 *   id-field="id"
 *   clearable
 *   searchable
 *   disabled>
 * </omni-select>
 * ```
 *
 * @element omni-select
 *
 * @slot more - Replaces the icon for the more slot (Displays on mobile devices).
 * @slot arrow - Replaces the icon for the arrow slot (Displays on desktop and tablet devices).
 * @slot search-clear - Replaces the icon in the Search field (Displays when searchable is set to true).
 *
 * @cssprop --omni-select-field-text-align - Select component input field text align.
 * @cssprop --omni-select-field-font-color -  Select component input field font color.
 * @cssprop --omni-select-field-font-family - Select component input field font family.
 * @cssprop --omni-select-field-font-size - Select component input field font size.
 * @cssprop --omni-select-field-font-weight - Select component input field font weight.
 * @cssprop --omni-select-field-padding - Select component input field padding.
 * @cssprop --omni-select-field-height - Select component input field height.
 * @cssprop --omni-select-field-width - Select component input field width.
 *
 * @cssprop --omni-select-field-disabled-font-color - Select component input field disabled font color.
 * @cssprop --omni-select-field-error-font-color - Select component input field error font color.
 *
 * @cssprop --omni-select-control-padding - Select component control padding.
 *
 * @cssprop --omni-select-control-icon-width - Select control icon width.
 * @cssprop --omni-select-control-icon-height - Select control icon height.
 * @cssprop --omni-select-control-icon-color - Select control icon color.
 * @cssprop --omni-select-control-icon-error-color - Select control error icon color.
 *
 * @cssprop --omni-select-items-container-box-shadow - Select items container box shadow.
 * @cssprop --omni-select-items-container-background-color - Select items container background color.
 * @cssprop --omni-select-items-container-z-index - Select items container z-index.
 *
 * @cssprop --omni-select-items-max-height - Select items max height.
 *
 * @cssprop --omni-select-items-container-width - Select items container width
 * @cssprop --omni-select-items-container-top - Select items container top.
 * @cssprop --omni-select-items-container-render-bottom-top - Select items container top when rendered at the bottom.
 *
 * @cssprop --omni-select-items-height - Select items height.
 * @cssprop --omni-select-items-width - Select items width.
 * @cssprop --omni-select-items-background-color - Select items background color.
 *
 * @cssprop --omni-select-item-font-color - Select item font color.
 * @cssprop --omni-select-item-font-family - Select item font family.
 * @cssprop --omni-select-item-font-size - Select item font size.
 * @cssprop --omni-select-item-font-weight - Select item font weight.
 * @cssprop --omni-select-item-padding-top - Select item top padding.
 * @cssprop --omni-select-item-padding-bottom - Select item bottom padding.
 * @cssprop --omni-select-item-padding-left - Select item left padding.
 * @cssprop --omni-select-item-padding-right - Select item right padding.
 * @cssprop --omni-select-item-width - Select item width.
 *
 * @cssprop --omni-select-item-hover-background-color - Select item hover background color.
 * @cssprop --omni-select-item-selected-color - Selected item color.
 * @cssprop --omni-select-item-none-hover - Select item hover.
 *
 * @cssprop --omni-select-loading-indicator-width - Select loading indicator width.
 * @cssprop --omni-select-loading-indicator-height - Select loading indicator height.
 *
 * @cssprop --omni-select-search-field-font-color - Select search field font color.
 * @cssprop --omni-select-search-field-font-family - Select search field font family.
 * @cssprop --omni-select-search-field-font-size - Select search field font size.
 * @cssprop --omni-select-search-field-font-weight - Select search field font weight.
 *
 * @cssprop --omni-select-search-field-padding-top - Select search field top padding.
 * @cssprop --omni-select-search-field-padding-bottom - Select search field bottom padding.
 * @cssprop --omni-select-search-field-padding-left - Select search field left padding.
 * @cssprop --omni-select-search-field-padding-right - Select search field right padding.
 *
 * @cssprop --omni-select-search-field-width - Select search field width.
 *
 * @cssprop --omni-select-search-field-top-border-width - Select search field top border width.
 * @cssprop --omni-select-search-field-left-border-width - Select search field left border width.
 * @cssprop --omni-select-search-field-right-border-width - Select search field right border width.
 * @cssprop --omni-select-search-field-bottom-border-width - Select search field bottom border width.
 * @cssprop --omni-select-search-field-bottom-border-color - Select search field bottom border color.
 *
 * @cssprop --omni-select-search-field-background-color - Select search field background color.
 * @cssprop --omni-select-search-control-bottom-border -  Select search field clear control bottom border.
 *
 * @cssprop --omni-select-search-clear-div-right-padding - Select search field clear div right padding.
 * @cssprop --omni-select-search-clear-div-background-color - Select search field clear div background color.
 *
 * @cssprop --omni-select-search-clear-icon-height - Select search field clear icon height.
 * @cssprop --omni-select-search-clear-icon-width - Select search field clear icon width.
 * @cssprop --omni-select-search-clear-icon-color - Select search field clear icon color.
 *
 * @cssprop --omni-select-item-header-left - Select item header left.
 * @cssprop --omni-select-item-header-right - Select item header right.
 * @cssprop --omni-select-item-header-font-color - Select item header font color.
 * @cssprop --omni-select-item-header-font-family - Select item header font family.
 * @cssprop --omni-select-item-header-font-size - Select item header font size.
 * @cssprop --omni-select-item-header-font-weight - Select item header font weight.
 * @cssprop --omni-select-item-header-font-background-color - Select item header font background color.
 *
 * @cssprop --omni-select-item-header-padding-top - Select item header top padding.
 * @cssprop --omni-select-item-header-padding-bottom - Select item head bottom padding.
 * @cssprop --omni-select-item-header-padding-right - Select item head right padding.
 * @cssprop --omni-select-item-header-padding-left - Select item head left padding.
 *
 * @cssprop --omni-select-item-header-item-border-top-left-radius - Select item header top left border radius.
 * @cssprop --omni-select-item-header-item-border-top-right-radius - Select item header top right border radius.
 *
 * @cssprop --omni-select-dialog-width - Select dialog width
 * @cssprop --omni-select-dialog-left - Select dialog left.
 * @cssprop --omni-select-dialog-right - Select dialog right.
 * @cssprop --omni-select-dialog-bottom - Select dialog bottom.
 * @cssprop --omni-select-dialog-background-color - Select dialog background color.
 *
 * @cssprop --omni-select-dialog-modal-max-width - Select dialog modal max width.
 * @cssprop --omni-select-dialog-modal-max-height - Select dialog height.
 * @cssprop --omni-select-dialog-backdrop-color - Select dialog background color.
 *
 * @cssprop --omni-select-dialog-items-min-height - Select dialog items min height.
 *
 */
export declare class Select extends OmniFormElement {
    private _selectElement?;
    private _searchElement?;
    private _itemsContainer?;
    /**
     * Value entered into the form component.
     * @attr
     */
    value?: string | Record<string, unknown>;
    /**
     * Selectable items of the select component.
     * @attr
     */
    items?: SelectItems | ((filterValue?: string) => SelectItems);
    /**
     * Field of the item to display as one of the selectable options.
     * @attr [display-field]
     */
    displayField?: string;
    /**
     * Id field of the items provided.
     * @attr [id-field]
     */
    idField: string;
    /**
     * Message displayed in the items container when no items are bound to the component.
     * @attr [empty-message]
     */
    emptyMessage: string;
    /**
     * Toggles the ability to search the items of the select of the component.
     * @attr
     */
    searchable: boolean;
    /**
     * Render function for each item.
     * @no_attribute
     */
    renderItem?: RenderFunction;
    /**
     * Render function for selected item.
     * @no_attribute
     */
    renderSelection?: RenderFunction;
    /**
     * Custom search function for items instead of using the default provided.
     * @no_attribute
     */
    filterItems?: (filterValue: string, items: SelectTypes) => SelectItems;
    private _popUp;
    private _bottomOfViewport;
    private _isMobile;
    private _searchValue?;
    protected get bottomOfViewport(): boolean;
    protected get isMobile(): boolean;
    protected get searchValue(): string | undefined;
    protected get popUp(): boolean;
    protected get searchElement(): HTMLInputElement | undefined;
    protected get itemsContainer(): HTMLDivElement | undefined;
    protected get selectElement(): HTMLInputElement | undefined;
    private _windowClickBound;
    private _checkScreenDimensionsBound;
    connectedCallback(): void;
    protected firstUpdated(): Promise<void>;
    disconnectedCallback(): void;
    _inputClick(e: Event): void;
    _windowClick(e: Event): void;
    _controlClick(): void;
    _togglePopup(): void;
    _onItemClick(item: Record<string, unknown> | string): Promise<void>;
    _checkScreenDimensions(): Promise<void>;
    _checkForBottomOfScreen(): Promise<void>;
    _checkforMobile(): void;
    _itemsMaxHeightChange(el?: Element): Promise<void>;
    _onSearchFieldInput(): void;
    _onSearchFieldClear(): void;
    static get styles(): import("lit").CSSResultGroup[];
    protected renderContent(): import("lit-html").TemplateResult<1>;
    _renderSelectionLoading(): HTMLElement | import("lit-html").TemplateResult<1>;
    protected renderPicker(): import("lit-html").TemplateResult<1> | typeof nothing;
    _renderDesktopPicker(): import("lit-html").TemplateResult<1>;
    _renderMobilePicker(): import("lit-html").TemplateResult<1>;
    _renderMobileHeader(): import("lit-html").TemplateResult<1> | typeof nothing;
    _renderSearchField(): import("lit-html").TemplateResult<1> | typeof nothing;
    _renderSearchClear(): import("lit-html").TemplateResult<1>;
    protected renderControl(): import("lit-html").TemplateResult<1>;
    _renderDesktopControl(controlIcon: ClassInfo): unknown;
    _renderMobileControl(controlIcon: ClassInfo): unknown;
    _renderOptions(): Promise<import("lit-html").TemplateResult<1> | import("lit-html").TemplateResult<1>[]>;
    _renderItems(items: SelectTypes): import("lit-html").TemplateResult<1>[];
    _renderEmptyOptions(): import("lit-html").TemplateResult<1>;
    _filterOption(item: string | Record<string, unknown>): string | boolean;
    _renderOption(item: Record<string, unknown> | string): import("lit-html").TemplateResult<1>;
    _renderItemLoading(): HTMLElement | typeof nothing;
    _renderOptionSeparator(_item: Record<string, unknown> | string): symbol;
    protected renderLoading(): import("lit-html").TemplateResult<1>;
    protected renderLabel(): import("lit-html").TemplateResult<1>;
}
export type SelectTypes = string[] | Record<string, unknown>[];
export type SelectItems = SelectTypes | Promise<SelectTypes>;
declare global {
    interface HTMLElementTagNameMap {
        'omni-select': Select;
    }
}
//# sourceMappingURL=Select.d.ts.map