import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { Option } from '../../../types/src/content-builder';
import { DynamicSelectApi } from '../../../types/src/dynamic-select';

/**
 * @summary The `<cx-dynamic-select>` component is used to create a dynamic select input that can fetch options from an API.
 * It extends the `<cx-select>` component and allows for dynamic loading of options based on an API function.
 */
export default class CxDynamicSelect extends CortexElement {
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-icon-button': typeof CxIconButton;
        'cx-option': typeof CxOption;
        'cx-select': typeof CxSelect;
    };
    private readonly localize;
    selectEl: CxSelect;
    /**
     * The name of the select, submitted as a name/value pair with form data.
     */
    name: string;
    /**
     * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
     * be an array. **For this reason, values must not contain spaces.**
     */
    value: string;
    /**
     * The select's size.
     */
    size: 'small' | 'medium' | 'large';
    /**
     * Placeholder text to show as a hint when the select is empty.
     */
    placeholder: string;
    /**
     * If this property is enabled the user will be able to enter a free text value without being forced to select an option from the suggested values.
     * Otherwise, when no value is selected, the input will be cleared.
     */
    allowFreetext: boolean;
    /**
     * Allows more than one option to be selected.
     */
    multiple: boolean;
    /**
     * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
     * indicate the number of additional items that are selected. Set to 0 to remove the limit.
     */
    maxOptionsVisible: number;
    /**
     * Disables the select control.
     */
    disabled: boolean;
    /**
     * Adds a clear button when the select is not empty.
     */
    clearable: boolean;
    /**
     * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
     */
    open: boolean;
    /**
     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /**
     * An optional element to use for syncing width/height instead of the anchor element.
     * When provided, the popup will sync its dimensions to this element rather than the anchor.
     * Can be used when free-width is false (default) and the select menu should be as wide as the content.
     */
    syncElement: HTMLElement | undefined;
    /**
     * By default, the select menu's width matches the select's width. Set this to true to make the menu as wide as the content.
     */
    freeWidth: boolean;
    /**
     * The autosize padding of the listbox dropdown.
     */
    autosizePadding: number;
    /**
     * Draws a filled select.
     */
    filled: boolean;
    /**
     * Draws a pill-style select with rounded edges.
     */
    pill: boolean;
    /**
     * The select's label. If you need to display HTML, use the `label` slot instead.
     */
    label: string;
    /**
     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
     * inside of the viewport.
     */
    placement: 'top' | 'bottom';
    /**
     * The select's help text. If you need to display HTML, use the `help-text` slot instead.
     */
    helpText: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string;
    /**
     * The select's required attribute.
     */
    required: boolean;
    /**
     * When set to true, the select will use tag elements to render selected options regardless of the `multiple` property.
     * This is useful when you want to display selected options in a more visually distinct way, such as in a tag format.
     */
    useTag: boolean;
    /**
     * Behavior when typing into the display input
     *
     * @type {('select' | 'filter' | 'none')}
     * 'select': default shoelace behavior, selects the first option that starts with the typed string
     * 'filter': filters out options that do not include the typed string
     * 'none'  : does not do anything,      the user cannot type
     */
    inputBehavior: 'select' | 'filter' | 'none';
    /**
     * A function that returns the value of an option. This is used to determine the value of the select when an option is selected.
     *
     * @param option The option to get the value for
     * @returns The value
     */
    getOptionValue: (option: HTMLElement) => string;
    /**
     *
     * current = whether the option is currently focused on e.g via keyboard
     * @param option The option to update the current state
     * @param current If undefined, the option will be toggled. If true, the option will be set as current. If false, the option will be unset.
     * @returns
     */
    setOptionCurrent: (option: HTMLElement, current?: boolean) => void;
    /**
     *
     * @param option The option to update the selected state
     * @param selected If undefined, the option will be toggled. If true, the option will be selected. If false, the option will be unselected.
     * @returns
     */
    setOptionSelected: (option: HTMLElement, selected?: boolean) => void;
    stayOpenOnSelect: boolean;
    /**
     * When set to true, the `cx-change` event will be emitted on every change of the value, even if the value is not changed.
     */
    forceOnChange: boolean;
    /**
     * When set to true, the select will wait for the next frame to focus the display input.
     * This is useful to avoid the focus being lost when the mouse down event is triggered.
     * But still allows the mouse down event not to be prevented default behavior.
     */
    allowDefaultMouseDown: boolean;
    api?: DynamicSelectApi;
    useSearchTerm: boolean;
    /**
     * When set to true, the select will not select the current option when the user presses the Enter key.
     */
    noSelectOnEnter: boolean;
    /**
     * When set to true, the select will not set the first option to be current when open.
     */
    noResetCurrent: boolean;
    /**
     * The name of the icon to use for the prefix.
     */
    iconName: string;
    /**
     * When set to true, the select will not show the dropdown.
     */
    noDropdown: boolean;
    /**
     * When set to true, the select will not show the dropdown if there are no options.
     */
    noDropdownOnEmpty: boolean;
    /**
     * Enable this option to disable flip behavior of the cx-popup.
     */
    noFlip: boolean;
    customChangeEvent: string;
    options: Option[];
    start: number;
    searchTerm: string;
    hasMore: boolean;
    loading: boolean;
    createRenderRoot(): this;
    private fetchOptions;
    handleStartChange(): Promise<void>;
    handleSearchTermChange(): Promise<void>;
    private handleInputChange;
    private handleLoadMore;
    private handleCustomChange;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-dynamic-select': CxDynamicSelect;
    }
}
