@trimble-oss/moduswebcomponents/modus-wc/p-73695a7e.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-D5XAQERj.js";import{i as m,a as i}from"./p-DlW2F98o.js";import{C as c}from"./p-CXrnmYJx.js";import{S as d}from"./p-Do48XMsP.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:"a966dcdb4ee793f76ed1b4d768a10feac67b4348"},s("ul",Object.assign({key:"10ea9a00e23bf2e1123ba2ceef274f4bf5ad0bee","aria-orientation":this.orientation,class:this.getClasses(),onFocusout:this.handleFocusout,role:this.getMenuRole()},this.inheritedAttributes),s("slot",{key:"cae15f842402b499d55d4ba4933ac242a35369a4"})))}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:"fd719f2305c5110988bbd90a779bfa66d7323e4a"},s("li",Object.assign({key:"be5c04c09a01bf280dd64741838c70bf45f2bd21","aria-current":this.selected,"aria-disabled":this.disabled,class:this.getClasses(),role:"menuitem"},this.inheritedAttributes),s("button",{key:"4835f6eb563f33dc6002455e59b24896d198dea1",disabled:this.disabled,onClick:this.handleItemSelect,type:"button"},s("div",{key:"5f623d94f11bd93dd767e0a91eff68c44e7217bf",class:"modus-wc-menu-item-content"},s("slot",{key:"ab0bc22f29b5a78e10abef45a457b2101ceb501a",name:"start-icon"}),s("div",{key:"5a7e8e354f9ad4ca0b7e2f511b1183b458d1a7aa",class:"modus-wc-menu-item-labels"},s("div",{key:"841d492cd5b76ffd7bafe82775fae7d3b7c55ce2"},this.label),this.subLabel&&s("div",{key:"f562ff5113884e0941f3acdc4620842ec4fca3a0",class:"modus-wc-menu-item-sublabel"},this.subLabel)),this.selected&&s("div",{key:"e895a43b61059cd52df441c537ae4fd3c582daad",class:"modus-wc-menu-item-selected-icon"},s("modus-wc-icon",{key:"ec073d37b00c479ada6c7bd0a6a7fe9199d5b9ac",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 [slot=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:"67083501fce3d5d0ffc136c8ef9d5ecbc84bc89b"},this.label&&s("modus-wc-input-label",{key:"fc96bc443d4246620f5f1c85d046e6f4a7f50917",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),s("label",{key:"4f83b07d3847e0ae0a34c1c645d7c163bde2da92",class:this.getClasses()},this.includeSearch&&s(d,{key:"3151ec9863d28fa62043ecbcb8cb40ecf69083bb",className:"modus-wc-text-input-icon modus-wc-text-input-icon-search"}),s("input",Object.assign({key:"6a0b561925bbe100eec8d85bf94b66fc47183260","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:"340410881c6ff48765eb25000815c962da835550",class:"modus-wc-clear-icon-container "+(t?"modus-wc-clear-icon-visible":"modus-wc-clear-icon-hidden")},s(c,{key:"e944f8a2dd0444ca6944bc57aec3f89497ae67fe",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:"8825e88f6cbac14ad072c0988a05604426e1827b",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}