function RgbColorInput(options = {}) { const { label } = options; let { expanded = false, value } = options; const uid = DOM.uid("color-input"); const rootEl = htl.html`

`; if (expanded) { rootEl.setAttribute("data-expanded", ""); } const mixerEl = createRgbColorMixer({ ...options }); mixerEl.classList.add("mixer"); function setValue(v) { value = v; rootEl.style.setProperty("--color", v); outputEl.value = v; } mixerEl.addEventListener("input", (event) => { const { value } = event.target; setValue(value); rootEl.value = value; }); const labelEl = label ? htl.html`${label}` : undefined; const buttonEl = htl.html``; buttonEl.addEventListener("click", () => { expanded = !expanded; expanded ? rootEl.setAttribute("data-expanded", "") : rootEl.removeAttribute("data-expanded"); }); const outputEl = htl.html`${value}`; Object.defineProperty(rootEl, "value", { get() { return value; }, set(v) { setValue(v); mixerEl.setColor(v); } }); const formEl = htl.html`

${labelEl}

${buttonEl}${outputEl}

`; const styleEl = htl.html``; rootEl.appendChild(formEl); rootEl.appendChild(mixerEl); rootEl.appendChild(styleEl); return rootEl; }