@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.34 kB
JavaScript
import{r as t,c as s,h as i,H as u,g as o}from"./p-D5XAQERj.js";import{g as d,i as m}from"./p-DlW2F98o.js";const c=class{constructor(i){t(this,i),this.inputBlur=s(this,"inputBlur"),this.inputChange=s(this,"inputChange"),this.inputFocus=s(this,"inputFocus"),this.inheritedAttributes={},this.bordered=!0,this.customClass="",this.datalistOptions=[],this.disabled=!1,this.readOnly=!1,this.required=!1,this.showSeconds=!1,this.size="md",this.value="",this.handleBlur=t=>{this.inputBlur.emit(t)},this.handleFocus=t=>{this.inputFocus.emit(t)},this.handleInput=t=>{this.inputChange.emit(t)},this.internalDatalistId=`modus-wc-datalist-${d(10)}`}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Time input"),this.datalistId||(this.datalistId=this.internalDatalistId),this.inheritedAttributes=m(this.el)}getClasses(){const t=["modus-wc-time-input","modus-wc-input","modus-wc-w-full"],s=(({bordered:t,feedback:s,readOnly:i,size:u})=>{let o="";return t&&(o=`${o} modus-wc-input-bordered`),s&&(o=`${o} modus-wc-input--${s.level}`),i&&(o=`${o} modus-wc-time-input--readonly`),u&&(o=`${o} modus-wc-input-${u}`),o.trim()})({bordered:this.bordered,feedback:this.feedback,readOnly:this.readOnly,size:this.size});return s&&t.push(s),this.customClass&&t.push(this.customClass),t.join(" ")}renderDatalist(){return 0===this.datalistOptions.length||this.datalistId!==this.internalDatalistId?null:i("datalist",{id:this.internalDatalistId},this.datalistOptions.map((t=>i("option",{value:t}))))}render(){return i(u,{key:"8c8e1b589d39e62e9b83e316f9738aedc6ebf7b2"},this.label&&i("modus-wc-input-label",{key:"fc4cbc6467da2421f688a8741122135dc4c78446",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),i("input",Object.assign({key:"9b09a9b1e50658d64e3641258c60c91a04593f81","aria-required":this.required,autocomplete:this.autoComplete,class:this.getClasses(),disabled:this.disabled,id:this.inputId,list:this.datalistId,max:this.max,min:this.min,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,readonly:this.readOnly,required:this.required,step:this.step||this.showSeconds?1:60,tabIndex:this.inputTabIndex,type:"time",value:this.value},this.inheritedAttributes)),this.renderDatalist(),this.feedback&&i("modus-wc-input-feedback",{key:"34f1d83cf3e936002d100343510a6df1ca61fe0a",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return o(this)}};c.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-time-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus,[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus-within,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus-within{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-time-input .modus-wc-time-input.modus-wc-input.modus-wc-time-input--readonly,[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-time-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-time-input .modus-wc-time-input.modus-wc-input.modus-wc-input-bordered:not(:disabled):not(:focus){border-color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input{color-scheme:dark}[data-theme=modus-classic-dark] modus-wc-time-input .modus-wc-time-input.modus-wc-input:focus{border-color:var(--modus-wc-color-highlight-blue)}";export{c as modus_wc_time_input}