@trimble-oss/moduswebcomponents/modus-wc/p-1f179429.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 o,c as t,h as e,F as s,H as c,g as u}from"./p-dzXW86AR.js";import{S as d}from"./p-DK-kLq-3.js";import{i as m,K as l}from"./p-B5lx0dpl.js";const i=class{constructor(e){o(this,e),this.chipRemove=t(this,"chipRemove"),this.inputBlur=t(this,"inputBlur"),this.inputChange=t(this,"inputChange"),this.inputFocus=t(this,"inputFocus"),this.itemSelect=t(this,"itemSelect"),this.inheritedAttributes={},this.menuVisible=!1,this.bordered=!0,this.customClass="",this.debounceMs=300,this.disabled=!1,this.includeClear=!1,this.includeSearch=!1,this.items=[],this.leaveMenuOpen=!1,this.minChars=0,this.multiSelect=!1,this.noResults={ariaLabel:"No results found",label:"No results found",subLabel:"Check spelling or try a different keyword"},this.placeholder="",this.readOnly=!1,this.required=!1,this.showMenuOnFocus=!1,this.size="md",this.showSpinner=!1,this.value="",this.handleBlur=o=>{o.stopPropagation(),setTimeout((()=>{const t=o.detail.relatedTarget;t&&this.el.contains(t)||(this.menuVisible=!1,this.inputBlur.emit(o.detail))}),200)},this.handleMenuFocusout=o=>{setTimeout((()=>{const t=o.detail.relatedTarget;t&&this.el.contains(t)||(this.menuVisible=!1,this.inputBlur.emit(o.detail))}),200)},this.handleChange=o=>{this.menuVisible=!!this.showMenuOnFocus||o.detail.target.value.length>=this.minChars,this.debounceTimer&&window.clearTimeout(this.debounceTimer),this.debounceMs?this.debounceTimer=window.setTimeout((()=>{this.inputChange.emit(o.detail)}),this.debounceMs):this.inputChange.emit(o.detail)},this.handleFocus=o=>{this.showMenuOnFocus&&(this.menuVisible=!0),this.inputFocus.emit(o.detail)},this.handleItemSelect=o=>{this.disabled||this.readOnly||(this.menuVisible=!!this.leaveMenuOpen,this.itemSelect.emit(o))},this.handleChipRemove=o=>{this.disabled||this.readOnly||this.chipRemove.emit(o)},this.handleOutsideClick=o=>{this.el.contains(o.target)||(this.menuVisible=!1)}}handleMenuVisibilityChange(){(this.disabled||this.readOnly)&&(this.menuVisible=!1)}disconnectedCallback(){this.debounceTimer&&window.clearTimeout(this.debounceTimer),document.removeEventListener("click",this.handleOutsideClick)}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Autocomplete input"),this.inheritedAttributes=m(this.el),document.addEventListener("click",this.handleOutsideClick)}getClasses(){const o=["modus-wc-autocomplete"];return this.customClass&&o.push(this.customClass),o.join(" ")}getMultiSelectClasses(){return["modus-wc-autocomplete-multi-select",this.bordered&&"modus-wc-autocomplete-multi-select--bordered",this.disabled&&"modus-wc-autocomplete-multi-select--disabled",this.readOnly&&"modus-wc-autocomplete-multi-select--readonly"].filter(Boolean).join(" ")}handleKeyDown(o){var t;if(!(o.target instanceof HTMLInputElement))return;const e=o.target;switch(o.key){case l.ArrowDown:o.preventDefault(),(this.showMenuOnFocus||e.value.length>=this.minChars)&&(this.menuVisible=!0);break;case l.Backspace:if(this.multiSelect&&0===e.value.length){let o=[];this.items&&(o=this.items.filter((o=>o.selected)));const t=o[o.length-1];t&&this.chipRemove.emit(t)}break;case l.Escape:o.preventDefault(),this.menuVisible=!1;break;case l.Enter:if(o.preventDefault(),this.multiSelect){let o=[];this.items&&(o=this.items.filter((o=>o.selected)));const t=o[o.length-1];t&&this.itemSelect.emit(t)}else{const o=null===(t=this.items)||void 0===t?void 0:t.find((o=>o.selected));o&&this.itemSelect.emit(o)}this.menuVisible&&!this.leaveMenuOpen&&(this.menuVisible=!1)}}renderNoResults(){var o,t,s;return e("div",{class:"modus-wc-autocomplete-no-results"},e("div",{class:"icon-label","aria-label":null===(o=this.noResults)||void 0===o?void 0:o.ariaLabel},e(d,{className:"modus-wc-autocomplete-search-icon"}),e("div",{class:"label"},null===(t=this.noResults)||void 0===t?void 0:t.label)),e("div",{class:"sub-label"},null===(s=this.noResults)||void 0===s?void 0:s.subLabel))}render(){const o=()=>e("modus-wc-text-input",Object.assign({bordered:this.bordered&&!this.multiSelect,disabled:this.disabled,includeClear:this.includeClear,includeSearch:this.includeSearch,inputId:this.inputId,inputTabIndex:this.inputTabIndex,name:this.name,onInputBlur:this.handleBlur,onInputChange:this.handleChange,onInputFocus:this.handleFocus,placeholder:this.placeholder,readOnly:this.readOnly,required:this.required,size:this.size,value:this.value},this.inheritedAttributes));return e(c,{class:this.getClasses()},this.label&&e("modus-wc-input-label",{forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),this.multiSelect?e("div",{class:this.getMultiSelectClasses()},(()=>{var o;const t=null===(o=this.items)||void 0===o?void 0:o.filter((o=>o.selected));return e(s,null,null==t?void 0:t.map((o=>e("modus-wc-chip",{"aria-label":"Remove item button",label:o.label,"show-remove":!0,size:"sm",disabled:this.disabled||this.readOnly,onChipRemove:()=>this.handleChipRemove(o),variant:"filled"}))))})(),o()):e(s,null,o()),e("modus-wc-menu",{"aria-label":"Autocomplete menu",bordered:this.bordered,class:this.menuVisible?"menu-visible":" menu-hidden",onMenuFocusout:this.handleMenuFocusout,size:this.size},(()=>{var o,t,c,u;if(this.showSpinner)return e("li",null,e("modus-wc-loader",{variant:"spinner",size:this.size}));const d=(null===(o=this.items)||void 0===o?void 0:o.filter((o=>o.visibleInMenu)))||[],m=(null===(t=this.noResults)||void 0===t?void 0:t.label)||(null===(c=this.noResults)||void 0===c?void 0:c.subLabel)||(null===(u=this.noResults)||void 0===u?void 0:u.ariaLabel);return e(s,null,(null==d?void 0:d.length)>0||!m?d.map((o=>e("modus-wc-menu-item",{disabled:o.disabled,focused:o.focused,label:o.label,onItemSelect:()=>this.handleItemSelect(o),selected:o.selected,value:o.value}))):this.renderNoResults())})(),e("slot",{name:"menu-items"})))}get el(){return u(this)}static get watchers(){return{disabled:["handleMenuVisibilityChange"],readOnly:["handleMenuVisibilityChange"]}}};i.style="modus-wc-autocomplete.modus-wc-autocomplete{display:inline-block;position:relative;width:100%}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}modus-wc-autocomplete.modus-wc-autocomplete modus-wc-loader{display:flex;justify-content:center}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-input-bordered{border-radius:var(--modus-wc-border-radius-md)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select{align-items:center;display:flex;flex-wrap:wrap;gap:0.5rem;padding:var(--modus-wc-spacing-xs);}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select.modus-wc-autocomplete-multi-select--bordered{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-gray-0);border-radius:var(--modus-wc-border-radius-md) var(--modus-wc-border-radius-md) 0 0}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .chip{align-items:center;background-color:var(--modus-wc-color-gray-1);border-radius:var(--modus-wc-border-radius-xl);display:flex}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .chip button i{font-size:0.75rem}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .chip .label{font-size:var(--modus-wc-font-size-md);padding:0 var(--modus-wc-spacing-xs)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu{border-radius:0 0 var(--modus-wc-border-radius-md) var(--modus-wc-border-radius-md);left:0;margin-top:var(--modus-wc-spacing-2xs);position:absolute;top:100%;z-index:99}modus-wc-autocomplete.modus-wc-autocomplete .menu-hidden{display:none}modus-wc-autocomplete.modus-wc-autocomplete .menu-visible{display:block}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results{padding:var(--modus-wc-spacing-md)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .icon-label{align-items:center;display:flex;justify-content:center}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .icon-label .modus-wc-autocomplete-search-icon{color:var(--modus-wc-color-gray-6);height:1.5rem;width:1.5rem}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .icon-label .label{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold);margin-inline-start:var(--modus-wc-spacing-xs)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .sub-label{color:var(--modus-wc-color-gray-7);font-size:var(--modus-wc-font-size-sm);text-align:center}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--bordered,[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--bordered{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-gray-6)}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--bordered:focus-within,[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--bordered:focus-within{border-color:var(--modus-wc-color-highlight-blue);border-width:var(--modus-wc-border-width-sm)}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete ul.modus-wc-menu,[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete ul.modus-wc-menu{box-shadow:0 0 4px 0 rgba(54, 53, 69, 0.3)}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-input-disabled,[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-text-input-readonly,[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-input-disabled,[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-text-input-readonly{background-color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--disabled,[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--disabled{cursor:not-allowed;opacity:0.6;user-select:none}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--disabled .modus-wc-input-disabled,[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--disabled .modus-wc-input-disabled{border:none}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--readonly .modus-wc-text-input-readonly,[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--readonly .modus-wc-text-input-readonly{border:none}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--disabled,[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-input-disabled,[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--readonly,[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-text-input-readonly{background-color:var(--modus-wc-color-gray-0);border:none}[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu{background-color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .sub-label{color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu{background-color:var(--modus-wc-color-gray-10)}[data-theme=modus-modern-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu{background-color:var(--modus-wc-color-white)}[data-theme=modus-modern-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu{background-color:var(--modus-wc-color-gray-10)}";export{i as modus_wc_autocomplete}