<: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)}>