// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { ifNonNull } from '../../../Directives/IfNonNull';
import { Appearance } from '../../../Types/Appearance';
import { CheckType } from '../../../Types/CheckType';
// #endregion
/**
 * The template of the `ColorSwatchElement`.
 *
 * @public
 */
export function colorSwatchElementTemplate(e) {
    return html `
        <div part="root"
             aria-label="${ifNonNull(e.name)}">
            ${when(e.hasBackground, () => html `
            <div part="back"></div>
            `)}
            ${when(e.value, () => html `
            <div part="front"
                style="background-color: ${e.value?.toString()}"></div>
            `)}
            <span part="checkmark-container">
                <slot name="checkmark">
                    <mosaik-checkmark part="checkmark"
                                      .lang="${e.lang}"
                                      .dir="${e.dir}"
                                      .variant="${e.variant}"
                                      .appearance="${Appearance.Plain}"
                                      .type="${CheckType.Hook}"
                                      ?checked="${e.isChecked}"
                                      ?disabled="${e.disabled}"></mosaik-checkmark>
                </slot>
            </span>
        </div>
     `;
}
//# sourceMappingURL=ColorSwatchElementTemplate.js.map