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 30.7 kB
import{h as t,F as e,r as o,c as s,H as i,g as u}from"./p-D_4hbGjA.js";import{S as c}from"./p-DLFqJk_p.js";import{K as l,i as d}from"./p-BLBSdonk.js";import{C as a}from"./p-KjNN2AF4.js";function m(e){return t("modus-wc-text-input",Object.assign({bordered:e.bordered&&!e.multiSelect,disabled:e.disabled,includeClear:!e.multiSelect&&e.includeClear,includeSearch:!e.multiSelect&&e.includeSearch,inputId:e.inputId,inputTabIndex:e.inputTabIndex,name:e.name,onClearClick:e.onClear,onInputBlur:e.onBlur,onInputChange:e.onChange,onInputFocus:e.onFocus,placeholder:e.placeholder,readOnly:e.readOnly,required:e.required,size:e.size,value:e.value},e.inheritedAttributes),e.customIconSlot?t("slot",{name:"custom-icon"}):void 0)}function n(o){var s,i,u;if(o.showSpinner)return t("li",null,t("modus-wc-loader",{variant:"spinner",size:o.size}));const l=o.filteredItems||o.items||[],d=(null===(s=o.noResults)||void 0===s?void 0:s.label)||(null===(i=o.noResults)||void 0===i?void 0:i.subLabel)||(null===(u=o.noResults)||void 0===u?void 0:u.ariaLabel);return t(e,null,l.length>0||!d||o.hasSlottedContent?l.map((e=>t("modus-wc-menu-item",{checkbox:e.checkbox,disabled:e.disabled,focused:e.focused,label:e.label,onItemSelect:t=>{t.stopPropagation(),o.onItemSelect(e.value)},onMouseDown:t=>t.preventDefault(),selected:e.selected,"tooltip-content":e.tooltipContent,"tooltip-position":e.tooltipPosition,value:e.value}))):function(e){var o,s,i;return t("div",{class:"modus-wc-autocomplete-no-results"},t("div",{class:"icon-label","aria-label":null===(o=e.noResults)||void 0===o?void 0:o.ariaLabel},t(c,{className:"modus-wc-autocomplete-search-icon"}),t("div",{class:"label"},null===(s=e.noResults)||void 0===s?void 0:s.label)),t("div",{class:"sub-label"},null===(i=e.noResults)||void 0===i?void 0:i.subLabel))}({noResults:o.noResults}))}const h=class{constructor(t){o(this,t),this.chipRemove=s(this,"chipRemove"),this.chipsExpansionChange=s(this,"chipsExpansionChange"),this.clearClick=s(this,"clearClick"),this.inputBlur=s(this,"inputBlur"),this.inputChange=s(this,"inputChange"),this.inputFocus=s(this,"inputFocus"),this.itemSelect=s(this,"itemSelect"),this.menuVisible=!1,this.isChipsExpanded=!1,this.initialNavigation=!0,this.filteredItems=[],this.selectionOrder=[],this.searchText="",this.inheritedAttributes={},this.programmaticOpen=!1,this.isNavigating=!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.maxChips=-1,this.minInputWidth=10,this.handleFocusOutside=t=>{const e=t.relatedTarget;e&&this.el.contains(e)||(this.programmaticOpen||(this.menuVisible=!1),setTimeout((()=>{this.items&&(this.filteredItems=this.items.filter((t=>t.visibleInMenu))),this.inputBlur.emit(t)}),200))},this.handleBlur=t=>{this.customBlur?this.customBlur(t.detail):(t.stopPropagation(),this.initialNavigation=!0,this.items&&(this.items=[...this.items.map((t=>Object.assign(Object.assign({},t),{focused:!1})))]),this.handleFocusOutside(t.detail))},this.handleMenuFocusout=t=>{this.handleFocusOutside(t.detail)},this.handleChange=t=>{t.stopPropagation();const e=function(t,e){if(e.disabled||e.readOnly)return{inputValue:"",shouldShowMenu:!1,updatedItems:e.items,shouldResetNavigation:!1};if(!t.detail||!t.detail.target)return{inputValue:"",shouldShowMenu:!1,updatedItems:e.items,shouldResetNavigation:!1};const o=t.detail.target.value||"";if(e.customInputChange)return e.customInputChange(o),{inputValue:o,shouldShowMenu:!1,updatedItems:void 0,shouldResetNavigation:!1};let s;s=!!e.showMenuOnFocus||o.length>=e.minChars;let i=e.items;return e.items&&(i=[...e.items.map((t=>Object.assign(Object.assign({},t),{focused:!1})))],e.multiSelect||""!==o||(i=[...i.map((t=>Object.assign(Object.assign({},t),{selected:!1})))])),{inputValue:o,shouldShowMenu:s,updatedItems:i,shouldResetNavigation:!!o}}(t,{disabled:this.disabled,readOnly:this.readOnly,customInputChange:this.customInputChange,showMenuOnFocus:this.showMenuOnFocus,minChars:this.minChars,items:this.items,multiSelect:this.multiSelect,debounceMs:this.debounceMs});(e.inputValue||e.shouldShowMenu)&&(this.menuVisible=e.shouldShowMenu,e.updatedItems&&(this.items=e.updatedItems),this.value=e.inputValue,this.searchText=e.inputValue,this.syncFilteredItems(),e.shouldResetNavigation&&(this.initialNavigation=!1),this.debounceMs?this.customInputChange||(this.debounceTimer&&window.clearTimeout(this.debounceTimer),this.debounceTimer=window.setTimeout((()=>{this.inputChange.emit(t.detail)}),this.debounceMs)):this.inputChange.emit(t.detail))},this.handleFocus=t=>{var e,o;t.stopPropagation(),this.disabled||this.readOnly||((null===(e=this.items)||void 0===e?void 0:e.some((t=>t.selected&&t.label===this.value)))&&(this.searchText=""),this.items&&(this.filteredItems=this.items.filter((t=>t.visibleInMenu))),this.showMenuOnFocus&&(this.menuVisible=!0,(null===(o=this.items)||void 0===o?void 0:o.some((t=>t.selected)))&&requestAnimationFrame((()=>{this.scrollToOptionSelected()})))),this.inputFocus.emit(t.detail)},this.handleItemSelectByValue=t=>{var e;if(this.disabled||this.readOnly)return;const o=null===(e=this.items)||void 0===e?void 0:e.find((e=>e.value===t));o&&this.handleItemSelect(o)},this.handleItemSelect=t=>{const e=function(t,e){if(e.disabled||e.readOnly||!e.items)return{updatedItems:e.items,updatedValue:void 0,updatedSelectionOrder:e.selectionOrder,shouldExpandChips:!1,shouldCloseMenu:!1};if(e.customItemSelect)return e.customItemSelect(t),{updatedItems:void 0,updatedValue:void 0,updatedSelectionOrder:e.selectionOrder,shouldExpandChips:!1,shouldCloseMenu:!1};let o,s,i=e.selectionOrder,u=!1;if(e.multiSelect){const c=e.items.find((e=>e.value===t.value)),l=(null==c?void 0:c.selected)||!1,d=e.selectionOrder.includes(t.value);if(l||d)return t.checkbox?(o=[...e.items.map((o=>Object.assign(Object.assign({},o),{selected:o.value!==t.value&&o.selected,focused:!!e.leaveMenuOpen&&o.value===t.value})))],i=e.selectionOrder.filter((e=>e!==t.value)),{updatedItems:o,updatedValue:"",updatedSelectionOrder:i,shouldExpandChips:!1,shouldCloseMenu:!e.leaveMenuOpen}):{updatedItems:e.items,updatedValue:void 0,updatedSelectionOrder:e.selectionOrder,shouldExpandChips:!1,shouldCloseMenu:!e.leaveMenuOpen};o=[...e.items.map((o=>Object.assign(Object.assign({},o),{selected:o.value===t.value||o.selected,focused:!!e.leaveMenuOpen&&o.value===t.value})))],i=[...e.selectionOrder,t.value],s="",e.maxChips&&e.maxChips>0&&i.length>e.maxChips&&(u=!0)}else o=[...e.items.map((o=>Object.assign(Object.assign({},o),{selected:o.value===t.value,focused:!!e.leaveMenuOpen&&o.value===t.value})))],s=t.label;return{updatedItems:o,updatedValue:s,updatedSelectionOrder:i,shouldExpandChips:u,shouldCloseMenu:!e.leaveMenuOpen}}(t,{disabled:this.disabled,readOnly:this.readOnly,items:this.items,multiSelect:this.multiSelect,leaveMenuOpen:this.leaveMenuOpen,selectionOrder:this.selectionOrder,maxChips:this.maxChips,customItemSelect:this.customItemSelect});this.multiSelect&&t.selected&&t.checkbox&&this.handleChipRemove(t),e.updatedItems&&e.updatedItems!==this.items&&(this.items=e.updatedItems),void 0!==e.updatedValue&&(this.value=e.updatedValue),e.updatedSelectionOrder&&(this.selectionOrder=e.updatedSelectionOrder),e.shouldExpandChips&&(this.isChipsExpanded=!0),e.shouldCloseMenu&&(this.menuVisible=!1),this.searchText="",this.items&&(this.filteredItems=this.items.filter((t=>t.visibleInMenu))),this.disabled||this.readOnly||!this.items||(this.initialNavigation=!0,this.itemSelect.emit(t),!this.multiSelect&&this.menuVisible&&this.scrollToOptionSelected())},this.handleChipRemove=t=>{const e=function(t,e){return e.disabled||e.readOnly||!e.items?{updatedItems:e.items,updatedSelectionOrder:e.selectionOrder}:{updatedItems:[...e.items.map((e=>Object.assign(Object.assign({},e),{selected:e.value!==t.value&&e.selected})))],updatedSelectionOrder:e.selectionOrder.filter((e=>e!==t.value))}}(t,{disabled:this.disabled,readOnly:this.readOnly,items:this.items,selectionOrder:this.selectionOrder});e.updatedItems&&(this.items=e.updatedItems,this.selectionOrder=e.updatedSelectionOrder,this.filteredItems=this.items.filter((t=>t.visibleInMenu))),this.disabled||this.readOnly||this.chipRemove.emit(t)},this.handleClearAll=t=>{null==t||t.stopPropagation(),this.clearInput(),this.clearClick.emit()},this.toggleChipsExpansion=()=>{this.leaveMenuOpen&&this.isChipsExpanded&&(this.menuVisible=!1),this.isChipsExpanded=!this.isChipsExpanded,this.chipsExpansionChange.emit({expanded:this.isChipsExpanded})},this.handleOutsideClick=t=>{this.el.contains(t.target)||this.programmaticOpen||(this.menuVisible=!1,this.isChipsExpanded=!1),this.programmaticOpen&&(this.programmaticOpen=!1)}}handleMenuVisibilityChange(){(this.disabled||this.readOnly)&&(this.menuVisible=!1)}handleItemsChange(t,e){if(this.items&&!this.isNavigating&&JSON.stringify(null==t?void 0:t.map((t=>({value:t.value,selected:t.selected,focused:t.focused}))))!==JSON.stringify(null==e?void 0:e.map((t=>({value:t.value,selected:t.selected,focused:t.focused}))))){if(this.multiSelect){const e=this.selectionOrder.filter((e=>t.some((t=>t.value===e&&t.selected)))),o=t.filter((t=>t.selected&&!e.includes(t.value))).map((t=>t.value));this.selectionOrder=[...e,...o]}this.syncFilteredItems()}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Autocomplete input"),this.inheritedAttributes=d(this.el),document.addEventListener("click",this.handleOutsideClick),this.items&&(this.filteredItems=[...this.items],this.selectionOrder=this.items.filter((t=>t.selected)).map((t=>t.value)))}disconnectedCallback(){this.debounceTimer&&window.clearTimeout(this.debounceTimer),document.removeEventListener("click",this.handleOutsideClick)}getClasses(){return function(t){const e=["modus-wc-autocomplete"];return t&&e.push(t),e.join(" ")}(this.customClass)}getMultiSelectClasses(){return["modus-wc-autocomplete-multi-select","modus-wc-input","modus-wc-w-full","modus-wc-flex","modus-wc-items-center","modus-wc-gap-1",(t={bordered:this.bordered,disabled:this.disabled,readOnly:this.readOnly,size:this.size}).bordered&&"modus-wc-input-bordered",t.disabled&&"modus-wc-input-disabled",t.readOnly&&"modus-wc-text-input--readonly",t.size&&`modus-wc-input-${t.size}`,t.bordered&&"modus-wc-autocomplete-multi-select--bordered",t.disabled&&"modus-wc-autocomplete-multi-select--disabled",t.readOnly&&"modus-wc-autocomplete-multi-select--readonly"].filter(Boolean).join(" ");var t}getVisibleItems(){return(null==(t=this.filteredItems)?void 0:t.filter((t=>!t.disabled)))||[];var t}syncFilteredItems(){this.filteredItems=function(t,e,o,s){if(!t)return[];if(o&&t.some((t=>t.selected)))return[...t];if(s)return t.filter((t=>t.visibleInMenu));const i=(null==e?void 0:e.toLowerCase())||"";return t.filter(""===i?t=>t.visibleInMenu:t=>t.visibleInMenu&&t.label.toLowerCase().includes(i))}(this.items,this.searchText,this.leaveMenuOpen,this.customInputChange)}updateItemFocus(t){this.isNavigating=!0;const e=function(t,e){return t?[...t.map((t=>Object.assign(Object.assign({},t),{focused:t.value===e})))]:[]}(this.items,t);e&&(this.items=e,this.searchText?this.syncFilteredItems():this.filteredItems=this.items.filter((t=>t.visibleInMenu))),this.isNavigating=!1}clearAllFocus(){const t=(e=this.items)?[...e.map((t=>Object.assign(Object.assign({},t),{focused:!1})))]:[];var e;t&&(this.items=t,this.filteredItems=this.items.filter((t=>t.visibleInMenu)))}scrollToOptionSelected(){this.multiSelect||requestAnimationFrame((()=>{const t=this.el.querySelector("modus-wc-menu");if(t){const e=t.querySelector(".modus-wc-menu-item-selected"),o=t.querySelector(".modus-wc-menu"),s=o.getBoundingClientRect(),i=e.getBoundingClientRect();(i.top<s.top||i.bottom>s.bottom)&&o.scrollTo({top:Math.max(0,e.offsetTop),behavior:"smooth"})}}))}handleArrowDown(){const t=this.el.querySelector("input");if(!t)return;const e=this.searchText.length>0;this.initialNavigation&&(this.searchText&&(this.searchText=""),this.items&&(this.filteredItems=this.items.filter((t=>t.visibleInMenu)))),function(t){const{showMenuOnFocus:e,minChars:o,inputValue:s,initialNavigation:i,visibleItems:u,onUpdateFocus:c,onSetMenuVisible:l,onSetInitialNavigation:d}=t;if((e||s.length>=o)&&l(!0),i)return void d(!1);const a=u.findIndex((t=>t.focused)),m=a<0?0:Math.min(a+1,u.length-1);if(m>=0&&m<u.length&&u[m]){const t=u[m];t&&t.value&&c(t.value)}}({showMenuOnFocus:this.showMenuOnFocus,minChars:this.minChars,inputValue:t.value,initialNavigation:this.initialNavigation,visibleItems:this.getVisibleItems(),onUpdateFocus:t=>{this.updateItemFocus(t),e||this.searchText||!this.items||(this.filteredItems=this.items.filter((t=>t.visibleInMenu)))},onSetMenuVisible:t=>{var e;this.menuVisible=t,t&&(null===(e=this.items)||void 0===e?void 0:e.some((t=>t.selected)))&&this.scrollToOptionSelected()},onSetInitialNavigation:t=>this.initialNavigation=t})}handleArrowUp(){const t=this.searchText.length>0;!function(t){const{initialNavigation:e,visibleItems:o,onUpdateFocus:s,onSetInitialNavigation:i}=t;if(e)return void i(!1);const u=o.findIndex((t=>t.focused)),c=u<0?o.length-1:Math.max(u-1,0);if(c>=0&&c<o.length&&o[c]){const t=o[c];t&&t.value&&s(t.value)}}({initialNavigation:this.initialNavigation,visibleItems:this.getVisibleItems(),onUpdateFocus:e=>{this.updateItemFocus(e),!t&&this.items&&(this.filteredItems=this.items.filter((t=>t.visibleInMenu)))},onSetInitialNavigation:t=>this.initialNavigation=t})}handleEscape(){this.clearAllFocus(),this.initialNavigation=!0,this.menuVisible=!1,this.searchText=""}handleEnter(){var t,e;const o=this.getVisibleItems().find((t=>t.focused));if(o)this.handleItemSelect(o);else if(this.multiSelect){const e=(null===(t=this.items)||void 0===t?void 0:t.filter((t=>t.selected)))||[],o=e[e.length-1];o&&this.itemSelect.emit(o)}else{const t=null===(e=this.items)||void 0===e?void 0:e.find((t=>t.selected));t&&this.itemSelect.emit(t)}}handleBackspace(t){!function(t,e){var o;if(e.multiSelect&&0===t.value.length&&e.selectionOrder.length>0){const t=e.selectionOrder[e.selectionOrder.length-1],s=null===(o=e.items)||void 0===o?void 0:o.find((e=>e.value===t));s&&e.onChipRemove(s)}}(t,{multiSelect:this.multiSelect,selectionOrder:this.selectionOrder,items:this.items,onChipRemove:t=>this.handleChipRemove(t)})}handleKeyDown(t){const{handled:e,keyLower:o}=function(t,e){if(e.customKeyDown)return e.customKeyDown(t),{handled:!0,keyLower:""};if(e.disabled||e.readOnly)return{handled:!0,keyLower:""};if(!(t.target instanceof HTMLInputElement))return{handled:!0,keyLower:""};const o=t.key.toLowerCase();return[l.ArrowDown,l.ArrowUp,l.Enter,l.Escape].map((t=>t.toLowerCase())).includes(o)&&t.preventDefault(),{handled:!1,keyLower:o}}(t,{disabled:this.disabled,readOnly:this.readOnly,customKeyDown:this.customKeyDown});if(e)return;const s=t.target;switch(o){case l.ArrowDown.toLowerCase():this.handleArrowDown();break;case l.ArrowUp.toLowerCase():this.handleArrowUp();break;case l.Escape.toLowerCase():this.handleEscape();break;case l.Enter.toLowerCase():this.handleEnter();break;case l.Backspace.toLowerCase():this.handleBackspace(s)}}async selectItem(t){return t?this.handleItemSelect(t):(this.selectionOrder=[],this.items&&(this.items=[...this.items.map((t=>Object.assign(Object.assign({},t),{selected:!1})))]),this.value="",this.searchText=""),Promise.resolve()}async openMenu(){return this.programmaticOpen=!0,this.menuVisible=!0,Promise.resolve()}async closeMenu(){return this.programmaticOpen=!1,this.menuVisible=!1,Promise.resolve()}async toggleMenu(){return this.programmaticOpen=!this.menuVisible,this.menuVisible=!this.menuVisible,Promise.resolve()}async focusInput(){const t=this.el.querySelector("input");return t&&t.focus(),Promise.resolve()}async clearInput(){return this.value="",this.searchText="",this.selectionOrder=[],this.items&&(this.items=[...this.items.map((t=>Object.assign(Object.assign({},t),{selected:!1})))],this.filteredItems=[...this.items]),Promise.resolve()}render(){const o={"--modus-autocomplete-min-input-width":`${this.minInputWidth||10}px`},s=!!this.el.querySelector('[slot="menu-items"]'),u=!!this.el.querySelector('[slot="custom-icon"]');return t(i,{key:"dc2a5fd5f67fd8d41b85c6b6a8f0b92aef39549f",class:this.getClasses(),style:o},this.label&&t("modus-wc-input-label",{key:"a1badd85e6f991741d40bd8ef1c48e59b78d086d",forId:this.inputId,labelText:this.label,required:this.required,size:this.size}),this.multiSelect?t("div",{class:this.getMultiSelectClasses()},this.includeSearch&&t(c,{className:"modus-wc-autocomplete-search-icon"}),t("div",{class:"modus-wc-autocomplete-content"},function(o){const s=o.selectionOrder.map((t=>{var e;return null===(e=o.items)||void 0===e?void 0:e.find((e=>e.value===t&&e.selected))})).filter(Boolean);if(0===s.length)return t(e,null);const i=s.slice(0,!o.isChipsExpanded&&o.maxChips&&o.maxChips>0?o.maxChips:s.length);return t(e,null,i.map((e=>t("modus-wc-chip",{"aria-label":"Remove item button",label:e.label,"show-remove":!0,size:"sm",disabled:o.disabled||o.readOnly,onChipRemove:t=>{t.stopPropagation(),o.onChipRemove(e)},variant:"filled"}))))}({selectionOrder:this.selectionOrder,items:this.items,isChipsExpanded:this.isChipsExpanded,maxChips:this.maxChips,disabled:this.disabled,readOnly:this.readOnly,onChipRemove:t=>this.handleChipRemove(t)}),function(e){if(!e.maxChips||e.maxChips<=0||e.isChipsExpanded)return null;const o=e.selectionOrder.length-e.maxChips;return o<=0?null:t("modus-wc-chip",{label:`+${o}`,size:"sm",variant:"filled"})}({selectionOrder:this.selectionOrder,maxChips:this.maxChips,isChipsExpanded:this.isChipsExpanded}),m({bordered:this.bordered,multiSelect:this.multiSelect,disabled:this.disabled,includeClear:this.includeClear,includeSearch:this.includeSearch,inputId:this.inputId,inputTabIndex:this.inputTabIndex,name:this.name,placeholder:this.placeholder,readOnly:this.readOnly,required:this.required,size:this.size,value:this.value,inheritedAttributes:this.inheritedAttributes,customIconSlot:u,onBlur:this.handleBlur,onChange:this.handleChange,onFocus:this.handleFocus})),t("div",{class:"modus-wc-autocomplete-button-container"},(l={includeClear:this.includeClear,disabled:this.disabled,readOnly:this.readOnly,selectionOrder:this.selectionOrder,value:this.value,onClearAll:this.handleClearAll}).includeClear&&!l.disabled&&!l.readOnly&&(l.selectionOrder.length>0||(null!==(h=null===(d=l.value)||void 0===d?void 0:d.length)&&void 0!==h?h:0)>0)?t("modus-wc-button",{onClick:l.onClearAll,variant:"borderless",color:"tertiary","aria-label":"Clear all",disabled:l.disabled||l.readOnly,size:"xs",shape:"circle",type:"button"},t(a,null)):null,function(e){const o=e.selectionOrder.length;return!e.maxChips||e.maxChips<=0||o<=e.maxChips?null:t("modus-wc-button",{"custom-class":"modus-wc-autocomplete-expand-button "+(e.isChipsExpanded?"expanded":""),onClick:e.onToggleExpansion,variant:"borderless",color:"tertiary","aria-label":e.isChipsExpanded?"Collapse chips":`Show ${o-e.maxChips} more`,disabled:e.disabled||e.readOnly,size:"xs",shape:"circle",type:"button"},t("modus-wc-icon",{"aria-label":e.isChipsExpanded?"Collapse chips":"Expand chips",name:e.isChipsExpanded?"caret_up":"caret_down",size:"md"}))}({selectionOrder:this.selectionOrder,maxChips:this.maxChips,isChipsExpanded:this.isChipsExpanded,disabled:this.disabled,readOnly:this.readOnly,onToggleExpansion:this.toggleChipsExpansion}))):t(e,null,m({bordered:this.bordered,multiSelect:this.multiSelect,disabled:this.disabled,includeClear:this.includeClear,includeSearch:this.includeSearch,inputId:this.inputId,inputTabIndex:this.inputTabIndex,name:this.name,placeholder:this.placeholder,readOnly:this.readOnly,required:this.required,size:this.size,value:this.value,inheritedAttributes:this.inheritedAttributes,customIconSlot:u,onBlur:this.handleBlur,onChange:this.handleChange,onClear:this.handleClearAll,onFocus:this.handleFocus})),s?t("modus-wc-menu",{"aria-label":"Autocomplete menu",bordered:this.bordered,class:this.menuVisible?"menu-visible":"menu-hidden",onMenuFocusout:this.handleMenuFocusout,onMouseDown:t=>t.preventDefault(),size:this.size},n({showSpinner:this.showSpinner,size:this.size,filteredItems:this.filteredItems,items:this.items,noResults:this.noResults,hasSlottedContent:s,onItemSelect:this.handleItemSelectByValue}),t("slot",{name:"menu-items"})):this.menuVisible&&t("modus-wc-menu",{"aria-label":"Autocomplete menu",bordered:this.bordered,class:"menu-visible",onMenuFocusout:this.handleMenuFocusout,onMouseDown:t=>t.preventDefault(),size:this.size},n({showSpinner:this.showSpinner,size:this.size,filteredItems:this.filteredItems,items:this.items,noResults:this.noResults,hasSlottedContent:s,onItemSelect:this.handleItemSelectByValue}),t("slot",{name:"menu-items"})));var l,d,h}get el(){return u(this)}static get watchers(){return{disabled:["handleMenuVisibilityChange"],readOnly:["handleMenuVisibilityChange"],items:["handleItemsChange"]}}};h.style="modus-wc-autocomplete.modus-wc-autocomplete{display:inline-block;position:relative;width:100%}modus-wc-autocomplete.modus-wc-autocomplete-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-autocomplete.modus-wc-autocomplete-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-autocomplete.modus-wc-autocomplete-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-autocomplete.modus-wc-autocomplete-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-autocomplete.modus-wc-autocomplete-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-autocomplete.modus-wc-autocomplete modus-wc-loader{display:flex;justify-content:center}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select{align-items:flex-start;background-color:transparent;border-radius:var(--modus-wc-border-radius-md);display:flex;height:auto;min-height:fit-content;padding:var(--modus-wc-spacing-xs)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-search-icon{align-self:center;flex-shrink:0}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select.modus-wc-input-sm .modus-wc-autocomplete-search-icon{height:var(--modus-wc-line-height-sm);width:var(--modus-wc-line-height-sm)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select.modus-wc-input-md .modus-wc-autocomplete-search-icon{height:var(--modus-wc-line-height-md);width:var(--modus-wc-line-height-md)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select.modus-wc-input-lg .modus-wc-autocomplete-search-icon{height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select:focus,modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select:focus-within{box-shadow:none !important;outline:none !important}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content{align-content:flex-start;align-items:center;display:flex;flex:1;flex-wrap:wrap;gap:0.25rem;min-height:fit-content;min-width:0}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-text-input:focus-within{border:none !important}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-button-container{align-items:center;align-self:center;display:none;flex-shrink:0;justify-content:center}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-button-container:not(:empty){display:flex}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-button-container modus-wc-button{align-self:center;display:flex;margin:0}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content modus-wc-chip{align-self:center;flex-shrink:0}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content modus-wc-text-input{align-self:center;flex:1 1 var(--modus-autocomplete-min-input-width, 60px);max-width:100%;min-width:var(--modus-autocomplete-min-input-width, 60px)}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content modus-wc-text-input input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content modus-wc-text-input:only-child{flex:1 1 100%}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-autocomplete-more-indicator{align-items:center;align-self:center;display:flex;flex-shrink:0;height:32px;justify-content:center;padding:0 8px}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-autocomplete-more-indicator .modus-wc-autocomplete-more-text{background-color:var(--modus-wc-color-gray-2);border-radius:var(--modus-wc-border-radius-sm);color:var(--modus-wc-color-text-secondary);font-size:var(--modus-wc-font-size-sm);font-weight:var(--modus-wc-font-weight-medium);padding:4px 8px;text-align:center;white-space:nowrap}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);display:block;left:0;margin-top:var(--modus-wc-spacing-2xs);max-height:320px;overflow:auto;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-text-input-readonly,[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--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{background-color:var(--modus-wc-color-white)}[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-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-autocomplete-multi-select--readonly:focus-within{border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-highlight-blue)}[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-multi-select{background-color:var(--modus-wc-color-gray-10)}[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-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-text-input:focus-within{outline:unset}[data-theme=modus-modern-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu{background-color:var(--modus-wc-color-gray-10)}[data-theme=modus-modern-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-text-input:focus-within{outline:unset}";export{h as modus_wc_autocomplete}