@trimble-oss/moduswebcomponents/modus-wc/p-bba7d975.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 s,g as i}from"./p-dzXW86AR.js";import{i as m}from"./p-B5lx0dpl.js";const c=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.inputMode="numeric",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.inputChange.emit(u)}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel=this.placeholder||"Number input"),this.inheritedAttributes=m(this.el)}getSharedClasses(u){const n=[...u],t=(({bordered:u,feedback:n,readOnly:t,size:s})=>{let i="";return u&&(i=`${i} modus-wc-input-bordered`),n&&(i=`${i} modus-wc-input--${n.level}`),t&&(i=`${i} modus-wc-number-input--readonly`),s&&(i=`${i} modus-wc-input-${s}`),i.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(s,{key:"5aa109ba5732b3300d3513bf834c2192ddd99bc3",class:this.customClass},this.label&&t("modus-wc-input-label",{key:"34df8e30937e2f5b1b41eb1573d787f27f912d6a",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),t("div",{key:"4a33ac8b5778ae3347ec2d02ba32f8344de6805d",class:this.getWrapperClasses()},this.currencySymbol&&t("div",{key:"cfb2f44efd9bb34138ac4ba67ca74248057d09f9",class:this.getCurrencyClasses()},this.currencySymbol),t("input",Object.assign({key:"8896a5468fb061876ff4a732a4a41f29bb4cfa0f","aria-placeholder":this.placeholder,"aria-required":this.required,autocomplete:this.autoComplete,class:this.getInputClasses(),disabled:this.disabled,id:this.inputId,inputmode:this.inputMode,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:"712df77c9fcdc200eae5ea97ca725e179a4e0fe7",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return i(this)}};c.style="modus-wc-input .modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}modus-wc-input .modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}modus-wc-input .modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}modus-wc-input .modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}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}[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)}[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)}[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}";export{c as modus_wc_number_input}