@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 • 4.88 kB
JavaScript
import{r as s,c as o,h as t,H as c,g as e}from"./p-D5XAQERj.js";import{D as d}from"./p-DZXd_sgn.js";import{i}from"./p-DlW2F98o.js";const h=class{constructor(t){s(this,t),this.inputBlur=o(this,"inputBlur"),this.inputChange=o(this,"inputChange"),this.inputFocus=o(this,"inputFocus"),this.inheritedAttributes={},this.customClass="",this.disabled=!1,this.indeterminate=!1,this.name="",this.required=!1,this.size="md",this.value=!1,this.handleBlur=s=>{this.inputBlur.emit(s)},this.handleFocus=s=>{this.inputFocus.emit(s)},this.handleInput=s=>{this.inputChange.emit(s)}}componentDidRender(){const s=this.el.querySelector('input[type="checkbox"]');s&&(s.indeterminate=this.indeterminate)}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Switch button"),this.inheritedAttributes=i(this.el)}getClasses(){const s=["modus-wc-toggle"],o=(s=>{let o="";return Object.prototype.hasOwnProperty.call(s,"size")&&s.size&&(o=`${o} modus-wc-toggle-${s.size}`),o})({size:this.size});return o&&s.push(o),this.customClass&&s.push(this.customClass),s.join(" ")}render(){const s=this.size&&d[this.size];return t(c,{key:"c826ad7fe778389cf1c487167d936bba9928eacf",class:"modus-wc-switch-host"},t("input",Object.assign({key:"ba143399fa714328b9ecb17003492d4885d843b4","aria-checked":this.indeterminate?"mixed":this.value,"aria-disabled":this.disabled,checked:this.value,class:this.getClasses(),disabled:this.disabled,id:this.inputId,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,required:this.required,tabIndex:this.inputTabIndex,type:"checkbox"},this.inheritedAttributes)),this.label&&t("modus-wc-input-label",{key:"dd39b4a72e723f57a6149942519772ac39e98f0a",forId:this.inputId,labelText:this.label,required:this.required,size:s}))}get el(){return e(this)}};h.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)}[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-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)}";export{h as modus_wc_switch}