// #region Imports
import chroma from 'chroma-js';
import { html } from '../../../../Dom/Html';
// #endregion
/**
 * @internal
 */
export function colorEditorAlphaSliderElementTemplate(e) {
    const thumbPosition = e.alpha * 100;
    // Create gradient from transparent to solid color
    let gradientColor = 'linear-gradient(to right, transparent, red)';
    try {
        const chromaColor = chroma(e.color);
        const transparentColor = chromaColor.alpha(0).css();
        const solidColor = chromaColor.alpha(1).css();
        gradientColor = `linear-gradient(to right, ${transparentColor}, ${solidColor})`;
    }
    catch {
        // Use default gradient
    }
    return html `
        <div part="checkerboard"></div>
        <div part="gradient"
             style="background: ${gradientColor}"></div>
        <div part="thumb"
             style="left: ${thumbPosition}%"></div>
    `;
}
//# sourceMappingURL=ColorEditorAlphaSliderElementTemplate.js.map