@trimble-oss/moduswebcomponents/modus-wc/p-d3783782.entry.js

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

import{r as o,d as s,h as t,e as c,g as d}from"./p-C1-Dpkp7.js";import{h as e}from"./p-tWS3Egrk.js";import{D as m}from"./p-DZXd_sgn.js";import{c as a,i as l}from"./p-DJ2rBB6r.js";const u=class{constructor(t){o(this,t),this.inputBlur=s(this,"inputBlur",7),this.inputChange=s(this,"inputChange",7),this.inputFocus=s(this,"inputFocus",7),this.inheritedAttributes={},this.resolveEffectiveId=a(),this.customClass="",this.disabled=!1,this.indeterminate=!1,this.name="",this.required=!1,this.size="md",this.value=!1,this.handleBlur=o=>{this.inputBlur.emit(o)},this.handleFocus=o=>{this.inputFocus.emit(o)},this.handleInput=o=>{this.inputChange.emit(o)}}componentDidRender(){const o=this.el.querySelector('input[type="checkbox"]');o&&(o.indeterminate=this.indeterminate)}componentWillLoad(){e(this.el),this.el.ariaLabel||(this.el.ariaLabel="Switch button"),this.inheritedAttributes=l(this.el)}getClasses(){const o=["modus-wc-toggle"],s=(o=>{let s="";return Object.prototype.hasOwnProperty.call(o,"size")&&o.size&&(s=`${s} modus-wc-toggle-${o.size}`),s})({size:this.size});return s&&o.push(s),this.customClass&&o.push(this.customClass),o.join(" ")}render(){const o=this.resolveEffectiveId(this.inputId),s=this.size&&m[this.size];return t(c,{key:"75399153e98c3904d1f4876a6b6ec91390942571",class:"modus-wc-switch-host"},t("input",Object.assign({key:"39f2aba1ce81bad5104eddb136a8365372113fb8","aria-checked":this.indeterminate?"mixed":this.value,"aria-disabled":this.disabled,checked:this.value,class:this.getClasses(),disabled:this.disabled,id:o,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,required:this.required,role:"switch",tabIndex:this.inputTabIndex,type:"checkbox"},this.inheritedAttributes)),this.label&&t("modus-wc-input-label",{key:"8ae47f5b66801b1cfcae7bf8d586121c900eb527",forId:o,labelText:this.label,required:this.required,size:s}))}get el(){return d(this)}};u.style="modus-wc-switch.modus-wc-switch-host{--rounded-badge:32px;align-items:center;display:flex}modus-wc-switch.modus-wc-switch-host .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-normal);padding-inline-start:var(--modus-wc-spacing-md)}modus-wc-switch .modus-wc-toggle{border-radius:var(--rounded-badge)}modus-wc-switch .modus-wc-toggle:focus{border-color:var(--modus-wc-color-base-200)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle{background-color:var(--modus-wc-color-white);border:none;color:var(--modus-wc-color-gray-4);outline-color:var(--modus-wc-color-highlight-blue);--fallback-b1:var(--modus-wc-color-gray-4)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs{--handleoffset:var(--modus-wc-spacing-sm);height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-xl)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-sm);line-height:var(--modus-wc-font-size-2xl)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm{--handleoffset:1rem;height:1rem;width:2rem}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md{--handleoffset:1.25rem;height:1.25rem;width:2.5rem}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg{--handleoffset:1.5rem;height:1.5rem;width:3rem}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:checked,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-blue-light);color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked),[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked){background-color:var(--modus-wc-color-white);outline:2px solid var(--modus-wc-color-blue-light);outline-offset:-2px}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked{background-color:var(--modus-wc-color-white);--fallback-b1:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible{outline:2px solid var(--modus-wc-color-highlight-blue);outline-offset:2px}[data-theme=modus-classic-light] modus-wc-switch .modus-wc-toggle:disabled,[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:disabled{background-color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked){background-color:var(--modus-wc-color-white);outline:2px solid var(--modus-wc-color-highlight-blue);outline-offset:-2px}[data-theme=modus-classic-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked{background-color:var(--modus-wc-color-white);--fallback-b1:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle{background-color:var(--modus-wc-color-white);border:none;color:var(--modus-wc-color-gray-4);outline-color:var(--modus-wc-color-highlight-blue);--fallback-b1:var(--modus-wc-color-gray-4)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs{--handleoffset:var(--modus-wc-spacing-sm);height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-xl)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-sm);line-height:var(--modus-wc-font-size-2xl)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm{--handleoffset:1rem;height:1rem;width:2rem}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md{--handleoffset:1.25rem;height:1.25rem;width:2.5rem}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg{--handleoffset:1.5rem;height:1.5rem;width:3rem}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:checked,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-blue-light);color:var(--modus-wc-color-blue-light)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked),[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked){background-color:var(--modus-wc-color-white);outline:2px solid var(--modus-wc-color-blue-light);outline-offset:-2px}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked{background-color:var(--modus-wc-color-white);--fallback-b1:var(--modus-wc-color-trimble-blue)}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):focus-visible{outline:2px solid var(--modus-wc-color-highlight-blue);outline-offset:2px}[data-theme=connect-light] modus-wc-switch .modus-wc-toggle:disabled,[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:disabled{background-color:var(--modus-wc-color-white)}[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:not(:checked){background-color:var(--modus-wc-color-white);outline:2px solid var(--modus-wc-color-highlight-blue);outline-offset:-2px}[data-theme=connect-dark] modus-wc-switch .modus-wc-toggle:not(:disabled):hover:checked{background-color:var(--modus-wc-color-white);--fallback-b1:var(--modus-wc-color-blue-light)}[data-theme=modus-modern-light] modus-wc-switch modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-10);padding-inline-start:var(--modus-wc-spacing-sm)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle{--fallback-b1:var(--modus-wc-color-gray-0);border:none;box-shadow:var(--handleoffsetcalculator) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, 0 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset;color:var(--modus-wc-color-white)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:indeterminate,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:indeterminate{box-shadow:calc(var(--handleoffset) / 2) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, calc(var(--handleoffset) / -2) 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset, 0 0 0 var(--modus-wc-border-width-md) var(--fallback-b1) inset}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:checked,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:checked{--fallback-b1:var(--modus-wc-color-primary)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle:focus-visible,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle:focus-visible{outline:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-primary);outline-offset:var(--modus-wc-border-width-sm)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs{--handleoffset:var(--modus-wc-spacing-sm);height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-xl)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-xs~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-sm);line-height:var(--modus-wc-font-size-2xl)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm{--handleoffset:var(--modus-wc-spacing-md);height:var(--modus-wc-font-size-2xl);width:var(--modus-wc-spacing-2xl)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-sm~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-md);line-height:var(--modus-wc-line-height-md)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md{--handleoffset:var(--modus-wc-spacing-lg);height:var(--modus-wc-spacing-xl);width:var(--modus-wc-size-md)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-md~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-lg);line-height:var(--modus-wc-line-height-md)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg{--handleoffset:var(--modus-wc-spacing-xl);height:var(--modus-wc-spacing-2xl);width:var(--modus-wc-size-xl)}[data-theme=modus-modern-light] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg~modus-wc-input-label .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle.modus-wc-toggle-lg~modus-wc-input-label .modus-wc-input-label{font-size:var(--modus-wc-font-size-xl);line-height:var(--modus-wc-line-height-lg)}[data-theme=modus-modern-dark] modus-wc-switch modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-light)}[data-theme=modus-modern-dark] modus-wc-switch .modus-wc-toggle{--fallback-b1:var(--modus-wc-color-gray-9)}";export{u as modus_wc_switch}