@electrovir/color/dist/elements/vir-color-format-sliders.element.js

A wrapper for culori with an extremely simple API.

/* node:coverage disable */
import { getObjectTypedKeys } from '@augment-vir/common';
import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
import { noNativeSpacing } from 'vira/dist/styles/native-styles.js';
import { colorFormats, } from '../data/color-class/color-formats.js';
import { VirColorSlider } from './vir-color-slider.element.js';
/**
 * Color sliders for all coordinates within a specific color format.
 *
 * @category Elements
 */
export const VirColorFormatSliders = defineElement()({
    tagName: 'vir-color-format-sliders',
    styles: css `
        :host {
            display: flex;
            flex-direction: column;
        }

        h3 {
            ${noNativeSpacing};
        }
    `,
    events: {
        colorChange: defineElementEvent(),
    },
    render({ inputs, dispatch, events }) {
        const colorFormat = colorFormats[inputs.colorFormatName];
        const coordinateTemplates = getObjectTypedKeys(colorFormat.coords).map((colorCoordinate) => {
            return html `
                    <${VirColorSlider.assign({
                color: inputs.color,
                colorCoordinateName: colorCoordinate,
                colorFormatName: inputs.colorFormatName,
            })}
                        ${listen(VirColorSlider.events.valueChange, (event) => {
                const newColor = inputs.color.clone();
                newColor.set({
                    [inputs.colorFormatName]: {
                        [colorCoordinate]: event.detail,
                    },
                });
                const newValue = newColor.toCss()[colorFormat.conversionFormat];
                dispatch(new events.colorChange(newValue));
            })}
                    ></${VirColorSlider}>
                `;
        });
        return html `
            ${inputs.showFormatName
            ? html `
                      <h3>${inputs.colorFormatName}</h3>
                  `
            : nothing}
            ${coordinateTemplates}
        `;
    },
});