// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { flex } from '../../../Directives/Flex/FlexDirective';
import { CheckType } from '../../../Types/CheckType';
// #endregion
/**
 * The template of the {@link ChoiceElement}.
 *
 * @public
 */
export function choiceElementTemplate(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>
        `)}
        <input id="${'choice-input'}" part="input"
               type="radio"
               name="${e.name}"
               ?disabled="${e.disabled}"
               ?indeterminate="${e.isThreeState}"
               ?checked="${e.isChecked}"
               ?required="${e.required}"
               aria-checked="${e.isChecked ? 'true' : 'false'}" />
        <div ${flex({ direction: 'row', gap: '8px', fill: true })}>
            ${when(e.icon.trim(), () => html `
            <mosaik-icon .data="${e.icon}"
                         ?disabled="${e.disabled}"
                         ?inline="${true}"></mosaik-icon>
            `)}
            <div ${flex({ direction: 'column', justify: 'center', fill: true })}>
                <slot name="label">
                    <mosaik-text part="label"
                                 role="text"
                                 .text="${e.label}"
                                 ?disabled="${e.disabled}"
                                 ?wrap="${true}"></mosaik-text>
                </slot>
                <slot name="additional">
                    <mosaik-text part="additional"
                                 role="text"
                                 .text="${e.additional}"
                                 ?disabled="${e.disabled}"
                                 ?wrap="${true}"></mosaik-text>
                </slot>
            </div>
            <slot name="checkmark">
                <mosaik-checkmark .variant="${e.variant}"
                                  .appearance="${e.appearance}"
                                  .type="${CheckType.Hook}"
                                  ?checked="${e.isChecked}"
                                  ?disabled="${e.disabled}"></mosaik-checkmark>
            </slot>
        </div>
    `;
}
//# sourceMappingURL=ChoiceElementTemplate.js.map