// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { ifNonNull } from '../../../Directives/IfNonNull';
// #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>
            </div>
            `)}
        </div>
     `;
}
//# sourceMappingURL=ColorSwatchElementTemplate.js.map