// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { ifDefined, live, repeat, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { Placement } from '../../../Types/Placement';
import { Size } from '../../../Types/Size';
import { TextBoxType } from '../../../Types/TextBoxType';
// #endregion
/**
 * The template of the {@link AutoCompleteBoxElement}.
 *
 * @public
 */
export function autoCompleteBoxElementTemplate(e) {
    return html `
        <mosaik-textbox part="input"
                        id="${e.inputId}"
                        role="combobox"
                        aria-expanded="${e.isDropDownOpen}"
                        aria-controls="${ifDefined(e.isDropDownOpen ? e.listboxId : undefined)}"
                        aria-activedescendant="${ifDefined(e.activeDescendantId ?? undefined)}"
                        aria-busy="${e.isPopulating}"
                        .type="${TextBoxType.Text}"
                        .variant="${e.variant}"
                        .appearance="${e.appearance}"
                        .value="${live(e.text)}"
                        .label="${e.label}"
                        .placeholder="${e.placeholder}"
                        .isClearable="${e.isClearable}"
                        .isClearableFn="${() => !e.disabled && e.text && e.isClearable}"
                        .required="${e.required}"
                        .invalid="${e.invalid}"
                        .textAlign="${e.textAlign}"
                        ?readonly="${true}"
                        ?disabled="${e.disabled}"
                        @keydown="${(event) => e.onKeyDown(event)}"
                        @cleared="${() => e.clear()}">
            <slot name="prefix"
                  slot="prefix"></slot>
            <slot name="suffix"
                  slot="suffix"></slot>
            <mosaik-button part="caret"
                           slot="suffix"
                           .dir="${e.dir}"
                           .lang="${e.lang}"
                           .appearance="${Appearance.Plain}"
                           .icon="${Icons.caretDown}"
                           .size="${Size.Small}"
                           .iconSize="${Size.Medium}"
                           ?disabled="${e.disabled}"
                           @click="${(event) => e.onCaretClick(event)}"></mosaik-button>
        </mosaik-textbox>
        <mosaik-portal part="portal">
            <mosaik-floating part="popup"
                             .anchor="${e}"
                             .placement="${e.dropDownPlacement}"
                             .strategy="${e.dropDownStrategy}"
                             .distance="${e.dropDownDistance}"
                             .skidding="${e.dropDownSkidding}"
                             .sync="${e.dropDownSync}"
                             .flipFallbackPlacements="${[Placement.Top, Placement.Bottom]}"
                             .maxHeight="${e.maxDropDownHeight}"
                             .flip="${true}"
                             .shift="${true}"
                             ?active="${e.isDropDownOpen}"
                             @activeChanged="${(event) => e.onFloatingActiveChanged(event.detail)}">
                ${when(e.isDropDownOpen, () => html `
                    <div part="filter"
                         style="top: 8px; position: sticky; z-index: 1;">
                        <mosaik-textbox id="${e.filterInputId}"
                                        .value="${live(e.filterText)}"
                                        .variant="${e.variant}"
                                        .appearance="${e.appearance}"
                                        .placeholder="${e.filterPlaceholder || e.intl.searchPlaceholder}"
                                        .isClearable="${true}"
                                        ?disabled="${e.disabled}"
                                        @input="${(event) => e.onFilterInput(event)}"></mosaik-textbox>
                    </div>
                    <mosaik-menu id="${e.listboxId}"
                                 part="menu"
                                 role="listbox"
                                 .disabled="${e.disabled}">
                        ${when(e.shouldShowLoadingState, () => html `
                            <mosaik-busy-state part="loading"
                                               .content="${e.intl.loading}"></mosaik-busy-state>
                        `, () => when(e.hasSuggestions, () => repeat(e.filteredItems, (_item, index) => e.getOptionId(index), (item, index) => html `
                            <mosaik-menu-item id="${e.getOptionId(index)}"
                                              part="menuItem"
                                              role="option"
                                              .value="${e.getItemValue(item)}"
                                              .label="${e.getDisplayValue(item)}"
                                              ?is-active="${e.highlightedIndex === index}"
                                              ?disabled="${e.disabled}"
                                              aria-selected="${e.highlightedIndex === index ? 'true' : 'false'}"
                                              @mousedown="${(event) => e.onSuggestionMouseDown(event)}"
                                              @click="${() => e.onSuggestionClick(index)}">
                                <div slot="label">
                                    ${e.renderSuggestionItem(item, index)}
                                </div>
                            </mosaik-menu-item>
                        `), () => when(e.shouldShowNoResultsMessage, () => html `
                            <mosaik-empty-state part="empty"
                                                .content="${e.intl.noResults}"></mosaik-empty-state>
                        `)))}
                    </mosaik-menu>
                `)}
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=AutoCompleteBoxElementTemplate.js.map