// #region Imports
import { html } from '../../../../Dom/Html';
import { classMap, ifDefined, repeat, when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link AutoCompleteBoxElement}.
 *
 * @public
 */
export function autoCompleteBoxElementTemplate(e) {
    return html `
        <div class="control">
            <input id="${e.inputId}"
                   part="input"
                   type="text"
                   autocomplete="off"
                   ?disabled="${e.disabled}"
                   role="combobox"
                   aria-autocomplete="list"
                   aria-expanded="${e.shouldRenderSuggestions}"
                   aria-controls="${ifDefined(e.shouldRenderSuggestions ? e.listboxId : undefined)}"
                   aria-activedescendant="${ifDefined(e.activeDescendantId ?? undefined)}"
                   aria-busy="${e.isPopulating}"
                   .value="${e.text}"
                   @input="${(event) => e.onInput(event)}"
                   @keydown="${(event) => e.onKeyDown(event)}"
                   @focus="${(event) => e.onFocus(event)}"
                   @blur="${(event) => e.onBlur(event)}"/>
        </div>
        <mosaik-portal part="portal">
            <mosaik-floating part="popup"
                             .anchor="${e}"
                             .placement="${e.suggestionPlacement}"
                             .strategy="${e.suggestionStrategy}"
                             .distance="${e.suggestionDistance}"
                             .skidding="${e.suggestionSkidding}"
                             .sync="${e.suggestionSync}"
                             .flipFallbackPlacements="${e.suggestionFlipFallbackPlacements}"
                             .maxHeight="${e.maxSuggestionHeight}"
                             .flip="${true}"
                             .shift="${true}"
                             ?active="${e.shouldRenderSuggestions}"
                             @activeChanged="${(event) => e.onFloatingActiveChanged(event.detail)}">
                ${when(e.shouldRenderSuggestions, () => html `
                    <ul id="${e.listboxId}"
                        part="list"
                        role="listbox">
                        ${when(e.shouldShowLoadingState, () => html `
                            <li part="item"
                                class="loading"
                                role="presentation">
                                ${e.intl.loading}
                            </li>
                        `, () => when(e.hasSuggestions, () => repeat(e.filteredItems, (_item, index) => e.getOptionId(index), (item, index) => html `
                                <li id="${e.getOptionId(index)}"
                                    part="item"
                                    role="option"
                                    aria-selected="${e.highlightedIndex === index ? 'true' : 'false'}"
                                    class="${classMap({ highlighted: e.highlightedIndex === index })}"
                                    @mousedown="${(event) => e.onSuggestionMouseDown(event)}"
                                    @click="${() => e.onSuggestionClick(index)}">
                                    ${e.renderHighlightedItem(item)}
                                </li>
                            `), () => when(e.shouldShowNoResultsMessage, () => html `
                            <li part="item"
                                class="empty"
                                role="presentation">
                                ${e.intl.noResults}
                            </li>
                        `)))}
                    </ul>
                `)}
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=AutoCompleteBoxElementTemplate.js.map