// #region Imports
import chroma from 'chroma-js';
import { html } from '../../../../Dom/Html';
// #endregion
/**
 * @internal
 */
export function colorEditorAreaElementTemplate(e) {
    const thumbX = e.saturation * 100;
    const thumbY = (1 - e.value) * 100;
    const hueColor = chroma.hsv(e.hue, 1, 1).hex();
    const thumbColor = chroma.hsv(e.hue, e.saturation, e.value).hex();
    return html `
        <div part="gradient-saturation"
             style="background-image: linear-gradient(to right, #fff, ${hueColor})"></div>
        <div part="gradient-value"></div>
        <div part="thumb"
             style="left: ${thumbX}%; top: ${thumbY}%; background-color: ${thumbColor}"></div>
    `;
}
//# sourceMappingURL=ColorEditorAreaElementTemplate.js.map