// #region Imports
import { Appearance } from '../../../Types/Appearance';
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { live, styleMap } 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) {
    const verticalOffset = -2; // 2;
    const popupStyle = {
        top: `${e.getBoundingClientRect().top + e.clientHeight + verticalOffset}px`,
        left: `${e.getBoundingClientRect().left}px`,
        width: `${e.clientWidth}px`,
        maxHeight: e.maxDropDownHeight
    };
    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}"
                        ?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="icon"
                           slot="suffix"
                           .appearance="${Appearance.Plain}"
                           .icon="${Icons.caretDown}"
                           .size="${Size.Small}"
                           .iconSize="${Size.Medium}"></mosaik-button>
        </mosaik-textbox>
        <!-- <mosaik-popup part="popup"
                      for="input"
                      style="${styleMap(popupStyle)}"
                      .elevation="${0}"
                      ?hidden="${!e.isDropDownOpen}"
                      @click="${(x) => x.stopPropagation()}"
                      @wheel="${(x) => x.stopPropagation()}">
            <mosaik-menu part="menu">
                <slot></slot>
            </mosaik-menu>
        </mosaik-popup> -->
        <mosaik-floating part="popup"
                         .anchor="${'input'}"
                         .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)}">
            <slot></slot>
        </mosaik-floating>
    `;
}
//# sourceMappingURL=SelectElementTemplate.js.map