32:T985,surveyEditor = ({metadata, pages = []} = {}) => { const pageBuilder = (args) => page({ ...args, onDelete: (id) => { const index = ui.value.pages.findIndex(pages => pages.id === id); ui.value.pages.splice(index, 1); ui.pages.dispatchEvent(new Event('input', {bubbles: true})); }, onDown: (id) => { const index = ui.value.pages.findIndex(pages => pages.id === id); var element = ui.value.pages[index]; ui.value.pages.splice(index, 1); ui.value.pages.splice(index + 1, 0, element); ui.pages.dispatchEvent(new Event('input', {bubbles: true})); }, onUp: (id) => { const index = ui.value.pages.findIndex(page => page.id === id); var element = ui.value.pages[index]; ui.value.pages.splice(index, 1); ui.value.pages.splice(Math.max(index - 1, 0), 0, element); ui.pages.dispatchEvent(new Event('input', {bubbles: true})); }, }) const summary = view`

${['questions', textNodeView("0 questions")]} across ${['pages', textNodeView("0 pages")]}.

` const updateSummary = () => { // console.log('updateSummary'); const pages = ui.value?.pages?.length || 0; const questions = ui.value?.pages?.reduce((count, page) => { const cells = filterCellsNotOfType(page.cells || [], 'section'); return count + cells.length }, 0); summary.value.pages = pages === 1 ? "1 page" : `${pages} pages`; summary.value.questions = questions === 1 ? "1 question" : `${questions} questions`; } const ui = view`

${['metadata', surveyMetadata(metadata)]}

${['pages', pages.map(pageBuilder), pageBuilder]}

${Inputs.button('Add Page', { reduce: () => { ui.value.pages.push({ title: "page " + randomId() }); ui.pages.dispatchEvent(new Event('input', {bubbles: true})); } })}

${summaryCard(summary, html`

${Inputs.button('Preview')} ${Inputs.button('Save')}`)}

` ui.addEventListener('input', updateSummary); // When values assigned to `viewof surveyEditor().value`, without dispatching `input` event // call `viewof surveyEditor().applyValueUpdates()` to update UIs like summary. ui.applyValueUpdates = () => { updateSummary(); }; updateSummary(); return ui; }33:Ta6a,page = ({ id = randomId(), title, cells = [], onDelete = (id) => {}, onUp = (id) => {}, onDown = (id) => {}, } = {}) => { const cellBuilder = (args) => cell({ ...args, onDelete: (id) => { const index = ui.value.cells.findIndex(cell => cell.id === id); ui.value.cells.splice(index, 1); ui.cells.dispatchEvent(new Event('input', {bubbles: true})); }, onDown: (id) => { const index = ui.value.cells.findIndex(cell => cell.id === id); const element = ui.value.cells[index]; ui.value.cells.splice(index, 1); ui.value.cells.splice(index + 1, 0, element); ui.cells.dispatchEvent(new Event('input', {bubbles: true})); }, onUp: (id) => { const index = ui.value.cells.findIndex(cell => cell.id === id); const element = ui.value.cells[index]; ui.value.cells.splice(index, 1); ui.value.cells.splice(Math.max(index - 1, 0), 0, element); ui.cells.dispatchEvent(new Event('input', {bubbles: true})); } }); const ui = view`

${['_id', Inputs.input(id)]}

${['title', Inputs.text({label: "Page title", value: title})]}

${Inputs.button(buttonLabel({ariaLabel: "Delete", iconLeft: "trash-2", iconLeftClass: "icon--danger"}), {reduce: () => onDelete(id)})}

${Inputs.button(buttonLabel({ariaLabel: "Move up", iconLeft: "arrow-up"}), {reduce: () => onUp(id)})} ${Inputs.button(buttonLabel({ariaLabel: "Move down", iconLeft: "arrow-down"}), {reduce: () => onDown(id)})}

${['cells', cells.map(cellData => cellBuilder(cellData)), cellBuilder]}

${Inputs.button('Add Question', { reduce: () => { ui.value.cells.push({inner: {type: "textarea"}}) ui.cells.dispatchEvent(new Event('input', {bubbles: true})); } })} ${Inputs.button('Add Text', { reduce: () => { ui.value.cells.push({inner: {type: "md"}}); ui.cells.dispatchEvent(new Event('input', {bubbles: true})); } })}

${Inputs.button('Add Section', { reduce: () => { ui.value.cells.push({inner: {type: "section"}}); ui.cells.dispatchEvent(new Event('input', {bubbles: true})); } })}

` return ui; }34:T658,cell = ({ id = randomId(), inner = { type: "radio", result: { } }, connections, onDelete = (id) => {}, onDown = (id) => {}, onUp = (id) => {} } = {}) => { const typeSelector = Inputs.select(types, {value: inner?.type, label: "Question Type"}); const innerTypeUI = typeUI(inner); Inputs.bind(innerTypeUI.type, typeSelector); const ui = view`

${typeSelector}

${Inputs.button(buttonLabel({ariaLabel: "Delete", iconLeft: "trash-2", iconLeftClass: "icon--danger"}), {reduce: () => onDelete(id)})}

${['id', Inputs.text({value: id, "label": "Question ID"})]}

${['inner', innerTypeUI]}

Connections

${['connections', connectionsUI(connections)]}

` typeSelector.addEventListener('input', () => { ui.dataset.cellType = typeSelector.value; }); return ui; }35:T603,radioUI = ({title, options = [], connections = [], description,includeAllOption} = {}) => { const newOptionInput = optionsRowBuilder({ placeholder: "Add new row", id: randomId(), onEnter: () => { ui.value = { ...ui.value, options: [...ui.value.options, newOptionInput.value] } newOptionInput.value.label = ""; newOptionInput.value.id = randomId(); ui.dispatchEvent(new Event('input', {bubbles: true})) } }); const radioOptionBuilderWithDelete = (args) => optionsRowBuilder({...args, onDelete: (id) => { ui.value = { ...ui.value, options: ui.value.options.filter(option => option.id !== id) } ui.dispatchEvent(new Event('input', {bubbles: true})); }}) const ui = view`

${['title', Inputs.text({label: "Question", value: title})]}

Radio Options ${['options', options.map(radioOptionBuilderWithDelete), radioOptionBuilderWithDelete]} ${newOptionInput}

Label	Score	ID

Options

${['includeAllOption', includeOptionalAttributesUI(includeAllOption)]} ${['description', descriptionUI(description)]}

` return ui; }36:T6bc,checkboxUI = ({title, options = [], includeAllOption, includeNoneOption, description} = {}) => { const newOptionInput = optionsRowBuilder({ placeholder: "Add new row", id: randomId(), onEnter: () => { ui.value = { ...ui.value, options: [...ui.value.options, newOptionInput.value] } newOptionInput.value.label = ""; newOptionInput.value.id = randomId(); ui.dispatchEvent(new Event('input', {bubbles: true})) } }); const radioOptionBuilderWithDelete = (args) => optionsRowBuilder({...args, onDelete: (id) => { ui.value = { ...ui.value, options: ui.value.options.filter(option => option.id !== id) } ui.dispatchEvent(new Event('input', {bubbles: true})); }}) const selectNoneUI = includeOptionalAttributesUI(includeNoneOption, "Add option to select none", "None of the above"); const ui = view`

${['title', Inputs.text({label: "Question", value: title})]}

Checkbox Options ${['options', options.map(radioOptionBuilderWithDelete), radioOptionBuilderWithDelete]} ${newOptionInput}

Label	Score	ID

Options

${['includeAllOption', includeOptionalAttributesUI(includeAllOption)]} ${['includeNoneOption', selectNoneUI]} ${['description', descriptionUI(description)]}

` return ui; }37:T944,tableUI = ({title, rows = [], columns = [], caption, user_rows, table_total, table_total_label} = {}) => { const newRowInputBuilder = (valueKey, hideTotal) => { const newRowInput = tableHeaderRowBuilder({ placeholder: "Add new row", key: randomId(), hideTotal, onEnter: () => { ui.value = { ...ui.value, [valueKey]: [...ui.value[valueKey], newRowInput.value] } newRowInput.value.label = ""; newRowInput.value.key = randomId(); ui.dispatchEvent(new Event('input', {bubbles: true})) } }) return newRowInput; }; const tableHeaderRowBuilderWithDelete = (valueKey, hideTotal) => (args) => tableHeaderRowBuilder({...args, hideTotal, onDelete: (key) => { console.log("ui.value", ui.value); ui.value = { ...ui.value, [valueKey]: ui.value[valueKey].filter(option => option.key !== key) } ui.dispatchEvent(new Event('input', {bubbles: true})); }}) const ui = view`

${['title', Inputs.text({label: "Question", value: title})]}

Columns ${['columns', columns.map(tableHeaderRowBuilderWithDelete("columns")), tableHeaderRowBuilderWithDelete("columns")]} ${newRowInputBuilder("columns")}

Label	Key	Total

Rows ${['rows', rows.map(tableHeaderRowBuilderWithDelete("rows", true)), tableHeaderRowBuilderWithDelete("rows", true)]} ${newRowInputBuilder("rows", true)}

Label	Key

Options

${['user_rows', Inputs.toggle({label: "Allow to edit row labels", value: user_rows})]} ${['table_total', Inputs.text({label: "Label for total", value: table_total})]} ${['table_total_label', Inputs.text({label: "Unit for total", value: table_total_label})]} ${['caption', descriptionUI(caption)]}

` return ui; }38:T52d,includeOptionalAttributesUI = (option = {}, toggleLabel = "Add option to select all", defaultOptionLabel = "All of the above", showId = false) => { const {score, label, id} = option; const showUI = Boolean(score || label); const toggleUI = Inputs.toggle({label: toggleLabel, value: showUI}); let optionRow = { label: view`${['...', Inputs.text({value: label})]}`, score: view`${['...', Inputs.text({value: score})]}` } if (showId) { optionRow.id = view`${['...', Inputs.text({value: id})]}` } const table = view` ${showId ? html`` : ""} ${['...', optionRow]} `; const handler = (val) => { if (val) { table.classList.remove('dn') table.value.label = table.value.label || label || defaultOptionLabel; table.value.score = table.value.score || score; table.value.id = table.value.id || id; } else { table.classList.add('dn'); table.value.label = undefined; table.value.score = undefined; table.value.id = undefined; } } bindOneWay(Inputs.input(undefined), toggleUI, { transform: handler }) handler(showUI); return view`

${toggleUI} ${['...', table]}

`; }39:T478,connectionsUI = ({connections = []} = {}) => { const newRoleInput = connectionRowBuilder({ placeholder: "Add new connection", id: randomId(), role: "scored", onEnter: () => { ui.value = { ...ui.value, connections: [...ui.value.connections, newRoleInput.value] } newRoleInput.value.group = ""; newRoleInput.value.role = "scored"; ui.dispatchEvent(new Event('input', {bubbles: true})) } }); const connectionRowBuilderWithDelete = (args) => connectionRowBuilder({...args, onDelete: (group) => { console.log("deleting", group, ui.value.connections.filter(option => option.group !== group)) ui.value = { ...ui.value, connections: ui.value.connections.filter(option => option.group !== group) } ui.dispatchEvent(new Event('input', {bubbles: true})) }}) const ui = view`

Label	Score	ID

${['connections', connections.map(connectionRowBuilderWithDelete), connectionRowBuilderWithDelete]} ${newRoleInput}

Group	Role

` return ui; }3a:T428,styles = html`${commonComponentStyles} `3b:[{"id":"daecc7ca2df49d6b07a0bf0e76a3219f1ac49bf96ef8e2ee30b9ab8a0e96063c5cdc3d112cf695ebaf67c965cb4613d1c778b0687cf4c88f7bf51d5544ba4d74","href":"https://static.observableusercontent.com/files/daecc7ca2df49d6b07a0bf0e76a3219f1ac49bf96ef8e2ee30b9ab8a0e96063c5cdc3d112cf695ebaf67c965cb4613d1c778b0687cf4c88f7bf51d5544ba4d74","name":"image.png","type":"image/png","lastModified":1635768755250.533,"size":389013},{"id":"d20656625d026c6404f32e93036268b82dc0819bbef1e1d73d3b034bc5a0388dc928519e7a3608ce653258c883196de9b66aa85473e5067c7882f4df258f6ef8","href":"https://static.observableusercontent.com/files/d20656625d026c6404f32e93036268b82dc0819bbef1e1d73d3b034bc5a0388dc928519e7a3608ce653258c883196de9b66aa85473e5067c7882f4df258f6ef8","name":"checkboxes.png","type":"image/png","lastModified":1637125793454.446,"size":159328},{"id":"c37e7eb2eaf6f6fe636167743486f1ac7a4adf54c87d6791558414b0ff23cee5d042c478fa1b75663f5c63be98fd900f5fef284f429e52c8c6102e2627efd3b0","href":"https://static.observableusercontent.com/files/c37e7eb2eaf6f6fe636167743486f1ac7a4adf54c87d6791558414b0ff23cee5d042c478fa1b75663f5c63be98fd900f5fef284f429e52c8c6102e2627efd3b0","name":"image@4.png","type":"image/png","lastModified":1636016482180.541,"size":256747},{"id":"7856fb27bb7aabae103c36bcf78a4d805fdfd48fa4427dec294beed027c5da413bb633dbac19b44a036f183f79cee69c81b5224498a5e93c4cd39321eb4cb3ae","href":"https://static.observableusercontent.com/files/7856fb27bb7aabae103c36bcf78a4d805fdfd48fa4427dec294beed027c5da413bb633dbac19b44a036f183f79cee69c81b5224498a5e93c4cd39321eb4cb3ae","name":"image@3.png","type":"image/png","lastModified":1635859840726.462,"size":52182},{"id":"9e19947f8c15b9a22ffb8452bd86283923fc725d28a5e7fcd5220656442ee653933d1e1a34c749b3e9a6fceb57c9ff0e94ae74d7625c954af814a9069d9e78ed","href":"https://static.observableusercontent.com/files/9e19947f8c15b9a22ffb8452bd86283923fc725d28a5e7fcd5220656442ee653933d1e1a34c749b3e9a6fceb57c9ff0e94ae74d7625c954af814a9069d9e78ed","name":"image@2.png","type":"image/png","lastModified":1635859626336.63,"size":131756},{"id":"069367d9b8f0af82667907fc4ef604f82ba2ed7fea3865af5fa727d4671cd86a4e32cd3064cf6b93deb305fcd45d9f5e37b11b2ce4d272fe0316de09ebed6be8","href":"https://static.observableusercontent.com/files/069367d9b8f0af82667907fc4ef604f82ba2ed7fea3865af5fa727d4671cd86a4e32cd3064cf6b93deb305fcd45d9f5e37b11b2ce4d272fe0316de09ebed6be8","name":"surveyUiInput.json","type":"application/json","lastModified":1639408919351.47,"size":7967}] 2f:{"title":"Survey Slate | Designer UI","cells":[{"id":0,"value":"# Survey Slate | Designer UI \n\n_A simple user interface for Survey Slate's [Designer Tools](https://observablehq.com/@categorise/surveyslate-designer-tools). Also check out the [User Guide for Survey Slate Designer](https://observablehq.com/@categorise/surveyslate-user-guide-for-grouping-questions)._","pinned":false,"hidden":false,"mode":"md"},{"id":2663,"value":"md`\n

👋 Welcome! This notebook is about **Survey Slate**—an [assemblage of Observable web-based notebooks](https://observablehq.com/collection/@categorise/survey-slate) allowing organizations to host custom surveys for end users on their own AWS infrastructure. Check out the [Technical Overview](https://observablehq.com/@categorise/surveyslate-docs) to get started! ✨

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"toc({\n headers: \"h2,h3,h4,h5\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"## Wireframe","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"## Config","pinned":false,"hidden":false,"mode":"md"},{"id":255,"value":"types = new Map([\n [\"Markdown\", \"md\"],\n [\"Text\", \"textarea\"],\n [\"Checkbox\", \"checkbox\"],\n [\"Radio\", \"radio\"],\n [\"Number\", \"number\"],\n [\"Number Matrix\", \"table\"],\n [\"File\", \"file_attachment\"],\n [\"Summary\", \"summary\"],\n [\"Aggregate\", \"aggregate\"],\n [\"Section\", \"section\"],\n [\"Custom\", \"fallback\"],\n]);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"roles = [\"yes\", \"yesno\", \"yesnomaybe\", \"ifyes\", \"ifno\", \"calculation\", \"scored\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"## UI Builders","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"### surveyEditor","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"viewof exampleSurveyEditor = view`

\n ${[\"...\", surveyEditor(await FileAttachment(\"surveyUiInput.json\").json())]}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":2603,"value":"viewof anotherSurveyEditorData = {\n return Inputs.input(({\n metadata: {\n title: \"Another Demo Survey\"\n },\n pages: [{\n title: \"page1\",\n cells: [{\n id: \"a-md-question-type\",\n inner: {\n type: \"md\",\n result: {\n content: \"_Hello world_\" \n }\n },\n }]\n },{\n title: \"page2\"\n }]\n}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"Inputs.button(\"Overwrite suvery editor data\", {\n reduce: () => {\n viewof exampleSurveyEditor.value = viewof anotherSurveyEditorData.value;\n viewof exampleSurveyEditor.applyValueUpdates();\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2599,"value":"filterCellsNotOfType = (cells, type) => cells.filter(c => c?.inner?.type != type)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"### surveyMetadata","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"surveyMetadata = ({title} = {}) => view`

Survey Metadata

\n ${['title', Inputs.text({value: title, label: \"Survey title\"})]}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"viewof exampleSurveyMetadata = surveyMetadata()","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"exampleSurveyMetadata","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"### page","pinned":false,"hidden":false,"mode":"md"},{"id":160,"value":"viewof examplePage = page({\n title: \"intro\",\n cells: [{\n id: \"md\",\n inner: {\n type: \"md\",\n result: {\n content: \"example content\"\n }\n }\n }, {\n id: \"radio\",\n inner: {\n type: \"radio\",\n result: {\n options: [{\n value: \"0\",\n label: \"Option 0\",\n score: \"1\"\n },{\n value: \"1\",\n label: \"Option 1\",\n score: \"2\"\n },{\n value: \"2\",\n label: \"Option 2\",\n score: \"3\"\n }]\n \n }\n }\n },{\n id: \"fallback\",\n inner: {\n type: \"fallback\",\n result: {\n title:\t\"the title\",\n placeholder:\t\"the placeholder\",\n rows:\t1\n }\n }\n }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2093,"value":"examplePage","pinned":true,"hidden":false,"mode":"ojs"},{"id":2089,"value":"Inputs.button(\"test backwritability of a cell\", {\n reduce: () => {\n debugger;\n examplePage.cells[0] = ({\n id: \"md\",\n inner: {\n type: \"md\",\n result: {\n content: Math.random()\n }\n }\n })\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"### cell","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"viewof exampleCell = cell({\n id: \"cell1\",\n inner: {\n type: \"md\",\n result: {\n content: \"hi!\"\n }\n },\n connections: { // Ugly double nesting (simplest implementation)\n connections: [{\n set: \"g1\",\n role: \"ifyes\"\n }] \n }\n}) \n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2113,"value":"exampleCell","pinned":true,"hidden":false,"mode":"ojs"},{"id":2077,"value":"Inputs.button(\"test backwritability\", {\n reduce: () => {\n viewof exampleCell.value = ({\n id: \"cellTest\",\n inner: {\n type: \"md\",\n result: {\n content: Math.random()\n }\n },\n connections: { // Ugly double nesting (simplest implementation)\n connections: [{\n set: \"test2\",\n role: \"scored\"\n }] \n }\n })\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"### typeUi","pinned":false,"hidden":false,"mode":"md"},{"id":257,"value":"viewof exampleType = Inputs.select(types, {value: \"fallback\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof exampleTypeUI = {\n const view = typeUI({\n result: {\n content: \"foo\"\n }\n })\n Inputs.bind(view.type, viewof exampleType); // type is backwriteable\n return view;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2150,"value":"typeUI({\n type: \"md\",\n result: {\n content: \"foo\"\n }\n })\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1297,"value":"exampleTypeUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"viewof exampleTypeUIRadio = typeUI({\n type: \"radio\",\n result: {\n options: [{\n id: \"my id\",\n label: \"a label\",\n score: 10000,\n }]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":697,"value":"exampleTypeUIRadio","pinned":true,"hidden":false,"mode":"ojs"},{"id":1960,"value":"typeUIFactories = ({\n \"radio\": radioUI,\n \"checkbox\": checkboxUI,\n \"table\": tableUI,\n \"md\": mdUI,\n \"text\": textUI,\n \"number\": numberUI,\n \"textarea\": textareaUI,\n \"file_attachment\": fileAttachmentUI,\n \"summary\": summaryUI,\n \"section\": sectionUI,\n \"aggregate\": aggregateSummaryUI\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"typeUI = juice((arg0) => {\n const factory = typeUIFactories[arg0?.type];\n if (factory) {\n return factory(arg0?.result)\n }\n return fallbackUI(arg0?.result)\n}, {\n \"type\": \"[0].type\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1152,"value":"#### Fallback UI\n\nIf we encounter a cell type we don't know, we will use a generic UI to allow the user to get/set questions \nattributes arbitrarily.\n\nIt is slightly awkward because we only have lists available in UI representation, so we need to pivot that into a `{type, results}` format. This is the step between *fallbackUIEntries* and *fallbackUI*","pinned":false,"hidden":false,"mode":"md"},{"id":1354,"value":"typeof \"\" === 'string'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1251,"value":"fallbackUI = (args = {}) => { // Main purpose is to convert into format. Main UI is in fallbackUIEntries\n const entriesUI = fallbackUIEntries({\n entries: Object.entries(args).map(([k, v]) => {\n if (!v) {\n return {key: k, value_: undefined};\n } if (v.outerHTML) {\n return {key: k + \"_md\", value_: v.outerHTML};\n } else if (typeof v === 'object') {\n return {key: k + \"_js\", value_: JSON.stringify(v)};\n } else {\n return {key: k, value_: v};\n }\n })\n });\n const result = bindOneWay(Inputs.input(undefined), entriesUI, {\n transform: (entriesUi) => Object.fromEntries(entriesUi.entries.map(e => {\n return [e.key, e.value_]\n }))\n })\n const ui = view`

\n \n

`\n\n return ui;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1323,"value":"md``.outerHTML","pinned":true,"hidden":false,"mode":"ojs"},{"id":1254,"value":"viewof exampleFallbackUI = fallbackUI({\n key1: \"v2\",\n key2: md`we need to convert to string`,\n key3: {object: true}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1258,"value":"exampleFallbackUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1160,"value":"fallbackUIEntries = ({entries = []}) => {\n const newAttributeInput = kvRowBuilder({\n placeholder: \"Add attribute\",\n onEnter: () => {\n ui.entries.value.push(newAttributeInput.value)\n newAttributeInput.value = {key: \"\", value_: \"\"};\n ui.dispatchEvent(new Event('input', {bubbles: true}))\n }\n });\n const kvRowBuilderWithDelete = (args) => kvRowBuilder({...args, onDelete: (id) => {\n const index = ui.entries.value.find(option => option.id === id)\n ui.entries.value.splice(index, 1); // delete in-place\n ui.dispatchEvent(new Event('input', {bubbles: true}));\n }})\n const ui = view`\n \n \n \n \n ${['entries', entries.map(kvRowBuilderWithDelete), kvRowBuilderWithDelete]}\n \n ${newAttributeInput}\n \n

Attribute	Value

`\n return ui;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1191,"value":"viewof exampleFallbackUIEntries = fallbackUIEntries({\n entries: [{key: \"type\", value_: \"random\"}]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1206,"value":"exampleFallbackUIEntries","pinned":true,"hidden":false,"mode":"ojs"},{"id":1165,"value":"kvRowBuilder = ({\n placeholder,\n key, value_,\n onEnter, onDelete\n}) => {\n const keyInput = Inputs.text({placeholder, value: key});\n const valueInput = Inputs.text({value: value_});\n \n if (onEnter) {\n keyInput.addEventListener('keyup', (evt) => {\n if (evt.keyCode === 13) {\n onEnter(evt);\n }\n });\n valueInput.addEventListener('keyup', (evt) => {\n if (evt.keyCode === 13) {\n onEnter(evt);\n }\n });\n }\n if (onDelete) { // If user editable rows\n keyInput.addEventListener('keyup', (evt) => {\n // BACKSPACE\n if (evt.keyCode === 8 && keyInput.value.length == 0) {\n onDelete(keyInput.value);\n }\n });\n }\n \n const ui = view`\n ${['key', keyInput]}\n ${['value_', valueInput]}\n `\n return ui;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1178,"value":"viewof exampleKvRow = kvRowBuilder ({\n key: \"k1\",\n value: \"val\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"#### Markdown Text","pinned":false,"hidden":false,"mode":"md"},{"id":1591,"value":"viewof sampleMdUI = mdUI({\n content: \"## content\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1593,"value":"sampleMdUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"mdUI = ({content, rows = 20} = {}) => {\n return view`

\n ${['content', Inputs.textarea({value: content, label: \"Content\", rows})]}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"#### Text Question (Deprecated)","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"FileAttachment(\"image@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"viewof sampleTextUI = textUI()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1589,"value":"sampleTextUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":315,"value":"textUI = ({title,description} = {}) => {\n return view`

\n ${['title', Inputs.text({value: title, label: \"Question\"})]}\n

Options

${['description', Inputs.text({label: \"Description\", value: description})]}

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"#### Radio Question\n\n![image@3.png](${await FileAttachment(\"image@3.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":327,"value":"viewof exampleRadioUI = radioUI({\n title: \"How far along is your process?\",\n options: [{\n id: \"dsds\",\n label: \"We are planning a process\",\n score: 4\n },{\n id: \"asdas\",\n label: \"Do you have process in place?\",\n score: 10\n }],\n includeAllOption: {\n score: 5,\n label: \"All of the above\"\n },\n description: \"Select the statements that best describes your case\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"exampleRadioUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"optionsRowBuilder = ({\n label,\n score,\n id,\n placeholder,\n onEnter,\n onDelete,\n} = {}) => {\n const labelInput = Inputs.text({value: label, placeholder})\n if (onEnter) {\n labelInput.addEventListener('keyup', (evt) => {\n if (evt.keyCode === 13) {\n onEnter(evt);\n }\n });\n }\n if (onDelete) { // If user editable rows\n labelInput.addEventListener('keyup', (evt) => {\n // BACKSPACE\n if (evt.keyCode === 8 && labelInput.value.length == 0) {\n onDelete(id);\n }\n });\n }\n return view`\n ${['label', labelInput]}\n ${['score', Inputs.text({value: score})]}\n ${['id', Inputs.text({value: id})]}\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1514,"value":"#### Checkbox Question","pinned":false,"hidden":false,"mode":"md"},{"id":1527,"value":"FileAttachment(\"checkboxes.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1523,"value":"viewof exampleCheckboxUI = checkboxUI({\n title: \"Your business focus\",\n options: [{\n id: \"eg\",\n label: \"Electricity Generation\",\n score: 10\n },{\n id: \"et\",\n label: \"Electricity Transmission\",\n score: 8\n },{\n id: \"ed\",\n label: \"Electricity Distribution\",\n score: 7\n },{\n id: \"other\",\n label: \"Other\",\n score: 3\n }],\n includeAllOption: {\n score: 5,\n label: \"All of the above\"\n },\n description: \"Select a statement that best describes your case\",\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1537,"value":"exampleCheckboxUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1531,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2649,"value":"typeUI({\n type: \"checkbox\",\n result: {\n title: \"Your business focus\",\n options: [{\n id: \"a\",\n label: \"a_label\",\n score: 10\n },{\n id: \"b\",\n label: \"b_label\",\n score: 8\n }],\n includeAllOption: {\n score: 5,\n label: \"all\"\n },\n }\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1395,"value":"#### Number Question","pinned":false,"hidden":false,"mode":"md"},{"id":1406,"value":"viewof exampleNumberUI = numberUI({\n title: \"How old is your company?\",\n description: \"In years\",\n min: 1,\n // max: 21, \n step: 2\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1427,"value":"exampleNumberUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1401,"value":"numberUI = ({title, description, min = 0, max, step = 1} = {}) => {\n const attributes = [\n {\n id: \"min\",\n label: \"Minimum\",\n value: min,\n },\n {\n id: \"max\",\n label: \"Maximum\",\n value: max\n },\n {\n id: \"steps\",\n label: \"Steps\",\n value: step\n }\n ];\n\n return view`

\n ${['title', Inputs.text({label: \"Question\", value: title})]}\n

Options

\n ${['description', descriptionUI(description)]}\n

\n ${['...', {\n ...attributes.reduce((acc,{id, label, value}) => {\n return {...acc, [id]: Inputs.number([-Infinity, Infinity], {label, value}) }\n }, {})\n }]}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1479,"value":"#### Textarea Question","pinned":true,"hidden":false,"mode":"md"},{"id":1477,"value":"viewof exampleTextareaUI = textareaUI({\n title: \"Tell us about the work your company does?\",\n description: \"Include you primary and secondary revenue streams\",\n placeholder: \"Please be elaborate\",\n rows: 6\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1476,"value":"exampleTextareaUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1475,"value":"textareaUI = ({title, placeholder, description, rows = 4} = {}) => {\n const attributes = [\n {\n id: \"rows\",\n label: \"Rows\",\n value: rows,\n }\n ];\n\n return view`

\n ${['title', Inputs.text({label: \"Question\", value: title})]}\n

Options

\n ${['description', descriptionUI(description)]}\n ${['placeholder', Inputs.text({label: \"Placeholder\", value: placeholder})]}\n

\n ${['...', {\n ...attributes.reduce((acc,{id, label, value}) => {\n return {...acc, [id]: Inputs.number([-Infinity, Infinity], {label, value}) }\n }, {})\n }]}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1490,"value":"#### File Attachment Question","pinned":true,"hidden":false,"mode":"md"},{"id":1495,"value":"viewof exampleFileAttachmentUI = fileAttachmentUI({\n title: \"File attachments\",\n description: \"You can provide documents such as policies, brochure, etc.\",\n placeholder: \"No file chosen\" \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1572,"value":"exampleFileAttachmentUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1493,"value":"fileAttachmentUI = ({title, description, placeholder} = {}) => {\n return view`\n

\n ${['title', Inputs.text({label: \"Question\", value: title})]}\n

Options

\n ${['description', Inputs.text({label: \"Description\", value: description})]}\n ${['placeholder', Inputs.text({label: \"Placeholder\", value: placeholder})]}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1598,"value":"#### Table Question","pinned":false,"hidden":false,"mode":"md"},{"id":1604,"value":"viewof exampleTableUI = tableUI({\n title: \"Gender distribution across teams\",\n columns: [\n { key: \"w\", label: \"Women\", total: \"women\" },\n { key: \"m\", label: \"Men\", total: \"men\" },\n { key: \"unknown\", label: \"No Data\", total: \"no data\" },\n ],\n rows: [\n { key: \"board\", label: \"Board\" },\n { key: \"management\", label: \"Management\" },\n { key: \"tech\", label: \"Technical / Engineering Staff\" },\n { key: \"staff\", label: \"Non-Technical Staff\" },\n { key: \"admin\", label: \"Administrative / Support Staff\" },\n { key: \"customerservice\", label: \"Customer Service Staff\" },\n { key: \"other\", label: \"Other Staff\" },\n { key: \"day\", label: \"Non-Contractual/Informal Day Workers\" },\n ],\n caption: \"_Some caption_\",\n user_rows: true,\n table_total: \"Total workforce\",\n table_total_label: \"people\",\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":1690,"value":"viewof exampleTableUI2 = tableUI();","pinned":true,"hidden":false,"mode":"ojs"},{"id":1608,"value":"exampleTableUI2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":1633,"value":"tableHeaderRowBuilder = ({\n label,\n key,\n total,\n placeholder,\n onEnter,\n onDelete,\n hideTotal\n} = {}) => {\n const labelInput = Inputs.text({value: label, placeholder})\n if (onEnter) {\n labelInput.addEventListener('keyup', (evt) => {\n if (evt.keyCode === 13) {\n onEnter(evt);\n }\n });\n }\n if (onDelete) { // If user editable rows\n labelInput.addEventListener('keyup', (evt) => {\n // BACKSPACE\n if (evt.keyCode === 8 && labelInput.value.length == 0) {\n onDelete(key);\n }\n });\n }\n\n const row = {\n label: view`${['...', labelInput]}`,\n key: view`${['...', Inputs.text({value: key})]}`\n }\n\n if (!hideTotal) {\n row.total = view`${['...', Inputs.text({value: total})]}`\n }\n\n return view`\n ${['...', row]}\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1932,"value":"#### Summary","pinned":false,"hidden":false,"mode":"md"},{"id":1939,"value":"viewof sampleSummaryUI = summaryUI({\n label: \"Policy/commitment to promoting gender equality and women's empowerment\",\n counter_group: \"A\",\n counter_value: \"4\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1937,"value":"summaryUI = ({label, counter_group, counter_value} = {}) => {\n return view`

\n ${['label', Inputs.text({value: label, label: \"Label\"})]}\n ${['counter_group', Inputs.text({label: \"Group\", value: counter_group})]}\n ${['counter_value', Inputs.text({label: \"Value\", value: counter_value})]}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2175,"value":"#### Aggregate Summary","pinned":true,"hidden":false,"mode":"md"},{"id":2178,"value":"viewof exampleAggregateSummaryUI = aggregateSummaryUI({\n label: \"Organizational Policies\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2173,"value":"aggregateSummaryUI = ({label, counter_group} = {}) => {\n return view`

\n ${['label', Inputs.text({value: label, label: \"Label\"})]}\n ${['counter_group', Inputs.text({label: \"Group\", value: counter_group})]}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2040,"value":"#### Section","pinned":false,"hidden":false,"mode":"md"},{"id":2046,"value":"viewof sampleSectionUI = sectionUI({\n title: \"External operations\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2044,"value":"sectionUI = ({title} = {}) => {\n // class=\"[ pa3 mh-3 ][ bt bw1 b--light-silver\" ]\"\n return view`

\n ${['title', Inputs.text({value: title, label: \"Title\"})]}\n

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1860,"value":"#### Include Optional Attributes","pinned":false,"hidden":false,"mode":"md"},{"id":2527,"value":"Used to include extra checkbox or radio option like 'Select all' or 'Select none'","pinned":false,"hidden":false,"mode":"md"},{"id":1770,"value":"viewof sampleIncludeOptionalAttributesUI = includeOptionalAttributesUI({\n score: 5,\n label: \"Everything\"\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2199,"value":"viewof sampleIncludeOptionalAttributesUINoLabel = includeOptionalAttributesUI({\n score: 2\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2202,"value":"sampleIncludeOptionalAttributesUINoLabel","pinned":true,"hidden":false,"mode":"ojs"},{"id":1777,"value":"sampleIncludeOptionalAttributesUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":1835,"value":"viewof sampleIncludeOptionalAttributesUI3 = includeOptionalAttributesUI({\n label: \"This is included in our regulations, internal policies/strategies, guidelines, and/or mechanisms; we are planning to implement.\",\n score: 3,\n id: \"planning\"\n}, \"Add option to select none\", \"None\", true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1849,"value":"sampleIncludeOptionalAttributesUI3","pinned":true,"hidden":false,"mode":"ojs"},{"id":1854,"value":"viewof sampleIncludeOptionalAttributesUI4 = includeOptionalAttributesUI({\n score: 3,\n id: \"planning\"\n}, \"Add option to select none\", \"None of the above\", true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1762,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"### connectionsUI\n\nConnections are the lower part of the UI that allows cells to communicate. It is reused across a few different components","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":"FileAttachment(\"image@4.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"viewof exampleInitializedConnectionsUI = connectionsUI({connections: [\n {set:\"g1\", role:\"r1\"},\n {set:\"g2\", role:\"r2\"}\n]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"viewof exampleConnectionsUI = connectionsUI()","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"exampleConnectionsUI","pinned":true,"hidden":false,"mode":"ojs"},{"id":435,"value":"exampleConnectionsUIBackwritingExample = {\n viewof exampleConnectionsUI.value = {connections: [\n {set:\"g1\", role:\"r1\"},\n {set:\"g2\", role:\"r2\"}\n ]}\n viewof exampleConnectionsUI.dispatchEvent(new Event('input', {bubbles: true}))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"connectionRowBuilder = ({\n set,\n role,\n placeholder,\n onEnter,\n onDelete\n} = {}) => {\n const setInput = Inputs.text({value: set, placeholder})\n if (onEnter) {\n setInput.addEventListener('keyup', (evt) => {\n if (evt.keyCode === 13) {\n onEnter(evt);\n }\n });\n }\n if (onDelete) { // If user editable rows\n setInput.addEventListener('keyup', (evt) => {\n // BACKSPACE\n if (evt.keyCode === 8 && setInput.value.length == 0) {\n onDelete(setInput.value);\n }\n });\n }\n return view`\n ${['set', setInput]}\n ${['role', Inputs.select(roles, {value: role})]}\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"viewof exampleConnectionRowBuilder = connectionRowBuilder()","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"exampleConnectionRowBuilder","pinned":true,"hidden":false,"mode":"ojs"},{"id":1924,"value":"### Description UI","pinned":false,"hidden":false,"mode":"md"},{"id":1896,"value":"descriptionUI(\"Some description\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1888,"value":"descriptionUI = (description, rows = 2) => view`

\n ${['...', Inputs.textarea({label: \"Description\", value: description, rows})]}\n \n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"## Settings Card","pinned":false,"hidden":false,"mode":"md"},{"id":1117,"value":"viewof exampleSettingsCard = settingsCard()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1999,"value":"exampleSettingsCard","pinned":true,"hidden":false,"mode":"ojs"},{"id":1116,"value":"settingsCard = () => {\n return view`

Settings

\n ${['showResults', Inputs.toggle({label: \"Show results to respondents\"})]}\n

\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1115,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1107,"value":"## Summary Bar","pinned":false,"hidden":false,"mode":"md"},{"id":1106,"value":"summaryCard('30 questions across 4 pages');","pinned":true,"hidden":false,"mode":"ojs"},{"id":1105,"value":"summaryCard('30 questions across 4 pages', html`

${Inputs.button('Preview')} ${Inputs.button('Save')}`);","pinned":true,"hidden":false,"mode":"ojs"},{"id":1104,"value":"summaryCard = (title, actionsHtml) => {\n const actions = actionsHtml ? html`

${actionsHtml}` : \"\";\n\n return html`

${title}

\n ${actions}\n

\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1474,"value":"## Input Label","pinned":false,"hidden":false,"mode":"md"},{"id":1473,"value":"inputLabel(\"A sample label\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1472,"value":"inputLabel(\"A sample label\", true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1471,"value":"inputLabel = (label, optional) => html`${label}${ optional ? ` Optional`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1056,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":1869,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":1884,"value":"### Styles for the demo","pinned":false,"hidden":false,"mode":"md"},{"id":1053,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"tachyons = tachyonsExt({\n colors: {\n brand: mainColors[900], // or, provide and color hex code\n accent: accentColors[900], // or, provide and color hex code\n // The color of text which are usually displayed on top of the brand or accent colors.\n \"text-on-brand\": \"#ffffff\",\n },\n fonts: {\n \"brand-font\": `\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"`\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"randomId = () => Math.random().toString(16).substring(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"import {view, bindOneWay} from '@tomlarkworthy/view'","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"import {juice} from \"@tomlarkworthy/juice\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"import {mainColors, accentColors} from \"@categorise/brand\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"import {tachyonsExt} from \"@categorise/tachyons-and-some-extras\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"import {pageHeader, pageFooter, buttonLabel, styles as commonComponentStyles, ns, textNodeView} from \"@categorise/common-components\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2677,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2681,"value":"import { substratum } from \"@categorise/substratum\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2679,"value":"substratum({ invalidation })","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}