// #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 colorEditorElementTemplate(e) {
    const displayColor = e.getDisplayColor();
    const opaqueColor = chroma.hsv(e.hue, e.saturation, e.value).hex();
    return html `
        <div part="container">
            <slot name="area">
                <mosaik-color-editor-area .hue="${e.hue}"
                                          .saturation="${e.saturation}"
                                          .value="${e.value}"
                                          ?disabled="${e.disabled}"
                                          @colorAreaChanged="${(ev) => e.onAreaChange(ev)}"></mosaik-color-editor-area>
            </slot>
            <div part="tools">
                <div part="tools-row">
                    <div part="sliders">
                        <slot name="hue-slider">
                            <mosaik-color-editor-hue-slider .hue="${e.hue}"
                                                            ?disabled="${e.disabled}"
                                                            @hueChanged="${(ev) => e.onHueChange(ev)}"></mosaik-color-editor-hue-slider>
                        </slot>
                        ${when(e.showAlpha, () => html `
                            <slot name="alpha-slider">
                                <mosaik-color-editor-alpha-slider .alpha="${e.alpha}"
                                                                  .color="${opaqueColor}"
                                                                  ?disabled="${e.disabled}"
                                                                  @alphaChanged="${(ev) => e.onAlphaChange(ev)}"></mosaik-color-editor-alpha-slider>
                            </slot>
                        `)}
                    </div>
                    ${when(e.showSwatch, () => html `
                        <slot name="swatch">
                            <mosaik-color-editor-swatch .color="${displayColor}"
                                                        .copyable="${true}"></mosaik-color-editor-swatch>
                        </slot>
                    `)}
                    ${when(e.showEyeDropper, () => html `
                        <slot name="eye-dropper">
                            <mosaik-button part="eye-dropper-button"
                                           appearance="plain"
                                           .iconSize="${'small'}"
                                           .icon="${Icons.eyeDropper}"
                                           ?disabled="${e.disabled}"
                                           @click="${() => e.onOpenEyeDropper()}"></mosaik-button>
                        </slot>
                    `)}
                </div>
            </div>
            ${when(e.showInputs, () => html `
                <div part="inputs">
                    <slot name="inputs">
                        <mosaik-color-editor-inputs .color="${displayColor}"
                                                    .format="${e.format}"
                                                    .showAlpha="${e.showAlpha}"
                                                    ?disabled="${e.disabled}"
                                                    @colorChanged="${(ev) => e.onInputsChange(ev)}"
                                                    @colorFormatChanged="${(ev) => e.onInputsFormatChange(ev)}"></mosaik-color-editor-inputs>
                    </slot>
                </div>
            `)}
            ${when(e.showPalette, () => html `
                <div part="palette">
                    <slot name="palette">
                        <mosaik-color-editor-palette .palettes="${e.palettes}"
                                                     .selectedPalette="${e.selectedPalette}"
                                                     .currentColor="${displayColor}"
                                                     .allowAdd="${true}"
                                                     .panelAnchor="${e}"
                                                     ?disabled="${e.disabled}"
                                                     @paletteSelect="${(ev) => e.onPaletteSelect(ev)}"
                                                     @paletteAdd="${(ev) => e.onPaletteAdd(ev)}"
                                                     @paletteChanged="${(ev) => e.onPaletteChange(ev)}"></mosaik-color-editor-palette>
                    </slot>
                </div>
            `)}
        </div>
    `;
}
//# sourceMappingURL=ColorEditorElementTemplate.js.map