// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `SelectItemElement`.
 *
 * @public
 */
export function selectItemElementTemplate(e) {
    return html `
        ${when(!e.disabled, () => html `
        <mosaik-focus-ring part="focusRing"
                           .variant="${e.variant}"
                           .visible="${e.isFocused}"
                           .controlled="${'manual'}"
                           @connected="${(evt) => evt.target.attach(e)}"></mosaik-focus-ring>
        `)}
        ${when(!e.disabled && e.ripple, () => html `
        <mosaik-ripple part="ripple"
                       .variant="${e.variant}"
                       @connected="${(evt) => evt.target.attach(e)}"></mosaik-ripple>
        `)}
        <slot name="start"></slot>
        <slot name="icon">
        ${when(e.icon, () => html `
            <mosaik-icon .size="${'small'}"
                         .data="${e.icon}"
                         ?disabled="${e.disabled}"></mosaik-icon>
        `)}
        </slot>
        <slot name="label">
        ${when(e.label, () => html `
            <mosaik-text .text="${e.label}"
                         ?disabled="${e.disabled}"
                         ?truncate="${true}"></mosaik-text>
        `)}
        </slot>
        <slot name="checkmark">
            ${when(e.isActive, () => html `
            <mosaik-checkmark part="checkmark"
                            .appearance="${'plain'}"
                            .variant="${e.variant}"
                            .type="${'hook'}"
                            ?checked="${e.isActive}"
                            ?disabled="${e.disabled}"></mosaik-checkmark>
            `)}
        </slot>
        <slot name="end"></slot>
    `;
}
//# sourceMappingURL=SelectItemElementTemplate.js.map