// #region Imports
import { Appearance } from '../../../Types/Appearance';
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { live, when } from '../../../Directives/Directives';
import { Placement } from '../../../Types/Placement';
import { Size } from '../../../Types/Size';
import { TextBoxType } from '../../../Types/TextBoxType';
// #endregion
/**
 * The template of the {@link SelectElement}.
 *
 * @public
 */
export function selectElementTemplate(e) {
    // TODO: isClearableFn in textbox is a dirty hack
    return html `
        <mosaik-textbox part="input"
                        id="input"
                        role="combobox"
                        aria-expanded="${e.isDropDownOpen}"
                        .type="${TextBoxType.Text}"
                        .variant="${e.variant}"
                        .appearance="${e.appearance}"
                        .value="${live(e.selectedItem?.displayText ?? '')}"
                        .label="${e.label}"
                        .placeholder="${e.placeholder}"
                        .isClearable="${e.isClearable}"
                        .isClearableFn="${() => !e.disabled && e.value && e.isClearable}"
                        .required="${e.required}"
                        .invalid="${e.invalid}"
                        .textAlign="${e.textAlign}"
                        ?readonly="${!e.isEditable}"
                        ?disabled="${e.disabled}"
                        @click="${() => e.toggle()}"
                        @cleared="${() => e.clear()}">
            <slot name="prefix" slot="prefix"></slot>
            <slot name="suffix" slot="suffix"></slot>
            <mosaik-button part="caret"
                           slot="suffix"
                           .appearance="${Appearance.Plain}"
                           .icon="${Icons.caretDown}"
                           .size="${Size.Small}"
                           .iconSize="${Size.Medium}"
                           ?disabled="${e.disabled}"></mosaik-button>
        </mosaik-textbox>
        <slot></slot>
        <mosaik-portal part="portal">
            <mosaik-floating part="popup"
                             .anchor="${e}"
                             .placement="${e.dropDownPlacement}"
                             .distance="${e.dropDownDistance}"
                             .skidding="${e.dropDownSkidding}"
                             .strategy="${e.dropDownStrategy}"
                             .sync="${'width'}"
                             .flipFallbackPlacements="${[Placement.Top, Placement.Bottom]}"
                             .maxHeight="${e.maxDropDownHeight}"
                             .flip="${true}"
                             .shift="${true}"
                             ?active="${e.isDropDownOpen}"
                             @activeChanged="${(x) => e.onFloatingActiveChanged(x.detail)}">
                ${when(e.showFilter, () => html `
                <div part="filter"
                     style="top: 8px; position: sticky; z-index: 1;">
                    <slot name="filter"></slot>
                    <mosaik-spacer .thickness="${'all'}"
                                   .size="${'tiny'}">
                        <mosaik-textbox .value="${e.filter}"
                                        .variant="${e.variant}"
                                        .appearance="${e.appearance}"
                                        .placeholder="${e.filterPlaceholder.trim() || e.intl.filterPlaceholder}"
                                        .isClearable="${true}"
                                        ?readonly="${e.isReadOnly}"
                                        ?disabled="${e.disabled}"
                                        @input="${(x) => e.filter = x.target.value}"></mosaik-textbox>
                    </mosaik-spacer>
                </div>
                `)}
                <div part="projection"></div>
                ${when(e.items.length === 0 || e.items.filter((item) => item.hidden).length === 0, () => html `
                    <mosaik-empty-state part="empty"
                                        .content="${e.intl.empty}"></mosaik-empty-state>
                `)}
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=SelectElementTemplate.js.map