@trimble-oss/moduswebcomponents/modus-wc/p-185cce96.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 e,c as s,h as c,H as t,g as o}from"./p-D_4hbGjA.js";import{c as d,i as m}from"./p-BLBSdonk.js";const i=class{constructor(c){e(this,c),this.inputBlur=s(this,"inputBlur"),this.inputChange=s(this,"inputChange"),this.inputFocus=s(this,"inputFocus"),this.inheritedAttributes={},this.generatedId=d(),this.bordered=!0,this.customClass="",this.disabled=!1,this.options=[],this.required=!1,this.size="md",this.value="",this.handleBlur=e=>{this.inputBlur.emit(e)},this.handleFocus=e=>{this.inputFocus.emit(e)},this.handleInput=e=>{this.value=e.target.value,this.inputChange.emit(e)}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Select"),this.inheritedAttributes=m(this.el)}getClasses(){const e=["modus-wc-select","modus-wc-w-full"],s=(({bordered:e,feedback:s,size:c})=>{let t="";return e&&(t=`${t} modus-wc-select-bordered`),s&&(t=`${t} modus-wc-input--${s.level}`),c&&(t=`${t} modus-wc-select-${c}`),t.trim()})({bordered:this.bordered,feedback:this.feedback,size:this.size});return s&&e.push(s),this.customClass&&e.push(this.customClass),e.join(" ")}render(){const e=this.inputId||this.generatedId;return c(t,{key:"39e94da2f1c0f27c14d97a0594de1ed62ee57302"},this.label&&c("modus-wc-input-label",{key:"b9f1cd78d1de0de76caa93a450239a2851ccba7c",forId:e,labelText:this.label,required:this.required,size:this.size}),c("select",Object.assign({key:"2b3af54e4bb1a1c7d408618537c49aa0c1d9bf29",class:this.getClasses(),disabled:this.disabled,id:e,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,required:this.required,tabindex:this.inputTabIndex},this.inheritedAttributes),this.options.map((e=>c("option",{disabled:e.disabled,selected:e.value===this.value,value:e.value},e.label)))),this.feedback&&c("modus-wc-input-feedback",{key:"a4001e4c07e511c83dc676f26cfd0dbdc31fde28",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return o(this)}};i.style="modus-wc-select .modus-wc-select-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-select .modus-wc-select-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-select .modus-wc-select-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-select .modus-wc-select-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-select .modus-wc-select-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-select .modus-wc-select--error{border-color:var(--modus-wc-color-error) !important}modus-wc-select .modus-wc-select--info{border-color:var(--modus-wc-color-info) !important}modus-wc-select .modus-wc-select--success{border-color:var(--modus-wc-color-success) !important}modus-wc-select .modus-wc-select--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-select .modus-wc-select .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-sm,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);line-height:var(--modus-wc-input-height-sm);min-height:var(--modus-wc-input-height-sm)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-md,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-input-height-md);min-height:var(--modus-wc-input-height-md)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-lg,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select.modus-wc-select-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);line-height:var(--modus-wc-font-size-lg);min-height:var(--modus-wc-font-size-lg)}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select:focus,[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select:focus{border-color:var(--modus-wc-color-blue-light);border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-select .modus-wc-select.modus-wc-select-bordered:not(:disabled):not(:focus){border-color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select:focus{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-select .modus-wc-select,[data-theme=modus-modern-dark] modus-wc-select .modus-wc-select,[data-theme=connect-dark] modus-wc-select .modus-wc-select{background-color:var(--modus-wc-color-gray-10)}[data-theme=connect-light] modus-wc-select .modus-wc-select,[data-theme=connect-dark] modus-wc-select .modus-wc-select{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-select .modus-wc-select:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-select .modus-wc-select:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-select .modus-wc-select:hover,[data-theme=connect-dark] modus-wc-select .modus-wc-select:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-select .modus-wc-select:active,[data-theme=connect-dark] modus-wc-select .modus-wc-select:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-select .modus-wc-select:focus,[data-theme=connect-dark] modus-wc-select .modus-wc-select:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-select .modus-wc-select:focus-within,[data-theme=connect-dark] modus-wc-select .modus-wc-select:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}";export{i as modus_wc_select}