// #region Imports
import { html } from '../../../../Dom/Html';
import { Placement } from '../../../Types/Placement';
// #endregion
/**
 * The template of the `ColorPickerElement`.
 *
 * @public
 */
export function colorPickerElementTemplate(e) {
    return html `
        <mosaik-color-swatch part="swatch"
                             .value="${e.value}"></mosaik-color-swatch>
        <slot></slot>
        <mosaik-portal part="portal">
            <mosaik-floating part="popup"
                             .anchor="${e}"
                             .placement="${e.dropDownPlacement}"
                             .distance="${e.dropDownDistance}"
                             .skidding="${e.dropDownSkidding}"
                             .strategy="${e.dropDownStrategy}"
                             .sync="${'none'}"
                             .maxHeight="${e.dropDownMaxHeight}"
                             .height="${e.dropDownHeight}"
                             .maxWidth="${e.dropDownMaxWidth}"
                             .width="${e.dropDownWidth}"
                             .flipFallbackPlacements="${[Placement.Top, Placement.Bottom, Placement.Left, Placement.Right]}"
                             ?flip="${true}"
                             .shift="${true}"
                             ?active="${e.isDropDownOpen}">
                <mosaik-color-editor part="editor"
                                     .color="${e.value ?? '#ffffff'}"
                                     .format="${e.format}"
                                     .showAlpha="${e.showAlpha}"
                                     .showInputs="${e.showInputs}"
                                     .showPalette="${e.showPalette}"
                                     .showEyeDropper="${e.showEyeDropper}"
                                     .showSwatch="${e.showSwatch}"
                                     .palettes="${e.palettes}"
                                     .selectedPalette="${e.selectedPalette}"
                                     ?disabled="${e.disabled}"
                                     @colorChanged="${(event) => e.onEditorChange(event)}"></mosaik-color-editor>
            </mosaik-floating>
        </mosaik-portal>
    `;
}
//# sourceMappingURL=ColorPickerElementTemplate.js.map