// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { IconPosition } from '../../../Types/IconPosition';
import { Placement } from '../../../Types/Placement';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the `SplitButtonElement`.
 *
 * @public
 */
export function splitButtonElementTemplate(e) {
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRingMain"
                           .lang="${e.lang}"
                           .dir="${e.dir}"
                           .variant="${e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           .for="${'button'}"></mosaik-focus-ring>
        `)}
        <button id="button"
                part="button"
                type="${e.type}">
            ${when(!e.disabled && e.ripple, () => html `
            <mosaik-ripple part="rippleMain"
                           .lang="${e.lang}"
                           .dir="${e.dir}"
                           .variant="${e.variant}"
                           .for="${'button'}"></mosaik-ripple>
            `)}
            <mosaik-stack part="innerStack"
                          .lang="${e.lang}"
                          .dir="${e.dir}"
                          .orientation="${e.orientation}"
                          .verticalAlignment="${e.verticalContentAlignment}"
                          .horizontalAlignment="${e.horizontalContentAlignment}"
                          .reverse="${e.iconPosition === IconPosition.After}">
                <slot name="icon">
                ${when(e.icon, () => html `
                    <mosaik-icon part="icon"
                                 .lang="${e.lang}"
                                 .dir="${e.dir}"
                                 .appearance="${Appearance.Plain}"
                                 .variant="${e.variant}"
                                 .data="${e.icon}"
                                 .size="${e.iconSize ?? e.size}"
                                 .inline="${true}"
                                 ?disabled="${e.disabled}"></mosaik-icon>
                `)}
                </slot>
                <slot name="label">
                ${when(e.label, () => html `
                    <mosaik-text part="label"
                                 .lang="${e.lang}"
                                 .dir="${e.dir}"
                                 .text="${e.label}"
                                 .variant="${e.variant}"
                                 ?disabled="${e.disabled}"></mosaik-text>
                `)}
                </slot>
            </mosaik-stack>
            ${when(e.isBusy, () => html `
            <mosaik-progress-ring part="progressRing"
                                  .lang="${e.lang}"
                                  .dir="${e.dir}"
                                  .radius="${'12px'}"
                                  .variant="${e.variant}"
                                  .isIndeterminate="${true}"
                                  ?disabled="${e.disabled}"></mosaik-progress-ring>
            `)}
        </button>
        <button part="buttonSplit"
                id="button_split"
                type="button"
                @click="${(x) => e.onSplit(x)}">
            ${when(!e.disabled, () => html `
            <mosaik-focus-ring part="focusRingSplit"
                               .lang="${e.lang}"
                               .dir="${e.dir}"
                               .variant="${e.variant}"
                               .for="${'button_split'}"></mosaik-focus-ring>
            `)}
            ${when(!e.disabled && e.ripple, () => html `
            <mosaik-ripple part="rippleSplit"
                           .lang="${e.lang}"
                           .dir="${e.dir}"
                           .variant="${e.variant}"
                           .for="${'button_split'}"></mosaik-ripple>
            `)}
            <mosaik-icon part="iconCaret"
                         .lang="${e.lang}"
                         .dir="${e.dir}"
                         .inline="${true}"
                         .size="${Size.Small}"
                         .data="${Icons.caretDown}"
                         .appearance="${Appearance.Plain}"
                         .variant="${e.variant}"
                         ?disabled="${e.disabled}"></mosaik-icon>
        </button>
        <slot name="overlay"></slot>
        <mosaik-floating part="popup"
                         .lang="${e.lang}"
                         .dir="${e.dir}"
                         .anchor="${'button_split'}"
                         .placement="${e.dropDownPlacement}"
                         .distance="${e.dropDownDistance}"
                         .skidding="${e.dropDownSkidding}"
                         .strategy="${e.dropDownStrategy}"
                         .maxHeight="${e.dropDownMaxHeight}"
                         .height="${e.dropDownHeight}"
                         .maxWidth="${e.dropDownMaxWidth}"
                         .width="${e.dropDownWidth}"
                         .flipFallbackPlacements="${[Placement.Top, Placement.Bottom]}"
                         .sync="${'none'}"
                         ?flip="${true}"
                         ?shift="${true}"
                         ?active="${e.isDropDownOpen}">
            <slot></slot>
        </mosaik-floating>
    `;
}
//# sourceMappingURL=SplitButtonElementTemplate.js.map