UNPKG

@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 7.19 kB
import{r as t,d as i,h as s,e as o,g as u}from"./p-C1-Dpkp7.js";import{h as m}from"./p-tWS3Egrk.js";import{c as d,g as e,i as c}from"./p-DJ2rBB6r.js";const n=class{constructor(s){t(this,s),this.inputBlur=i(this,"inputBlur",7),this.inputChange=i(this,"inputChange",7),this.inputFocus=i(this,"inputFocus",7),this.inheritedAttributes={},this.resolveEffectiveId=d(),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-${e(10)}`}componentWillLoad(){m(this.el),this.el.ariaLabel||(this.el.ariaLabel="Time input"),this.datalistId||(this.datalistId=this.internalDatalistId),this.inheritedAttributes=c(this.el)}getClasses(){const t=["modus-wc-time-input","modus-wc-input","modus-wc-w-full"],i=(({bordered:t,feedback:i,readOnly:s,size:o})=>{let u="";return t&&(u=`${u} modus-wc-input-bordered`),i&&(u=`${u} modus-wc-input--${i.level}`),s&&(u=`${u} modus-wc-time-input--readonly`),o&&(u=`${u} modus-wc-input-${o}`),u.trim()})({bordered:this.bordered,feedback:this.feedback,readOnly:this.readOnly,size:this.size});return i&&t.push(i),this.customClass&&t.push(this.customClass),t.join(" ")}renderDatalist(){return 0===this.datalistOptions.length||this.datalistId!==this.internalDatalistId?null:s("datalist",{id:this.internalDatalistId},this.datalistOptions.map((t=>s("option",{value:t}))))}render(){const t=this.resolveEffectiveId(this.inputId);return s(o,{key:"7d45e1fb7b3165101f753064ae7854e0e61c69ce"},this.label&&s("modus-wc-input-label",{key:"a8f11698077da319fb0e00f3da46f86429a674f0",forId:t,labelText:this.label,required:this.required,size:this.size}),s("input",Object.assign({key:"b1e5c4979fdea6bcaccbff950edfce2624fa1df7","aria-required":this.required,autocomplete:this.autoComplete,class:this.getClasses(),disabled:this.disabled,id:t,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&&s("modus-wc-input-feedback",{key:"a0b4ca7cadb46646ccf5cf36aa0b7d6ac6259779",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return u(this)}};n.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-input-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}.modus-wc-input-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}.modus-wc-input-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}.modus-wc-input-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}.modus-wc-input-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}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)}[data-theme=connect-light] modus-wc-time-input .modus-wc-time-input,[data-theme=connect-dark] modus-wc-time-input .modus-wc-time-input{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-time-input .modus-wc-time-input:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-time-input .modus-wc-time-input:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-time-input .modus-wc-time-input:hover,[data-theme=connect-dark] modus-wc-time-input .modus-wc-time-input:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-time-input .modus-wc-time-input:active,[data-theme=connect-dark] modus-wc-time-input .modus-wc-time-input:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-time-input .modus-wc-time-input:focus,[data-theme=connect-dark] modus-wc-time-input .modus-wc-time-input:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-time-input .modus-wc-time-input:focus-within,[data-theme=connect-dark] modus-wc-time-input .modus-wc-time-input:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}";export{n as modus_wc_time_input}