@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.74 kB
JavaScript
import{r as t,d as e,h as a,e as s,g as o}from"./p-C1-Dpkp7.js";import{h as r}from"./p-tWS3Egrk.js";import{c as d,i as c,a as m}from"./p-DJ2rBB6r.js";const i=class{constructor(a){t(this,a),this.inputBlur=e(this,"inputBlur",7),this.inputChange=e(this,"inputChange",7),this.inputFocus=e(this,"inputFocus",7),this.inheritedAttributes={},this.resolveEffectiveId=d(),this.bordered=!0,this.customClass="",this.disabled=!1,this.placeholder="",this.readonly=!1,this.required=!1,this.size="md",this.value="",this.handleBlur=t=>{this.inputBlur.emit(t)},this.handleFocus=t=>{this.inputFocus.emit(t)},this.handleInput=t=>{this.value=t.target.value,this.inputChange.emit(t)}}componentWillLoad(){r(this.el),this.el.ariaLabel||(this.el.ariaLabel=this.placeholder||"Text area"),this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),m(this.el,["spellcheck"]))}getClasses(){const t=["modus-wc-textarea","modus-wc-w-full"],e=(({bordered:t,feedback:e,size:a})=>{let s="";return t&&(s=`${s} modus-wc-textarea-bordered`),e&&(s=`${s} modus-wc-input--${e.level}`),a&&(s=`${s} modus-wc-textarea-${a}`),s.trim()})({bordered:this.bordered,feedback:this.feedback,size:this.size});return e&&t.push(e),this.customClass&&t.push(this.customClass),t.join(" ")}render(){const t=this.resolveEffectiveId(this.inputId);return a(s,{key:"04661e7f959fc54e5210ba3d24d930c176cf07c7"},this.label&&a("modus-wc-input-label",{key:"844d86975b32dd3f254f9a937eda909605778bb9",forId:t,labelText:this.label,required:this.required,size:this.size}),a("textarea",Object.assign({key:"3f935d9d88255c912ad413a4892619171d58a51a","aria-placeholder":this.placeholder,"aria-required":this.required,autocorrect:this.autoCorrect,class:this.getClasses(),disabled:this.disabled,enterkeyhint:this.enterkeyhint,id:t,maxLength:this.maxLength,minlength:this.minLength,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,placeholder:this.placeholder,readonly:this.readonly,required:this.required,rows:this.rows,tabIndex:this.inputTabIndex,value:this.value},this.inheritedAttributes)),this.feedback&&a("modus-wc-input-feedback",{key:"1f7a693c164d3e1475863bb0b3569832362b23ff",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return o(this)}};i.style=".modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}.modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}.modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}.modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-textarea .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-textarea .modus-wc-textarea,[data-theme=modus-classic-dark] modus-wc-textarea .modus-wc-textarea{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-textarea .modus-wc-textarea.modus-wc-textarea-sm,[data-theme=modus-classic-dark] modus-wc-textarea .modus-wc-textarea.modus-wc-textarea-sm{font-size:var(--modus-wc-font-size-sm);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-textarea .modus-wc-textarea.modus-wc-textarea-md,[data-theme=modus-classic-dark] modus-wc-textarea .modus-wc-textarea.modus-wc-textarea-md{font-size:var(--modus-wc-font-size-md);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-textarea .modus-wc-textarea.modus-wc-textarea-lg,[data-theme=modus-classic-dark] modus-wc-textarea .modus-wc-textarea.modus-wc-textarea-lg{font-size:var(--modus-wc-font-size-lg);padding:var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-textarea .modus-wc-textarea:focus,[data-theme=modus-classic-dark] modus-wc-textarea .modus-wc-textarea: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-textarea .modus-wc-textarea:read-only,[data-theme=modus-classic-dark] modus-wc-textarea .modus-wc-textarea:read-only{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-textarea .modus-wc-textarea.modus-wc-textarea-bordered:not(:disabled):not(:focus){border-color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-textarea .modus-wc-textarea:focus{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-textarea .modus-wc-textarea,[data-theme=connect-dark] modus-wc-textarea .modus-wc-textarea{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-textarea .modus-wc-textarea:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-textarea .modus-wc-textarea:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-textarea .modus-wc-textarea:hover,[data-theme=connect-dark] modus-wc-textarea .modus-wc-textarea:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-textarea .modus-wc-textarea:active,[data-theme=connect-dark] modus-wc-textarea .modus-wc-textarea:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-textarea .modus-wc-textarea:focus,[data-theme=connect-dark] modus-wc-textarea .modus-wc-textarea:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-textarea .modus-wc-textarea:focus-within,[data-theme=connect-dark] modus-wc-textarea .modus-wc-textarea:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}";export{i as modus_wc_textarea}