@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 • 12.2 kB
JavaScript
import{r as t,d as i,h as s,e as o,g as u}from"./p-C1-Dpkp7.js";import{C as c}from"./p-3NVr0erJ.js";import{S as e}from"./p-CWDD4hEM.js";import{h as d}from"./p-tWS3Egrk.js";import{c as n,i as m,a}from"./p-DJ2rBB6r.js";const w=class{constructor(s){t(this,s),this.clearClick=i(this,"clearClick",7),this.inputBlur=i(this,"inputBlur",7),this.inputChange=i(this,"inputChange",7),this.inputFocus=i(this,"inputFocus",7),this.inheritedAttributes={},this.resolveEffectiveId=n(),this.bordered=!0,this.clearAriaLabel="Clear text",this.customClass="",this.disabled=!1,this.includeClear=!1,this.includeSearch=!1,this.placeholder="",this.readOnly=!1,this.required=!1,this.size="md",this.type="text",this.value="",this.handleBlur=t=>{this.inputBlur.emit(t)},this.handleClearText=t=>{this.value="",this.inputChange.emit(t),this.clearClick.emit()},this.handleFocus=t=>{this.inputFocus.emit(t)},this.handleInput=t=>{this.value=t.target.value,this.inputChange.emit(t)}}componentWillLoad(){d(this.el),this.el.ariaLabel||(this.el.ariaLabel=this.placeholder||"Text input"),this.inheritedAttributes=Object.assign(Object.assign({},m(this.el)),a(this.el,["spellcheck","inputmode"])),this.el.hasAttribute("inputmode")||this.inheritedAttributes.inputmode||this.el.setAttribute("inputmode","text")}getClasses(){const t=["modus-wc-text-input","modus-wc-input","modus-wc-w-full","modus-wc-flex","modus-wc-items-center","modus-wc-gap-1"],i=(({bordered:t,disabled:i,feedback:s,readOnly:o,size:u})=>{let c="";return t&&(c=`${c} modus-wc-input-bordered`),i&&(c=`${c} modus-wc-input-disabled`),s&&(c=`${c} modus-wc-input--${s.level}`),o&&(c=`${c} modus-wc-text-input--readonly`),u&&(c=`${c} modus-wc-input-${u}`),c.trim()})({bordered:this.bordered,disabled:this.disabled,feedback:this.feedback,readOnly:this.readOnly,size:this.size});return i&&t.push(i),this.customClass&&t.push(this.customClass),t.join(" ")}shouldIncludeClear(){return!(!this.includeClear||this.disabled||this.readOnly||!this.value)}render(){const t=this.shouldIncludeClear(),i=this.resolveEffectiveId(this.inputId),u=!!this.el.querySelector('[slot="custom-icon"]');return s(o,{key:"36914061ff7cf20fc92d586a95c9664d80772372"},this.label&&s("modus-wc-input-label",{key:"7f79b675e9940d14d90e14fe2a3f5b2b72916a02",forId:i,labelText:this.label,required:this.required,size:this.size}),s("label",{key:"a3628a31c97375b727fecf487a4141c2d3c76cb5",class:this.getClasses()},u?s("div",{class:"modus-wc-text-input-icon modus-wc-text-input-icon-custom"},s("slot",{name:"custom-icon"})):this.includeSearch&&s(e,{className:"modus-wc-text-input-icon modus-wc-text-input-icon-search"}),s("input",Object.assign({key:"ae9b23a1d3fef64880709e34f3ceafc5a4f9be46","aria-required":this.required,autocapitalize:this.autoCapitalize,autocomplete:this.autoComplete,autocorrect:this.autoCorrect,class:"modus-wc-grow",disabled:this.disabled,enterkeyhint:this.enterkeyhint,id:i,maxlength:this.maxLength,minlength:this.minLength,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,pattern:this.pattern,placeholder:this.placeholder,readonly:this.readOnly,required:this.required,tabIndex:this.inputTabIndex,type:this.type,value:this.value},this.inheritedAttributes)),this.includeClear&&s("div",{key:"7bed8a4e252375fceb46d63a00f2520a058ba730",class:"modus-wc-clear-icon-container "+(t?"modus-wc-clear-icon-visible":"modus-wc-clear-icon-hidden")},s(c,{key:"6cd2a6cc4b44620dbff55df69065ef0f6c2d91c2",ariaLabel:this.clearAriaLabel,className:"modus-wc-text-input-icon modus-wc-text-input-icon-clear",decorative:!1,onClear:this.handleClearText}))),this.feedback&&s("modus-wc-input-feedback",{key:"c8b0ac169d26df57b81e0fb70ab335a46d4077d5",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return u(this)}};w.style="modus-wc-text-input .modus-wc-input{border-bottom-width:var(--input-bottom-border-width)}modus-wc-text-input .modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}modus-wc-text-input .modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}modus-wc-text-input .modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}modus-wc-text-input .modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-text-input .modus-wc-input-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-text-input .modus-wc-input-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-text-input .modus-wc-input-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-text-input .modus-wc-input-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-text-input .modus-wc-input-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-text-input .modus-wc-input input{background-color:var(--modus-wc-color-base-page)}modus-wc-text-input .modus-wc-input:has(>input[disabled])>input[disabled]{background-color:var(--modus-wc-color-base-200)}modus-wc-text-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input{background-color:var(--modus-wc-color-base-page)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm{padding:0 var(--modus-wc-spacing-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm input{max-height:var(--modus-wc-size-xs)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-sm);width:var(--modus-wc-line-height-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md{font-size:var(--modus-wc-font-size-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-md);width:var(--modus-wc-line-height-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg{font-size:var(--modus-wc-font-size-lg)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear{cursor:pointer}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-custom{align-items:center;display:flex;flex-shrink:0;justify-content:center}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container{align-items:center;display:flex;justify-content:center;min-width:var(--modus-wc-line-height-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container.modus-wc-clear-icon-hidden{pointer-events:none;visibility:hidden}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container.modus-wc-clear-icon-visible{visibility:visible}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm .modus-wc-clear-icon-container{min-width:var(--modus-wc-line-height-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg .modus-wc-clear-icon-container{min-width:var(--modus-wc-line-height-lg)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);line-height:var(--modus-wc-line-height-sm);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-line-height-md);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);line-height:var(--modus-wc-line-height-xl);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within{border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear:focus:not(:focus-visible),[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear:focus:not(:focus-visible){outline:none}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-text-input--readonly,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-text-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-bordered:not(:disabled){border-color:var(--modus-wc-color-accent)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-bordered:not(:disabled):focus-within{border-color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon{color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-text-input input,[data-theme=connect-dark] modus-wc-text-input input{font-weight:var(--modus-wc-font-weight-normal)}[data-theme=connect-light] modus-wc-text-input input::placeholder,[data-theme=connect-dark] modus-wc-text-input input::placeholder{color:#9d9da6;font-style:italic;font-weight:var(--modus-wc-font-weight-normal);opacity:1}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:hover,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:active,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:focus,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:focus-within,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}";export{w as modus_wc_text_input}