// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { CheckType } from '../../../Types/CheckType';
// #endregion
/**
 * The template of the {@link ToggleSwitchElement}.
 *
 * @public
 */
export function toggleSwitchElementTemplate(e) {
    return html `
        <input part="input"
               type="checkbox"
               id="${'toggle-switch-input'}"
               aria-checked="${e.isChecked ? 'true' : 'false'}"
               .name="${e.name}"
               ?disabled="${e.disabled}"
               ?indeterminate="${e.isThreeState}"
               ?checked="${e.isChecked}"
               ?required="${e.required}"/>
        <slot name="prefix"></slot>
        <div style="position: relative;">
            ${when(!e.disabled, () => html `
                <mosaik-focus-ring part="focusRing"
                                   .variant="${e.variant}"
                                   .visible="${e.isFocused}"
                                   .controlled="${'manual'}"
                                   .for="${'toggle-switch-input'}"></mosaik-focus-ring>
            `)}
            <slot name="checkmark">
                <mosaik-checkmark part="checkmark"
                                  .variant="${e.variant}"
                                  .appearance="${e.appearance}"
                                  .type="${CheckType.Switch}"
                                  ?checked="${e.isChecked}"
                                  ?disabled="${e.disabled}"></mosaik-checkmark>
            </slot>
        </div>
        <slot name="suffix"></slot>
        <slot name="label">
            <mosaik-text part="label"
                         .text="${e.label}"
                         ?disabled="${e.disabled}"
                         ?wrap="${true}"></mosaik-text>
        </slot>
    `;
}
//# sourceMappingURL=ToggleSwitchElementTemplate.js.map