@trimble-oss/moduswebcomponents/modus-wc/p-2f2c6c5d.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 t,c as e,h as s,H as o,g as u}from"./p-dzXW86AR.js";import{i as m,a as i}from"./p-B5lx0dpl.js";import{C as d}from"./p-DRdpe2Q2.js";import{S as c}from"./p-DK-kLq-3.js";const n=class{constructor(s){t(this,s),this.menuFocusout=e(this,"menuFocusout"),this.inheritedAttributes={},this.customClass="",this.orientation="vertical",this.size="md",this.handleFocusout=t=>{this.el.contains(t.relatedTarget)||this.menuFocusout.emit(t)},this.getMenuRole=()=>"horizontal"===this.orientation?"menubar":"menu"}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Menu"),this.inheritedAttributes=m(this.el)}getClasses(){const t=["modus-wc-menu modus-wc-w-full"],e=(({bordered:t,orientation:e,size:s})=>{let o="";return t&&(o=`${o} modus-wc-menu--bordered`),"horizontal"===e&&(o=`${o} modus-wc-menu-horizontal`),s&&(o=`${o} modus-wc-menu-${s}`),o.trim()})({bordered:this.bordered,orientation:this.orientation,size:this.size});return e&&t.push(e),this.customClass&&t.push(this.customClass),t.join(" ")}render(){return s(o,{key:"a58fe5ee56e22e7611a25667a9baf17be84102d2"},s("ul",Object.assign({key:"2ebcd39c19fdddeb5fc37de2ae09d1bc74cdae35","aria-orientation":this.orientation,class:this.getClasses(),onFocusout:this.handleFocusout,role:this.getMenuRole()},this.inheritedAttributes),s("slot",{key:"5bbb14c2127e6df52d59db3577af26d3174bd4d4"})))}get el(){return u(this)}};n.style="modus-wc-menu .modus-wc-menu{border-radius:var(--modus-wc-border-radius-md);list-style:none;margin:0;padding:0;padding-inline-start:0}modus-wc-menu .modus-wc-menu.modus-wc-menu--bordered{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-gray-0)}[data-theme=modus-classic-light] modus-wc-menu .modus-wc-menu,[data-theme=modus-modern-light] modus-wc-menu .modus-wc-menu{background-color:var(--modus-wc-color-white);border-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-dark] modus-wc-menu .modus-wc-menu,[data-theme=modus-modern-dark] modus-wc-menu .modus-wc-menu{background-color:var(--modus-wc-color-black);border-color:var(--modus-wc-color-gray-8)}";const a=class{constructor(s){t(this,s),this.itemSelect=e(this,"itemSelect"),this.inheritedAttributes={},this.customClass="",this.label="",this.size="md",this.value="",this.handleItemSelect=()=>{this.itemSelect.emit({value:this.value})}}componentWillLoad(){this.inheritedAttributes=m(this.el)}getClasses(){const t=["modus-wc-menu-item"],e=(({bordered:t,disabled:e,selected:s,focused:o,size:u})=>{let m="";return t&&(m=`${m} modus-wc-menu-item-bordered`),e&&(m=`${m} modus-wc-menu-item-disabled`),s&&(m=`${m} modus-wc-menu-item-selected`),o&&(m=`${m} modus-wc-menu-item-focused`),u&&(m=`${m} modus-wc-menu-item-${u}`),m.trim()})({bordered:this.bordered,disabled:this.disabled,selected:this.selected,focused:this.focused,size:this.size});return e&&t.push(e),this.customClass&&t.push(this.customClass),t.join(" ")}getIconSize(){switch(this.size){case"sm":return"xs";case"md":default:return"sm";case"lg":return"md"}}render(){return s(o,{key:"57687be825113001277c6262f8e9a68a79f48eb0"},s("li",Object.assign({key:"d283508c2df245b3c5d9c36c38d355c96c41719d","aria-current":this.selected,"aria-disabled":this.disabled,class:this.getClasses(),role:"menuitem"},this.inheritedAttributes),s("button",{key:"78f5a9b41da06c955f4c57ab1574057463045846",disabled:this.disabled,onClick:this.handleItemSelect,type:"button"},s("div",{key:"167e81fa176e156fe6055726454cfb302d27afad",class:"modus-wc-menu-item-content"},this.startIcon&&s("modus-wc-icon",{key:"8915b9c86bfc59e15520190ec4e712e4e00588ff",customClass:"modus-wc-menu-item-start-icon",decorative:!0,name:this.startIcon,size:this.getIconSize()}),s("div",{key:"0a7b9ec715202e093832784951757a7ce5b35fab",class:"modus-wc-menu-item-labels"},s("div",{key:"ff731dc9d04f1a984e25e0b4f7a56e22cce8d307"},this.label),this.subLabel&&s("div",{key:"bf58571b5dfdfb908dc4402401e2231ff23eadde",class:"modus-wc-menu-item-sublabel"},this.subLabel)),this.selected&&s("div",{key:"e84e9dae595a5e2486e44bc34f460fdb534f8b80",class:"modus-wc-menu-item-selected-icon"},s("modus-wc-icon",{key:"cdbdd45dd149269f7e34e806eaf6a6ff6e798d79",decorative:!0,name:"check",size:this.getIconSize()}))))))}get el(){return u(this)}};a.style="modus-wc-menu-item .modus-wc-menu-item button{display:flex;width:100%}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content{display:flex;width:100%}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-start-icon{padding-inline-end:var(--modus-wc-spacing-lg)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-labels{padding-inline-end:var(--modus-wc-spacing-md)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-selected-icon{margin-left:auto}modus-wc-menu-item .modus-wc-menu-item button:where(.modus-wc-menu li:not(.modus-wc-menu-title,.modus-wc-disabled)>:not(ul,details,.modus-wc-menu-title)):not(summary,.modus-wc-active,.modus-wc-btn):focus{border-radius:inherit;color:var(--modus-wc-color-primary-content)}modus-wc-menu-item .modus-wc-menu-item button:where(.modus-wc-menu li:not(.modus-wc-menu-title,.modus-wc-disabled .modus-wc-menu-item-selected)>:not(ul,details,.modus-wc-menu-title)):not(summary,.modus-wc-active,.modus-wc-btn):focus{color:var(--modus-wc-color-primary)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-bordered{border-bottom:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-100);border-radius:0;border-top:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-100)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected{background-color:var(--modus-wc-color-primary);border-radius:inherit;color:var(--modus-wc-color-primary-content)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-disabled{color:var(--modus-wc-color-gray-2)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-disabled button{pointer-events:none}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-sm button{font-size:var(--modus-wc-font-size-sm)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-sm button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-xs)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-md button{font-size:var(--modus-wc-font-size-md)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-md button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-lg button{font-size:var(--modus-wc-font-size-lg)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-lg button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-md)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected>button:focus{color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-disabled{color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-light] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected{background-color:var(--modus-wc-color-blue-pale);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-light] modus-wc-menu-item .modus-wc-menu-item:hover{background-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-light] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-focused{background-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-light] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-bordered{border-bottom:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-gray-9);border-top:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-gray-9)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-disabled{color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected{background-color:rgba(1, 154, 235, 0.3019607843);background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:hover{background-color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-focused{background-color:var(--modus-wc-color-gray-8)}";const r=class{constructor(s){t(this,s),this.inputBlur=e(this,"inputBlur"),this.inputChange=e(this,"inputChange"),this.inputFocus=e(this,"inputFocus"),this.inheritedAttributes={},this.bordered=!0,this.clearAriaLabel="Clear text",this.customClass="",this.disabled=!1,this.includeClear=!1,this.includeSearch=!1,this.inputMode="text",this.placeholder="",this.readOnly=!1,this.required=!1,this.size="md",this.type="text",this.value="",this.handleBlur=t=>{this.inputBlur.emit(t)},this.handleClearText=t=>{this.value="",this.inputChange.emit(t)},this.handleFocus=t=>{this.inputFocus.emit(t)},this.handleInput=t=>{this.value=t.target.value,this.inputChange.emit(t)}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel=this.placeholder||"Text input"),this.inheritedAttributes=Object.assign(Object.assign({},m(this.el)),i(this.el,["spellcheck"]))}getClasses(){const t=["modus-wc-text-input","modus-wc-input","modus-wc-w-full","modus-wc-flex","modus-wc-items-center","modus-wc-gap-1"],e=(({bordered:t,disabled:e,feedback:s,readOnly:o,size:u})=>{let m="";return t&&(m=`${m} modus-wc-input-bordered`),e&&(m=`${m} modus-wc-input-disabled`),s&&(m=`${m} modus-wc-input--${s.level}`),o&&(m=`${m} modus-wc-text-input--readonly`),u&&(m=`${m} modus-wc-input-${u}`),m.trim()})({bordered:this.bordered,disabled:this.disabled,feedback:this.feedback,readOnly:this.readOnly,size:this.size});return e&&t.push(e),this.customClass&&t.push(this.customClass),t.join(" ")}shouldIncludeClear(){return!(!this.includeClear||this.disabled||this.readOnly||!this.value)}render(){const t=this.shouldIncludeClear();return s(o,{key:"225a491ad1bbc58022dbac5eff57dadfa67d05d6"},this.label&&s("modus-wc-input-label",{key:"7c7227cb2367749335fa27e12559032932338e0c",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),s("label",{key:"0e318c5014b0ce6be57e13a802d6f1e8abc1e82a",class:this.getClasses()},this.includeSearch&&s(c,{key:"1594950f6b7d3ff9eb9eebf4f25b45f34adc92b6",className:"modus-wc-text-input-icon modus-wc-text-input-icon-search"}),s("input",Object.assign({key:"2c03d786c145a977223c9b55f7b950d4198163c4","aria-placeholder":this.placeholder,"aria-required":this.required,autocapitalize:this.autoCapitalize,autocomplete:this.autoComplete,autocorrect:this.autoCorrect,class:"modus-wc-grow",disabled:this.disabled,enterkeyhint:this.enterkeyhint,id:this.inputId,inputmode:this.inputMode,maxlength:this.maxLength,minlength:this.minLength,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,pattern:this.pattern,placeholder:this.placeholder,readonly:this.readOnly,required:this.required,tabIndex:this.inputTabIndex,type:this.type,value:this.value},this.inheritedAttributes)),this.includeClear&&s("div",{key:"75b0d64889144521c4dce8234e9dc2eb7204faf2",class:"modus-wc-clear-icon-container "+(t?"modus-wc-clear-icon-visible":"modus-wc-clear-icon-hidden")},s(d,{key:"3178cee439a5a40cb9b69f91440e388bada69065",ariaLabel:this.clearAriaLabel,className:"modus-wc-text-input-icon modus-wc-text-input-icon-clear",decorative:!1,onClear:this.handleClearText}))),this.feedback&&s("modus-wc-input-feedback",{key:"29c94b2e020079e5ac22ee0f55ade295ccf0e725",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return u(this)}};r.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-text-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm .modus-wc-text-input-icon{height:var(--modus-wc-line-height-sm);width:var(--modus-wc-line-height-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md .modus-wc-text-input-icon{height:var(--modus-wc-line-height-md);width:var(--modus-wc-line-height-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg .modus-wc-text-input-icon{height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear{cursor:pointer}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container{align-items:center;display:flex;justify-content:center;min-width:var(--modus-wc-line-height-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container.modus-wc-clear-icon-hidden{pointer-events:none;visibility:hidden}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container.modus-wc-clear-icon-visible{visibility:visible}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm .modus-wc-clear-icon-container{min-width:var(--modus-wc-line-height-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg .modus-wc-clear-icon-container{min-width:var(--modus-wc-line-height-lg)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.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);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.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);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.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);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within{border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear:focus:not(:focus-visible),[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear:focus:not(:focus-visible){outline:none}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-text-input--readonly,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-text-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-bordered:not(:disabled){border-color:var(--modus-wc-color-accent)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-bordered:not(:disabled):focus-within{border-color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon{color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within{border-color:var(--modus-wc-color-highlight-blue)}";export{n as modus_wc_menu,a as modus_wc_menu_item,r as modus_wc_text_input}