2a:null 2b:["$","title",null,{"children":"Color swatch input | Máté Homolya | Observable"}] 30:Tf06,SwatchInput = async ( colors, { value, label, multiple = false, output = "check" } = {} ) => { let indexes = []; const colorInput = html`

${colors.map((color, idx) => { const c = color.toString(); let style = `position: relative; appearance: none; border: none; outline: none; display: inline-block; width: 40px; height: 40px; background-color: ${c}; border: 1px solid rgba(0,0,0,.12); border-radius: 4px; margin-right: 2px;`; const button = html``; button.addEventListener("click", (e) => { e.preventDefault(); set(node, idx); }); return button; })}

`; const id1 = DOM.uid().id; let formStyle = "display: flex; align-items: center;"; let node = html` `; // Update the display whenever the value changes Object.defineProperty(node, "value", { get() { return value; }, set(v) { const index = +v; const c = colors[index]; if (multiple) { if (value === undefined) { value = []; } if (v !== undefined) { if (indexes.includes(v)) { indexes = indexes.filter((vv) => vv !== v); } else { indexes.push(v); } } value = indexes.map((idx) => colors[idx]); } else { value = c; indexes = [v]; } restyle(); } }); // Set the initial value if (multiple) { if (value === undefined) { value = []; indexes = []; } else { indexes = value.map((v) => colors.findIndex((c) => c.equals(v))); } set(node); } else { let initIndex = value ? colors.findIndex((c) => c.equals(value)) : 0; set(node, initIndex); } function restyle(newIndex) { const btns = node.querySelectorAll("button"); btns.forEach((btn, idx) => { let checked = indexes.includes(idx); let ch = btn.getElementsByTagName("div")[0]; if (checked) { btn.style.boxShadow = "0 0 0 2px rgba(0,0,0,1)"; btn.style.zIndex = "10"; ch.style.display = "block"; } else { btn.style.boxShadow = ""; btn.style.zIndex = ""; ch.style.display = "none"; } }); // select the output const output = node.querySelector("output"); if (output) { output.innerText = value.toString(); } } restyle(); return node; }31:[] 2e:{"id":"09dbaa73499a00c1","slug":"swatch-input","title":"Color swatch input","thumbnail":"b668aa049bd58ca26b08b18230d9b6a78c1702e7199295b30dad68a502e748fe","access_level":"public","create_time":"$D2022-06-02T00:13:57.376Z","update_time":"$D2023-02-02T22:42:02.749Z","view_time":null,"first_public_time":"$D2022-06-02T01:00:40.493Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":113,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"0195db60a63091d1","slug":"utilities","title":"Utilities","owner":{"id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya"}},"type":"notebook","body":{"titling":"auto","title":"Color swatch input","cells":[{"id":0,"value":"# Color swatch input\n\nThis input allows for the selection of a a specific color or a subset of colors from a list of input colors. Can accept a list of `ColorRGB` classes from https://observablehq.com/@mateh/palette, as well as color strings.\n\n## How to import\nUsing this piece of code to import this utility into other notebooks on Observable.\n\n```js\nimport { SwatchInput } from \"@mateh/swatch-input\";\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"colors = [\"#007aff\", \"#fafafa\", \"#428484\", \"rgba(0,0,0,0.54)\", colorPicker]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"selectedColor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof selectedColor = SwatchInput(colors, {\n // value: initial color\n label: \"Select color\",\n // output will be array instead\n multiple: false,\n output: \"contrast\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof colorPicker = Inputs.color({ value: \"#824282\", label: \"Last color\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"## Swatch input code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// helper function\nfunction set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true })); // Native events bubble, so we should too\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { icon } from \"@mateh/icon\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import { ColorRGB, isWhiteText, contrast } from \"@mateh/palette\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"