@limetech/lime-elements
Version:
48 lines (47 loc) • 2.2 kB
JavaScript
import { h } from '@stencil/core';
export const CheckboxTemplate = (props) => {
const inputProps = {};
if (props.readonly) {
let icon = 'minus';
if (props.checked) {
icon = {
name: 'ok',
color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',
};
}
return [
h("limel-dynamic-label", { value: props.checked, "aria-controls": props.helperText ? props.helperTextId : undefined, defaultLabel: { text: props.label, icon: icon }, labels: props.readonlyLabels }),
h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
];
}
if (props.indeterminate) {
inputProps['data-indeterminate'] = 'true';
inputProps['aria-checked'] = 'mixed';
}
else {
inputProps['data-indeterminate'] = 'false';
if (typeof props.checked === 'boolean') {
inputProps['aria-checked'] = String(props.checked);
}
}
return [
h("div", { class: {
'boolean-input': true,
checkbox: true,
checked: props.checked,
invalid: props.invalid,
disabled: props.disabled,
required: props.required,
indeterminate: props.indeterminate,
readonly: props.readonly,
} }, h("input", Object.assign({ type: "checkbox", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange, "aria-controls": props.helperText ? props.helperTextId : undefined, "aria-describedby": props.helperTextId }, inputProps)), h("div", { class: "box" }, h("svg", { class: "check-mark", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, h("path", { fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)),
h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
];
};
const HelperText = (props) => {
if (typeof props.text !== 'string') {
return;
}
return (h("limel-helper-line", { helperText: props.text.trim(), helperTextId: props.helperTextId, invalid: props.invalid }));
};
//# sourceMappingURL=checkbox.template.js.map