@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 • 17.1 kB
JavaScript
import{r as u,d as n,h as t,e as m,g as s}from"./p-C1-Dpkp7.js";import{h as i}from"./p-tWS3Egrk.js";import{c as e,i as c,a as o}from"./p-DJ2rBB6r.js";const d=class{constructor(t){u(this,t),this.inputBlur=n(this,"inputBlur",7),this.inputChange=n(this,"inputChange",7),this.inputFocus=n(this,"inputFocus",7),this.inheritedAttributes={},this.resolveEffectiveId=e(),this.bordered=!0,this.currencySymbol="",this.customClass="",this.disabled=!1,this.placeholder="",this.readOnly=!1,this.required=!1,this.size="md",this.type="number",this.value="",this.handleBlur=u=>{this.inputBlur.emit(u)},this.handleFocus=u=>{this.inputFocus.emit(u)},this.handleInput=u=>{this.value=u.target.value,this.inputChange.emit(u)}}componentWillLoad(){i(this.el),this.el.ariaLabel||(this.el.ariaLabel=this.placeholder||"Number input"),this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),o(this.el,["inputmode"])),this.el.hasAttribute("inputmode")||this.inheritedAttributes.inputmode||this.el.setAttribute("inputmode","numeric")}getSharedClasses(u){const n=[...u],t=(({bordered:u,feedback:n,readOnly:t,size:m})=>{let s="";return u&&(s=`${s} modus-wc-input-bordered`),n&&(s=`${s} modus-wc-input--${n.level}`),t&&(s=`${s} modus-wc-number-input--readonly`),m&&(s=`${s} modus-wc-input-${m}`),s.trim()})({bordered:this.bordered,feedback:this.feedback,readOnly:this.readOnly,size:this.size});return t&&n.push(t),n.join(" ")}getInputClasses(){const u=["modus-wc-number-input","modus-wc-input","modus-wc-w-full"];return this.currencySymbol&&u.push("modus-wc-join-item"),this.getSharedClasses(u)}getCurrencyClasses(){return this.getSharedClasses(["modus-wc-input-currency","modus-wc-join-item","modus-wc-flex","modus-wc-items-center"])}getWrapperClasses(){const u=["modus-wc-number-input-container"];return this.currencySymbol&&(u.push("modus-wc-join"),u.push("modus-wc-flex")),u.join(" ")}render(){const u=this.resolveEffectiveId(this.inputId);return t(m,{key:"3bee967ed3cbf0f0c0f25bddf736f00f00222e0f",class:this.customClass},this.label&&t("modus-wc-input-label",{key:"b7d7aedd7166bf1493adfc44e016846fda8d8308",forId:u,labelText:this.label,required:this.required,size:this.size}),t("div",{key:"15971cadae9af0a53a7ba7e58139780aed553308",class:this.getWrapperClasses()},this.currencySymbol&&t("div",{key:"0ce7ab7c2ba89bfbdd4f2e575b2981441a8850a4",class:this.getCurrencyClasses()},this.currencySymbol),t("input",Object.assign({key:"c47bb8d6eea859c36f30d2830452102f7da51ddf","aria-required":this.required,autocomplete:this.autoComplete,class:this.getInputClasses(),disabled:this.disabled,id:u,max:this.max,min:this.min,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,placeholder:this.placeholder,readonly:this.readOnly,required:this.required,step:this.step,tabIndex:this.inputTabIndex,type:this.type,value:this.value},this.inheritedAttributes))),this.feedback&&t("modus-wc-input-feedback",{key:"09779ff9c183fd5e2181b4a9a76f77c76eebae52",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return s(this)}};d.style="modus-wc-number-input .modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}modus-wc-number-input .modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}modus-wc-number-input .modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}modus-wc-number-input .modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-number-input .modus-wc-input-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-number-input .modus-wc-input-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-number-input .modus-wc-input-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-number-input .modus-wc-input-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-number-input .modus-wc-input-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-number-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency{background-color:var(--modus-wc-color-base-page);border:var(--modus-wc-border-width-xs) solid transparent;color:var(--modus-wc-color-base-content);white-space:nowrap}modus-wc-number-input .modus-wc-number-input,modus-wc-number-input modus-wc-select{background-color:var(--modus-wc-color-base-page)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency{background-color:var(--modus-wc-color-base-page);border:var(--modus-wc-border-width-xs) solid transparent;color:var(--modus-wc-color-base-content);white-space:nowrap}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm{padding:0 var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md{padding:0 var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg{padding:0 var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-sm{padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs);padding-inline-end:0}@supports (-moz-appearance: none){[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-sm{padding-inline-end:unset}}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-md{padding:var(--modus-wc-spacing-sm);padding-inline-end:var(--modus-wc-spacing-lg)}@supports (-moz-appearance: none){[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-md{padding-inline-end:unset}}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-lg{padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm);padding-inline-end:var(--modus-wc-spacing-xl)}@supports (-moz-appearance: none){[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-input-lg{padding-inline-end:unset}}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input:focus,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input:focus{border-color:var(--modus-wc-color-highlight-blue);border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-number-input--readonly,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input.modus-wc-number-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input::-webkit-outer-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency::-webkit-outer-spin-button{margin-bottom:auto;margin-top:auto}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.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)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm::-webkit-outer-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-sm::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-sm::-webkit-outer-spin-button{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.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)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md::-webkit-outer-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-md::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-md::-webkit-outer-spin-button{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.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)}[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg::-webkit-outer-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg::-webkit-inner-spin-button,[data-theme=modus-classic-light] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-number-input.modus-wc-input-lg::-webkit-outer-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg::-webkit-inner-spin-button,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency.modus-wc-input-lg::-webkit-outer-spin-button{font-size:var(--modus-wc-font-size-lg);height:3rem}[data-theme=connect-light] modus-wc-number-input .modus-wc-number-input,[data-theme=connect-dark] modus-wc-number-input .modus-wc-number-input{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-number-input .modus-wc-number-input:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-number-input .modus-wc-number-input:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-number-input .modus-wc-number-input:hover,[data-theme=connect-dark] modus-wc-number-input .modus-wc-number-input:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-number-input .modus-wc-number-input:active,[data-theme=connect-dark] modus-wc-number-input .modus-wc-number-input:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-number-input .modus-wc-number-input:focus,[data-theme=connect-dark] modus-wc-number-input .modus-wc-number-input:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-number-input .modus-wc-number-input:focus-within,[data-theme=connect-dark] modus-wc-number-input .modus-wc-number-input:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}";export{d as modus_wc_number_input}