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 2.26 kB
import{r as s,d as t,h as i,e,g as d}from"./p-C1-Dpkp7.js";import{h as a}from"./p-tWS3Egrk.js";import{c as h,i as o}from"./p-DJ2rBB6r.js";const r=class{constructor(i){s(this,i),this.inputBlur=t(this,"inputBlur",7),this.inputChange=t(this,"inputChange",7),this.inputFocus=t(this,"inputFocus",7),this.inheritedAttributes={},this.resolveEffectiveId=h(),this.customClass="",this.disabled=!1,this.name="",this.required=!1,this.size="md",this.value=0,this.handleBlur=s=>{this.inputBlur.emit(s)},this.handleFocus=s=>{this.inputFocus.emit(s)},this.handleInput=s=>{this.inputChange.emit(s)}}componentWillLoad(){a(this.el),this.el.ariaLabel||(this.el.ariaLabel="Slider"),this.inheritedAttributes=o(this.el)}getClasses(){const s=["modus-wc-range"],t=(({size:s})=>{let t="";return s&&(t=`${t} modus-wc-range-${s}`),t.trim()})({size:this.size});return t&&s.push(t),this.customClass&&s.push(this.customClass),s.join(" ")}render(){const s=this.resolveEffectiveId(this.inputId);return i(e,{key:"18b2506e57e7abf49e421fc8263a92e5211db490"},this.label&&i("modus-wc-input-label",{key:"3cb8f188b68755aa3a0657f89b7f02a4a03604e0",forId:s,labelText:this.label,required:this.required,size:this.size}),i("input",Object.assign({key:"2b81011cabaddfbd5d82031ebc399bb0b813b8e7","aria-disabled":this.disabled,class:this.getClasses(),disabled:this.disabled,id:s,max:this.max,min:this.min,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,required:this.required,step:this.step,tabIndex:this.inputTabIndex,type:"range",value:this.value},this.inheritedAttributes)))}get el(){return d(this)}};r.style="modus-wc-slider .modus-wc-range{--rounded-box:200px;--range-shadow:var(--modus-wc-color-trimble-blue)}[data-theme=modus-modern-light] modus-wc-slider .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-slider .modus-wc-input-label,[data-theme=modus-classic-light] modus-wc-slider .modus-wc-input-label,[data-theme=modus-classic-dark] modus-wc-slider .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-slider .modus-wc-range,[data-theme=modus-classic-dark] modus-wc-slider .modus-wc-range{--rounded-box:200px;--range-shadow:var(--modus-wc-color-trimble-blue)}";export{r as modus_wc_slider}