31:T522,function checkbox(config = {}) { let { value: formValue, title, description, submit, options } = Array.isArray( config ) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }32:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }33:T4e2,function radio(config = {}) { let { value: formValue, title, description, submit, options, disabled } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const form = input({ type: "radio", title, description, submit, getValue: input => { if (input.checked) return input.value; const checked = Array.prototype.find.call(input, radio => radio.checked); return checked ? checked.value : undefined; }, form: html` ` }); form.output.remove(); return form; }34:[] 2f:{"title":"Checkbox with color key","cells":[{"id":0,"value":"md`# Checkbox with color key\n\nModified [@unkleho/checkbox-with-color-key](https://observablehq.com/@unkleho/checkbox-with-color-key) \n\nwhich is a modification of [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs) library checkbox to include a color key`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof ch = checkbox({\n title: \"Colors\",\n description: \"Please select your favorite colors\",\n options: [\n { value: \"r\", label: \"Red\", color: \"red\" },\n { value: \"o\", label: \"Orange\", color: \"orange\" },\n { value: \"y\", label: \"Blue\", color: \"blue\" }\n ],\n value: [\"r\", \"o\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"ch","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}