2d:null 2e:["$","title",null,{"children":"Persistent Select Input | David B. | Observable"}] 33:T68f,function persistentSelectImpl(config = {},newKey) { let { value: formValue, title, description, submit, multiple, size, key, options } = Array.isArray(config) ? {options: config} : config; if(!key && !newKey) { throw `Please provide unique key for select persistentSelect({key:"uniqKey",options:[1,2]}) or persistentSelect([1,2],"uniqKey")` }else{ if(newKey){ key = newKey; } } const localValue = localStorage.getItem(key); if(localValue){ formValue = JSON.parse(localValue); } let stringified = false; options = options.map( o => { if(typeof o === "object"){ return o; } stringified = true; return { value: JSON.stringify(o), label: o } } ); // return key const form = input({ type: "select", title, stringified, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); localStorage.setItem(key,JSON.stringify(selected)) return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }34:Ta02,function input(config) { let { stringified, 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(); let value = getValue ? getValue(form.input) : form.input.value; if(stringified){ if(Array.isArray(value)){ value.forEach(function(d,i,arr){ arr[i] = JSON.parse(d); }) }else{ value = JSON.parse(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; }35:[] 31:{"id":"9e07e3a326fcca4c","slug":"persistent-select-input","title":"Persistent Select Input","thumbnail":"427f17b222abc1ac5948ddaabb2156b1bbb094d82cd70900b57483237eccbf1c","access_level":"public","create_time":"$D2020-03-25T07:57:41.885Z","update_time":"$D2021-08-17T15:52:37.607Z","view_time":null,"first_public_time":"$D2020-03-25T13:39:11.677Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":"starter_2024","bio":"Data viz engineer | twitter.com/dbumbeishvili"},"version":251,"publish_version":251,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null,"bio":"Data viz engineer | twitter.com/dbumbeishvili"}],"members":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null,"role":"editor"}],"comments":[{"id":"092bec0366a2b70b","reply_to_id":null,"content":"For what it's worth, these are erroring for readers but can have a straightforward fix with `import { localStorage } from \"@mbostock/safe-local-storage\"`","create_time":"$D2021-08-17T15:48:58.637Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a43e64cfd8083fa1","login":"spensaur","name":"Spencer","avatar_url":"https://avatars-next.observableusercontent.com/c3e71f997a9979069c2283d021568ef874ec5d04e8caff8abe675bb6b9892eca","tier":null}},{"id":"3a7496883233b544","reply_to_id":"092bec0366a2b70b","content":"If you are referring above error, it happens on purpose. User needs to pass a key for localStorage","create_time":"$D2021-08-17T15:54:21.278Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6c53c93042f92048","slug":"observable-utils","title":"Observable Utils","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"type":"notebook","body":{"titling":"auto","title":"Persistent Select Input","cells":[{"id":0,"value":"md`# Persistent Select Input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`This notebook is an extension over [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs) select component`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`In short, every time value is changed, it is saved in localStorage and after refresh, old value will be set as a default option\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`### Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import {persistentSelect} from \"@bumbeishvili/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`NOTE FOR SELF - fix default value setting when only string options are used`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`You need to provide key for it, otherwise error will be thrown `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof d1Error = persistentSelect([\"Spring\", \"Summer\", \"Fall\", \"Winter\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof d2 = persistentSelect([\"Spring\", \"Summer\", \"Fall\", \"Winter\"],'key1')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"d2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"viewof dd2 = persistentSelect({\n key:'3',\n description: \"As a child, which vegetables did you refuse to eat?\",\n options: [\"Spinach\", \"Broccoli\", \"Brussels Sprouts\", \"Cauliflower\", \"Kale\", \"Turnips\", \"Green Beans\", \"Asparagus\"],\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"dd2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"viewof dd3 = {\n const dd3 = persistentSelect({\n title: \"How are you feeling today?\",\n key:13445,\n options: [\n { label: \"🤷\", value: \"shrug\" },\n { label: \"😂\", value: \"tears-of-joy\" },\n { label: \"😍\", value: \"loving-it\" },\n { label: \"🤔\", value: \"hmmm\" },\n { label: \"😱\", value: \"yikes\" },\n { label: \"😈\", value: \"mischievous\" },\n { label: \"💩\", value: \"poo\" }\n ],\n value: \"hmmm\"\n });\n dd3.input.style.fontSize = \"30px\";\n dd3.input.style.marginTop = \"8px\";\n return dd3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"dd3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`After refreshing notebook, chosen values will be preserved anyway`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 32:"$31:body"