@trimble-oss/moduswebcomponents/modus-wc/p-368ad8fb.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 u,c as n,h as t,H as m,g as s}from"./p-D_4hbGjA.js";import{i,b as c}from"./p-BLBSdonk.js";const e=class{constructor(t){u(this,t),this.inputBlur=n(this,"inputBlur"),this.inputChange=n(this,"inputChange"),this.inputFocus=n(this,"inputFocus"),this.inheritedAttributes={},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(){this.el.ariaLabel||(this.el.ariaLabel=this.placeholder||"Number input"),this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),c(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(){return t(m,{key:"60338dd4a91fc00b3b12e1a2e487cbc3b95c2484",class:this.customClass},this.label&&t("modus-wc-input-label",{key:"f9b335e9b6acaeabfa25fc1cb0787be5948005f2",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),t("div",{key:"4c5c5827ee4acd2108c3b08e6473b4496f33ffda",class:this.getWrapperClasses()},this.currencySymbol&&t("div",{key:"6c5cda016a2d20cb1d2b6eafe744f72ac8003bec",class:this.getCurrencyClasses()},this.currencySymbol),t("input",Object.assign({key:"29b192e462534421be65b321a701891f7b9b6367","aria-required":this.required,autocomplete:this.autoComplete,class:this.getInputClasses(),disabled:this.disabled,id:this.inputId,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:"9f0668534f309fb3c14e754afe16e73f0e827074",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return s(this)}};e.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-100);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,[data-theme=modus-classic-dark] modus-wc-number-input .modus-wc-number-input-container .modus-wc-input-currency{background-color:var(--modus-wc-color-gray-2);border:var(--modus-wc-border-width-xs) solid transparent;color:var(--modus-wc-color-trimble-gray);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{e as modus_wc_number_input}