31:Tb87,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; }32:[] 2f:{"title":"RGB Color Mixer","cells":[{"id":0,"value":"# RGB Color Mixer","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"color2","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"viewof color2 = createRgbColorMixer({\n value: \"hotpink\",\n onUpdateValue(value) {\n mutable color = value;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"color3","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"viewof button = Inputs.button(\"Set to tomato\", {\n reduce: () => {\n viewof color3.value = \"tomato\";\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof color3 = RgbColorInput({\n value: \"hotpink\",\n label: \"Background Color\",\n expanded: true,\n onUpdateValue(value) {\n mutable color = value;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"viewof settings = Inputs.form({\n count: Inputs.bind(\n RgbColorInput({ value: \"chocolate\", label: \"Color\" }),\n viewof color3\n )\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"function createRgbColorMixer({\n value = \"hotpink\",\n channels = \"rgbhsl\",\n format = \"rgb\",\n noBlender = false,\n noValue = false,\n onUpdateValue = () => {}\n} = {}) {\n RGBColorMixer;\n\n const mixerEl = html`\n \n `;\n\n mixerEl.addEventListener(\"update:value\", (event) => {\n const { value } = event.detail;\n\n onUpdateValue(value);\n\n const inputEvent = new Event(\"input\", { bubbles: true });\n mixerEl.setColor(value);\n mixerEl.dispatchEvent(inputEvent);\n });\n\n return mixerEl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"mutable color = 'black'","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"lit = import(\"https://esm.sh/lit\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"spectral = import(\"https://esm.sh/spectral.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"RGBColorMixer = import(\"https://esm.sh/rgb-color-mixer@0.8.1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}