@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
80 lines (75 loc) • 11.3 kB
JavaScript
import { r as registerInstance, d as createEvent, h, e as Host, g as getElement } from './index-C1-Dpkp7.js';
import { h as handleShadowDOMStyles } from './base-component-tWS3Egrk.js';
import { c as createEffectiveIdResolver, i as inheritAriaAttributes } from './utils-DN2BGzSQ.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)}modus-wc-checkbox.modus-wc-checkbox-host [type=checkbox].modus-wc-checkbox:checked{--fallback-bc:var(--modus-wc-color-primary)}modus-wc-checkbox.modus-wc-checkbox-host [type=checkbox].modus-wc-checkbox:focus{outline-color:var(--modus-wc-color-primary)}modus-wc-checkbox.modus-wc-checkbox-host [type=checkbox].modus-wc-checkbox:hover{--fallback-bc:var(--modus-wc-color-primary)}[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:rgba(1, 154, 235, 0.75)}@supports (outline-color: color-mix(in sRGB, red 50%, blue)){[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:rgba(1, 154, 235, 0.75)}@supports (outline-color: color-mix(in sRGB, red 50%, blue)){[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", 7);
this.inputChange = createEvent(this, "inputChange", 7);
this.inputFocus = createEvent(this, "inputFocus", 7);
this.inheritedAttributes = {};
this.resolveEffectiveId = createEffectiveIdResolver();
/** 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() {
// Auto-inject CSS if component is used inside user's shadow DOM
handleShadowDOMStyles(this.el);
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() {
const effectiveId = this.resolveEffectiveId(this.inputId);
return (h(Host, { key: '071424b37e51b9d6d4b1a3a03d52760c1c2cdb4f', class: "modus-wc-checkbox-host" }, h("input", Object.assign({ key: 'c58e4c7f50c8b0fa6c49b44e2d3dd45bb15874c5', "aria-checked": this.indeterminate ? 'mixed' : this.value, "aria-disabled": this.disabled, checked: this.value, class: this.getClasses(), disabled: this.disabled, id: effectiveId, 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: '176bbfacc49fb1b285fc1a258f7b31c4aeda67a4', forId: effectiveId, labelText: this.label, required: this.required, size: this.size }))));
}
get el() { return getElement(this); }
};
ModusWcCheckbox.style = modusWcCheckboxCss;
export { ModusWcCheckbox as modus_wc_checkbox };