31:T561,function conditionalShow( element, { label = "Show", checked = false, returns = (checked, element) => element?.value || element, // returns = (checked, element) => checked ? element?.value || element : null, // If you want it to return null when unchecked bindInput = true, showValueSummary = true } = {} ) { const show = htl.html`${label}`; const container = htl.html`

${element}

`; const valueSummary = htl.html``; const target = htl.html`

${show} ${showValueSummary ? valueSummary : ""}

${container}

`; function updateValueSummary() { if ( showValueSummary && target.value && target.value && Array.isArray(target.value) ) { valueSummary.innerHTML = `(Returns ${target.value.length} elements)`; } else { valueSummary.innerHTML = ``; } } function set(evt) { if (evt) { evt.stopPropagation(); } target.value = returns(target.open, element); target.checked = target.open; target.dispatchEvent(new Event("input", { bubbles: true })); updateValueSummary(); } set(); if (bindInput) { element.addEventListener("input", set); } target.addEventListener("toggle", () => { target.checked = target.open; }); return target; }32:[] 2f:{"title":"Conditional Show","cells":[{"id":0,"value":"# Conditional Show\n\nWraps an element into a details tag, but returns the element. Useful to hide an Observable Input, but still make the cell be reactive\n\n```js\nimport {conditionalShow} from \"@john-guerra/conditional-show\"\n```\n\n## Changelog\n\n* Feb 25 2025 @220 - Bugfix exporting the toggle state\n* Jan 30 2023 @196 - Switch to using the details element tag\n* Jan 19 2023 @110 - Switch to toggle\n* Nov 10 2022 @84 - Uses Inputs.checkbox\n\n## Example\n\nSay for instance that you want to show a summary of your data with [Navio](https://navio.dev)","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof selected = conditionalShow(await navio(penguins), {\n label: htl.html`

Show Navio

`,\n checked: this ? this.checked : true, // keep previous value\n // checked: false,\n returns: (checked, navElem) => (checked ? navElem.value : navElem.value) // what do you want it to return\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof selected.checked","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"Here is the value returned","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"selected","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { navio } from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}