@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
75 lines (70 loc) • 10.1 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D_4hbGjA.js';
import { i as inheritAriaAttributes } from './utils-DQvnWXRl.js';
const convertPropsToClasses = ({ size, }) => {
let classes = '';
if (size) {
classes = `${classes} modus-wc-checkbox-${size}`;
}
return classes.trim();
};
const modusWcCheckboxCss = "modus-wc-checkbox.modus-wc-checkbox-host{align-items:center;display:flex}modus-wc-checkbox.modus-wc-checkbox-host .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-normal);padding-inline-start:var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox{--check-bg:var(--modus-wc-color-highlight-blue);--fallback-bc:var(--modus-wc-color-gray-4);--check-content:var(--modus-wc-color-white);border-radius:var(--modus-wc-border-radius-sm);border-width:var(--modus-wc-border-width-sm)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm{height:0.75rem;width:0.75rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md{height:1rem;width:1rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg{height:1.25rem;width:1.25rem}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--check-bg:var(--modus-wc-color-blue-light);--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:disabled,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:disabled{opacity:0.3}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked),[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked){background-color:unset;border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-gray-4)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:focus,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 75%, transparent)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:hover,[data-theme=modus-classic-dark] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox{--check-bg:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--check-bg:var(--modus-wc-color-trimble-blue);--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-light] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox{--check-bg:var(--modus-wc-color-highlight-blue);--fallback-bc:var(--modus-wc-color-gray-4);--check-content:var(--modus-wc-color-white);border-radius:var(--modus-wc-border-radius-sm);border-width:var(--modus-wc-border-width-sm)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-sm{height:0.75rem;width:0.75rem}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-md{height:1rem;width:1rem}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox.modus-wc-checkbox-lg{height:1.25rem;width:1.25rem}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:checked,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-primary-color)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--check-bg:var(--modus-wc-color-blue-light);--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:disabled,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:disabled{opacity:0.3}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked),[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:disabled:not(:checked){background-color:unset;border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-gray-4)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:focus,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 75%, transparent)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:hover,[data-theme=connect-dark] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox{--check-bg:var(--modus-wc-color-primary-color)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:checked:hover{--check-bg:var(--modus-wc-color-trimble-blue);--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:indeterminate{--fallback-bc:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:focus{outline-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-checkbox .modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-blue-light)}";
const ModusWcCheckbox = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.inputBlur = createEvent(this, "inputBlur");
this.inputChange = createEvent(this, "inputChange");
this.inputFocus = createEvent(this, "inputFocus");
this.inheritedAttributes = {};
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** The disabled state of the checkbox. */
this.disabled = false;
/** The indeterminate state of the checkbox. */
this.indeterminate = false;
/** Name of the form control. Submitted with the form as part of a name/value pair. */
this.name = '';
/** A value is required for the form to be submittable. */
this.required = false;
/** The size of the input. */
this.size = 'md';
/** The value of the checkbox. */
this.value = false;
this.handleBlur = (event) => {
this.inputBlur.emit(event);
};
this.handleFocus = (event) => {
this.inputFocus.emit(event);
};
this.handleInput = (event) => {
this.inputChange.emit(event);
};
}
componentDidRender() {
const checkbox = this.el.querySelector('input[type="checkbox"]');
if (checkbox) {
checkbox.indeterminate = this.indeterminate;
}
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Checkbox';
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-checkbox'];
const propClasses = convertPropsToClasses({ size: this.size });
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (h(Host, { key: 'd1aa5ea7d5ebd544fcc684ebf6dcc220052aebe2', class: "modus-wc-checkbox-host" }, h("input", Object.assign({ key: '4e5d70dfde13c5746357b33fbe255588a7245ce9', "aria-checked": this.indeterminate ? 'mixed' : this.value, "aria-disabled": this.disabled, checked: this.value, class: this.getClasses(), disabled: this.disabled, id: this.inputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, required: this.required, tabIndex: this.inputTabIndex, type: "checkbox" }, this.inheritedAttributes)), this.label && (h("modus-wc-input-label", { key: '38ba3e2e7b10370ffaeaf05fe26dc777b6161182', forId: this.inputId, labelText: this.label, required: this.required, size: this.size }))));
}
get el() { return getElement(this); }
};
ModusWcCheckbox.style = modusWcCheckboxCss;
export { ModusWcCheckbox as modus_wc_checkbox };