// #region Imports
import { html } from '../../../../Dom/Html';
import { choose, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { CheckType } from '../../../Types/CheckType';
import { SelectionMode } from '../../../Types/SelectionMode';
// #endregion
/**
 * The template of the {@link ListItemElement}.
 *
 * @public
 */
export function listItemElementTemplate(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>
        <mosaik-ripple variant="${e.variant}"
                       @connected="${(evt) => evt.target.attach(e)}"></mosaik-ripple>
        `)}
        <div part="prefix">
            <slot name="prefix"></slot>
        </div>
        <div part="content">
            <div part="inner">
                <slot></slot>
            </div>
            ${choose(e.parent.selectionMode, [[SelectionMode.None, () => html `
            `], [SelectionMode.Single, () => html `
            `], [SelectionMode.Multiple, () => html `
            <mosaik-checkmark part="checkmark"
                              .appearance="${Appearance.Outline}"
                              .variant="${e.variant}"
                              .type="${CheckType.Hook}"
                              ?checked="${e.isChecked}"
                              ?disabled="${e.disabled}"></mosaik-checkmark>
            `]])}
        </div>
        <div part="suffix">
            <slot name="suffix"></slot>
        </div>
    `;
}
//# sourceMappingURL=ListItemElementTemplate.js.map