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 5.17 kB
import{r as d,c as o,h as a,H as s,g as c}from"./p-D_4hbGjA.js";import{D as i}from"./p-DZXd_sgn.js";import{c as t,i as r}from"./p-BLBSdonk.js";const m=class{constructor(a){d(this,a),this.inputBlur=o(this,"inputBlur"),this.inputChange=o(this,"inputChange"),this.inputFocus=o(this,"inputFocus"),this.inheritedAttributes={},this.generatedId=t(),this.customClass="",this.disabled=!1,this.name="",this.required=!1,this.size="md",this.value=!1,this.handleBlur=d=>{this.inputBlur.emit(d)},this.handleFocus=d=>{this.inputFocus.emit(d)},this.handleInput=d=>{this.inputChange.emit(d)}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Radio button"),this.inheritedAttributes=r(this.el)}getClasses(){const d=["modus-wc-radio"],o=(({size:d})=>{let o="";return d&&(o=`${o} modus-wc-radio-${d}`),o.trim()})({size:this.size});return o&&d.push(o),this.customClass&&d.push(this.customClass),d.join(" ")}render(){const d=this.size&&i[this.size],o=this.inputId||this.generatedId;return a(s,{key:"228478b30286e6107bab1c1411a3014546813aaf",class:"modus-wc-radio-host"},a("input",Object.assign({key:"ca5c232d6abe8db048e11c95c093f88d53cf4249","aria-checked":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,tabIndex:this.inputTabIndex,type:"radio"},this.inheritedAttributes)),this.label&&a("modus-wc-input-label",{key:"c09dd8e7f82b2ef8e5bfc78234b1de48bc912b69",forId:o,labelText:this.label,required:this.required,size:d}))}get el(){return c(this)}};m.style="modus-wc-radio.modus-wc-radio-host{align-items:center;display:flex}modus-wc-radio.modus-wc-radio-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-radio .modus-wc-radio,[data-theme=modus-classic-dark] modus-wc-radio .modus-wc-radio{--fallback-bc:var(--modus-wc-color-gray-4);border-width:var(--modus-wc-border-width-sm)}[data-theme=modus-classic-light] modus-wc-radio .modus-wc-radio.modus-wc-radio-xs,[data-theme=modus-classic-dark] modus-wc-radio .modus-wc-radio.modus-wc-radio-xs{height:0.875rem;width:0.875rem}[data-theme=modus-classic-light] modus-wc-radio .modus-wc-radio.modus-wc-radio-sm,[data-theme=modus-classic-dark] modus-wc-radio .modus-wc-radio.modus-wc-radio-sm{height:1rem;width:1rem}[data-theme=modus-classic-light] modus-wc-radio .modus-wc-radio.modus-wc-radio-md,[data-theme=modus-classic-dark] modus-wc-radio .modus-wc-radio.modus-wc-radio-md{height:1.125rem;width:1.125rem}[data-theme=modus-classic-light] modus-wc-radio .modus-wc-radio.modus-wc-radio-lg,[data-theme=modus-classic-dark] modus-wc-radio .modus-wc-radio.modus-wc-radio-lg{height:1.25rem;width:1.25rem}[data-theme=modus-classic-light] modus-wc-radio .modus-wc-radio:checked{--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-radio .modus-wc-radio:focus{outline-color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-radio .modus-wc-radio:hover{--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-dark] modus-wc-radio .modus-wc-radio:checked{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-radio .modus-wc-radio:focus{outline-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-radio .modus-wc-radio:hover{--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=connect-light] modus-wc-radio .modus-wc-radio,[data-theme=connect-dark] modus-wc-radio .modus-wc-radio{--fallback-bc:var(--modus-wc-color-gray-4);border-width:var(--modus-wc-border-width-sm)}[data-theme=connect-light] modus-wc-radio .modus-wc-radio.modus-wc-radio-xs,[data-theme=connect-dark] modus-wc-radio .modus-wc-radio.modus-wc-radio-xs{height:0.875rem;width:0.875rem}[data-theme=connect-light] modus-wc-radio .modus-wc-radio.modus-wc-radio-sm,[data-theme=connect-dark] modus-wc-radio .modus-wc-radio.modus-wc-radio-sm{height:1rem;width:1rem}[data-theme=connect-light] modus-wc-radio .modus-wc-radio.modus-wc-radio-md,[data-theme=connect-dark] modus-wc-radio .modus-wc-radio.modus-wc-radio-md{height:1.25rem;width:1.25rem}[data-theme=connect-light] modus-wc-radio .modus-wc-radio.modus-wc-radio-lg,[data-theme=connect-dark] modus-wc-radio .modus-wc-radio.modus-wc-radio-lg{height:1.75rem;width:1.75rem}[data-theme=connect-light] modus-wc-radio .modus-wc-radio:checked{--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=connect-light] modus-wc-radio .modus-wc-radio:focus{outline-color:var(--modus-wc-color-trimble-blue)}[data-theme=connect-light] modus-wc-radio .modus-wc-radio:hover{--fallback-bc:var(--modus-wc-color-trimble-blue)}[data-theme=connect-dark] modus-wc-radio .modus-wc-radio:checked{--fallback-bc:var(--modus-wc-color-highlight-blue)}[data-theme=connect-dark] modus-wc-radio .modus-wc-radio:focus{outline-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-dark] modus-wc-radio .modus-wc-radio:hover{--fallback-bc:var(--modus-wc-color-trimble-blue)}";export{m as modus_wc_radio}