29:null 2a:["$","title",null,{"children":"Multi Button Select | B | Observable"}] 2f:[] 2d:{"id":"0df78b70d6175a23","slug":"multi-button-select","title":"Multi Button Select","thumbnail":"d5bfaa2f84215164fe399c9a67e7f02962a8d0f4a414f215f81c22d04f6d0d38","access_level":"public","create_time":"$D2020-12-26T04:21:02.349Z","update_time":"$D2021-01-21T05:09:38.961Z","view_time":null,"first_public_time":"$D2020-12-26T04:34:53.775Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"7a7f7153be8c10cd","login":"biomotivate","name":"B","avatar_url":"https://avatars-next.observableusercontent.com/7c575031634f0245ee7b2a94e296d59a9f428689841ebe0d0f139a6338dd53b4","tier":"starter_2024"},"version":62,"publish_version":62,"role":null,"authored":false,"authors":[{"type":"individual","id":"27c834b9af825fc5","login":"biomotivate","name":"B","avatar_url":"https://avatars-next.observableusercontent.com/7c575031634f0245ee7b2a94e296d59a9f428689841ebe0d0f139a6338dd53b4","tier":null}],"members":[{"type":"individual","id":"27c834b9af825fc5","login":"biomotivate","name":"B","avatar_url":"https://avatars-next.observableusercontent.com/7c575031634f0245ee7b2a94e296d59a9f428689841ebe0d0f139a6338dd53b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Multi Button Select","cells":[{"id":8,"value":"md`# Multi Button Select`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`*By Leon Cheng (http://leoncheng.dev/)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"html`

\nResult: ${Result} \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// Example\nviewof Result = multiButtonSelect({\n title: \"Week span Selector\",\n description: \"Chose the number of weeks\",\n defaultValue: 1,\n options:[\n {label: \"1 Week\", value: 1*7},\n {label: \"2 Weeks\", value: 2*7},\n {label: \"3 Weeks\", value: 3*7},\n {label: \"4 Weeks\", value: 4*7},\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"multiButtonSelect = (params) => {\n \n const title = params.title;\n const description = params.description;\n const options = params.options;\n \n let value = params.defaultValue;\n \n const buttonObjects = options.map((opt) => {\n const button = html``;\n button.onclick = () => value = opt.value;\n return button;\n });\n \n const view = html`\n \n`;\n \n Object.defineProperty(view, \"value\", {get() { return value; }});\n \n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"