<:import src="base.htm" />
<:define tag="bs-check:div"
// parameters
:extra=${null} // extra classes for this instance
: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 ${extra ?? ''}"
: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 ${extra ?? ''}"
role="group"
// parameters
:extra=${null} // extra classes for this instance
:legend=${null}
:type=${'radio'}
:options=${[]}
:value=${null}
:inline=${false}
:disabled=${false}
// private
:_name=${`bs-check-group-${$id}`}
:_legendId=${`bs-check-group-legend-${$id}`}
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}
value = ev.target.value}>
<:define tag="bs-range:div"
class="mb-3 ${extra ?? ''}"
// parameters
:extra=${null} // extra classes for this instance
: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)}>