<:import src="base.htm" /> <:define tag="bs-check:div" // parameters ::label=${null} ::type=${'checkbox'} // 'checkbox' | 'radio' | 'switch' ::name=${null} ::value=${null} ::checked=${false} ::inline=${false} ::reverse=${false} ::disabled=${false} ::help=${null} // private :_id=${`bs-check-${$id}`} :_helpId=${`bs-check-help-${$id}`} :_type=${type === 'switch' ? 'checkbox' : type} class="form-check" :class-form-switch=${type === 'switch'} :class-form-check-inline=${inline} :class-form-check-reverse=${reverse} > checked = ev.target.checked}>
${help}
<:define tag="bs-check-group:div" class="mb-3" role="group" // parameters ::legend=${null} ::type=${'radio'} ::options=${[]} ::value=${type === 'radio' ? null : []} ::inline=${false} ::disabled=${false} // private :_name=${`bs-check-group-${$id}`} :_legendId=${`bs-check-group-legend-${$id}`} :_multi=${type !== 'radio'} // a lone value read as a list of one, the way `:options` reads a lone // string as an entry: passing `:value="Slack"` to a checkbox group says // something unambiguous, and spreading a string into characters is not it :_selected=${!_multi ? [] : Array.isArray(value) ? value : value == null ? [] : [value]} aria-labelledby=${legend ? _legendId : null} :_options=${options.map(o => typeof o === 'object' && o !== null ? { name: o.name, value: o.value ?? o.name, disabled: !!o.disabled } : { name: o, value: o, disabled: false })} >
${legend}
{ if (!_multi) { value = ev.target.value; return; } const on = ev.target.checked; const hit = ev.target.value; value = _options .filter(o => (o.value === hit ? on : _selected.includes(o.value))) .map(o => o.value); }}>
<:define tag="bs-range:div" class="mb-3" // parameters ::label=${null} ::name=${null} ::min=${0} ::max=${100} ::step=${1} ::value=${50} ::disabled=${false} ::showValue=${false} // private :_id=${`bs-range-${$id}`} >
${value}
value = Number(ev.target.value)}>