// #region Imports
import chroma from 'chroma-js';
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * @internal
 */
export function colorEditorSwatchElementTemplate(e) {
    const isLight = isLightColor(e.color);
    return html `
        <div part="checkerboard"></div>
        <div part="color"
             data-light="${isLight}"
             style="background-color: ${e.color}"></div>
        ${when(e.copyable, () => html `
            <mosaik-button part="copy-button"
                           aria-label="Copy color to clipboard"
                           .appearance="${'plain'}"
                           .icon="${Icons.copy}"
                           .iconSize="${'small'}"
                           @click="${(ev) => e.onPick(ev)}"></mosaik-button>
        `)}
    `;
}
/**
 * Determines if a color is light based on its luminance and alpha values.
 *
 * @private
 */
function isLightColor(color) {
    try {
        const chromaColor = chroma(color);
        return chromaColor.luminance() > 0.8 || chromaColor.alpha() < 0.5;
    }
    catch {
        return false;
    }
}
//# sourceMappingURL=ColorEditorSwatchElementTemplate.js.map