// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { live, 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 ComboElement}.
 *
 * @public
 */
export function comboElementTemplate(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.selectedItems.map((x) => x.displayText ?? '').join(', '))}"
                        .label="${e.label}"
                        .placeholder="${e.placeholder}"
                        .readonly="${true}"
                        .required="${e.required}"
                        .isClearable="${e.isClearable}"
                        .isClearableFn="${() => !e.disabled && e.value && e.isClearable}"
                        .invalid="${e.invalid}"
                        .textAlign="${e.textAlign}"
                        ?disabled="${e.disabled}"
                        @click="${() => e.toggle()}">
            <slot name="prefix" slot="prefix"></slot>
            <slot name="suffix" slot="suffix"></slot>
            <mosaik-button part="icon"
                           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}"
                             .maxHeight="${e.maxDropDownHeight}"
                             .sync="${'width'}"
                             .flipFallbackPlacements="${[Placement.Top, Placement.Bottom]}"
                             ?flip="${true}"
                             .shift="${true}"
                             ?active="${e.isDropDownOpen}"
                             @activeChanged="${(x) => e.onFloatingActiveChanged(x.detail)}">
                <div part="projection"></div>
                ${when(e.items.length === 0, () => html `
                    <mosaik-empty-state part="empty"
                                        .content="${e.intl.empty}"></mosaik-empty-state>
                `)}
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=ComboElementTemplate.js.map