UNPKG

@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

1 lines 9.49 kB
import{r as c,d as o,h as e,e as s,g as h}from"./p-C1-Dpkp7.js";import{h as d}from"./p-tWS3Egrk.js";import{c as t,i as m}from"./p-DJ2rBB6r.js";const a=class{constructor(e){c(this,e),this.inputBlur=o(this,"inputBlur",7),this.inputChange=o(this,"inputChange",7),this.inputFocus=o(this,"inputFocus",7),this.inheritedAttributes={},this.resolveEffectiveId=t(),this.customClass="",this.disabled=!1,this.indeterminate=!1,this.name="",this.required=!1,this.size="md",this.value=!1,this.handleBlur=c=>{this.inputBlur.emit(c)},this.handleFocus=c=>{this.inputFocus.emit(c)},this.handleInput=c=>{this.inputChange.emit(c)}}componentDidRender(){const c=this.el.querySelector('input[type="checkbox"]');c&&(c.indeterminate=this.indeterminate)}componentWillLoad(){d(this.el),this.el.ariaLabel||(this.el.ariaLabel="Checkbox"),this.inheritedAttributes=m(this.el)}getClasses(){const c=["modus-wc-checkbox"],o=(({size:c})=>{let o="";return c&&(o=`${o} modus-wc-checkbox-${c}`),o.trim()})({size:this.size});return o&&c.push(o),this.customClass&&c.push(this.customClass),c.join(" ")}render(){const c=this.resolveEffectiveId(this.inputId);return e(s,{key:"071424b37e51b9d6d4b1a3a03d52760c1c2cdb4f",class:"modus-wc-checkbox-host"},e("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:c,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,required:this.required,tabIndex:this.inputTabIndex,type:"checkbox"},this.inheritedAttributes)),this.label&&e("modus-wc-input-label",{key:"176bbfacc49fb1b285fc1a258f7b31c4aeda67a4",forId:c,labelText:this.label,required:this.required,size:this.size}))}get el(){return h(this)}};a.style="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)}";export{a as modus_wc_checkbox}