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 4.55 kB
import{r as s,c as t,h as d,H as o,g as i}from"./p-dzXW86AR.js";import{i as u}from"./p-B5lx0dpl.js";const a=class{constructor(d){s(this,d),this.inputBlur=t(this,"inputBlur"),this.inputChange=t(this,"inputChange"),this.inputFocus=t(this,"inputFocus"),this.inheritedAttributes={},this.bordered=!0,this.customClass="",this.disabled=!1,this.readOnly=!1,this.required=!1,this.size="md",this.value="",this.handleBlur=s=>{this.inputBlur.emit(s)},this.handleFocus=s=>{this.inputFocus.emit(s)},this.handleInput=s=>{this.inputChange.emit(s)}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Date input"),this.inheritedAttributes=u(this.el)}getClasses(){const s=["modus-wc-date-input","modus-wc-input","modus-wc-w-full"],t=(({bordered:s,feedback:t,readOnly:d,size:o})=>{let i="";return s&&(i=`${i} modus-wc-input-bordered`),t&&(i=`${i} modus-wc-input--${t.level}`),d&&(i=`${i} modus-wc-date-input--readonly`),o&&(i=`${i} modus-wc-input-${o}`),i.trim()})({bordered:this.bordered,feedback:this.feedback,readOnly:this.readOnly,size:this.size});return t&&s.push(t),this.customClass&&s.push(this.customClass),s.join(" ")}render(){return d(o,{key:"552ce4a1390cce7bac0ef3a40a13262e7d0925d2"},this.label&&d("modus-wc-input-label",{key:"6af148146bd971e4fb2dec3919e28b644a88eae5",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),d("input",Object.assign({key:"99fc9438154e4967154d37e8ce7a225000def803","aria-disabled":this.disabled,class:this.getClasses(),disabled:this.disabled,id:this.inputId,max:this.max,min:this.min,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,readonly:this.readOnly,required:this.required,tabIndex:this.inputTabIndex,type:"date",value:this.value},this.inheritedAttributes)),this.feedback&&d("modus-wc-input-feedback",{key:"6108ca7bc40ca957ca0ee41e0b33ff3a370c98f5",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return i(this)}};a.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-date .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-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-date .modus-wc-date-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-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-date .modus-wc-date-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-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-date .modus-wc-date-input.modus-wc-input:focus,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input:focus{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-date .modus-wc-date-input.modus-wc-input.modus-wc-date-input--readonly,[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input.modus-wc-date-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-date .modus-wc-date-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-date .modus-wc-date-input{color-scheme:dark}[data-theme=modus-classic-dark] modus-wc-date .modus-wc-date-input.modus-wc-input:focus{border-color:var(--modus-wc-color-highlight-blue)}";export{a as modus_wc_date}