2e:null 2f:["$","title",null,{"children":"Transparent Color Widget | Fabian Iwand | Observable"}] 34:T563,function colorOpacity({value: v = '#000000ff', label, min = 0, max = 255, step = 1, width, disabled, validate, datalist} = {}) { const _form = Inputs.color({label, width, disabled, datalist}); const form = _form.cloneNode(); form.append(..._form.children); const iColor = form.querySelector('input[type="color"]'); const iRange = htl.html``; const iText = htl.html``; form.querySelector('output').replaceWith(iRange); iColor.style.flexShrink = 1.5; const applyOpacity = () => iColor.style.opacity = iRange.valueAsNumber / 255; iRange.addEventListener('input', applyOpacity); let value = '#00000ff'; const apply = () => { const v = iColor.value + iRange.valueAsNumber.toString(16).padStart(2, '0'); if(validate) { iText.value = v; if(!validate(iText)) return false; } return value = v, true; }; form.addEventListener('input', e => { apply() || e.stopImmediatePropagation() }); Object.defineProperty(form, 'value', { get: () => value, set: v => { const {color, opacity} = parseColor(v); iColor.value = color; iRange.value = opacity; apply(), applyOpacity(); } }); Object.defineProperties(form, { valueAsNumber: { get: () => toInt(value) }, }); form.value = v; return form; }35:[] 32:{"id":"c7233159b922e6f4","slug":"color-opacity","title":"Transparent Color Widget","thumbnail":"34b2a758673920dd64c5d56553dbb451cdfa923a649f581552d09c20ffb4bfcc","access_level":"public","create_time":"$D2022-02-01T23:38:52.840Z","update_time":"$D2022-02-06T11:49:40.289Z","view_time":null,"first_public_time":"$D2022-02-02T01:02:21.746Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":392,"publish_version":392,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Transparent Color Widget","cells":[{"id":0,"value":"# Transparent Color Widget\n\nA color widget that supports opacity, built on top of Observable Inputs.\n\n~~~js\nimport {colorOpacity} from '@mootari/color-opacity'\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"---\n## Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"viewof colors = Inputs.form([\n colorOpacity({value: '#ff95008c', label: 'Start color'}),\n colorOpacity({value: '#6bffff24', label: 'Mid color'}),\n colorOpacity({value: '#00ccff', label: 'End color'}),\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"colors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"