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 33.3 kB
import{h as t,F as e,r as o,d as s,e as i,g as c}from"./p-C1-Dpkp7.js";import{S as u}from"./p-CWDD4hEM.js";import{h as l}from"./p-tWS3Egrk.js";import{K as d,c as a,i as m}from"./p-DJ2rBB6r.js";import{C as n}from"./p-3NVr0erJ.js";function h(e){return t("modus-wc-text-input",Object.assign({autoComplete:e.autoComplete,bordered:e.bordered&&!e.multiSelect,customClass:e.customClass,disabled:e.disabled,feedback:e.multiSelect?void 0:e.feedback,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 r(o){var s,i,c;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===(c=o.noResults)||void 0===c?void 0:c.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(u,{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 p=class{constructor(t){o(this,t),this.chipRemove=s(this,"chipRemove",7),this.chipsExpansionChange=s(this,"chipsExpansionChange",7),this.clearClick=s(this,"clearClick",7),this.inputBlur=s(this,"inputBlur",7),this.inputChange=s(this,"inputChange",7),this.inputFocus=s(this,"inputFocus",7),this.itemSelect=s(this,"itemSelect",7),this.menuVisible=!1,this.isChipsExpanded=!1,this.initialNavigation=!0,this.filteredItems=[],this.selectionOrder=[],this.searchText="",this.showFeedback=!0,this.resolveEffectiveId=a(),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,o=t.composedPath&&t.composedPath();e&&(this.el.contains(e)||o&&o.includes(this.el))||(this.programmaticOpen||(this.menuVisible=!1,this.showFeedback=!0),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.menuVisible&&(this.showFeedback=!1),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,this.showFeedback=!1,(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,c=!1;if(e.multiSelect){const u=e.items.find((e=>e.value===t.value)),l=(null==u?void 0:u.selected)||!1,d=e.selectionOrder.includes(t.value);if(l||d)return t.checkbox?(o=[...e.items.map((e=>Object.assign(Object.assign({},e),{selected:e.value!==t.value&&e.selected,focused:!1})))],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((e=>Object.assign(Object.assign({},e),{selected:e.value===t.value||e.selected,focused:!1})))],i=[...e.selectionOrder,t.value],s="",e.maxChips&&e.maxChips>0&&i.length>e.maxChips&&(c=!0)}else o=[...e.items.map((e=>Object.assign(Object.assign({},e),{selected:e.value===t.value,focused:!1})))],s=t.label;return{updatedItems:o,updatedValue:s,updatedSelectionOrder:i,shouldExpandChips:c,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.showFeedback=!0),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.showFeedback=!0),this.isChipsExpanded=!this.isChipsExpanded,this.chipsExpansionChange.emit({expanded:this.isChipsExpanded})},this.handleOutsideClick=t=>{t.composedPath().includes(this.el)||this.programmaticOpen||(this.menuVisible=!1,this.showFeedback=!0,this.isChipsExpanded=!1),this.programmaticOpen&&(this.programmaticOpen=!1)}}handleMenuVisibilityChange(){(this.disabled||this.readOnly)&&(this.menuVisible=!1,this.showFeedback=!0)}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(){l(this.el),this.el.ariaLabel||(this.el.ariaLabel="Autocomplete input"),this.inheritedAttributes=m(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,feedback:this.showFeedback||this.menuVisible?this.feedback:void 0,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",t.feedback&&`modus-wc-autocomplete-multi-select--${t.feedback.level}`].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)))}scrollMenuItemIntoView(t,e,o){requestAnimationFrame((()=>{const s=this.el.querySelector("modus-wc-menu");if(!s)return;const i=s.querySelector(t),c=s.querySelector(".modus-wc-menu");if(!i||!c)return;const u=c.getBoundingClientRect(),l=i.getBoundingClientRect(),d=l.bottom>u.bottom;(l.top<u.top||d)&&c.scrollTo({top:Math.max(0,"auto"===e&&d?i.offsetTop+i.offsetHeight-c.clientHeight:i.offsetTop),behavior:o})}))}scrollToOptionSelected(){this.multiSelect||this.scrollMenuItemIntoView(".modus-wc-menu-item-active","top","smooth")}scrollFocusedIntoView(){this.scrollMenuItemIntoView(".modus-wc-menu-item-focused","auto","auto")}handleArrowDown(){const t=this.el.querySelector("input");if(!t)return;const e=this.searchText.length>0,o=this.menuVisible;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:c,onUpdateFocus:u,onSetMenuVisible:l,onSetInitialNavigation:d}=t;if((e||s.length>=o)&&l(!0),i)return void d(!1);const a=c.findIndex((t=>t.focused)),m=a<0?0:Math.min(a+1,c.length-1);if(m>=0&&m<c.length&&c[m]){const t=c[m];t&&t.value&&u(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))),this.scrollFocusedIntoView()},onSetMenuVisible:t=>{var e;this.menuVisible=t,t&&!o&&(null===(e=this.items)||void 0===e?void 0:e.some((t=>t.selected)))?(this.scrollToOptionSelected(),this.showFeedback=!1):t&&(this.showFeedback=!1)},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 c=o.findIndex((t=>t.focused)),u=c<0?o.length-1:Math.max(c-1,0);if(u>=0&&u<o.length&&o[u]){const t=o[u];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))),this.scrollFocusedIntoView()},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)}),this.menuVisible&&(this.showFeedback=!1)}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[d.ArrowDown,d.ArrowUp,d.Enter,d.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 d.ArrowDown.toLowerCase():this.handleArrowDown();break;case d.ArrowUp.toLowerCase():this.handleArrowUp();break;case d.Escape.toLowerCase():this.handleEscape();break;case d.Enter.toLowerCase():this.handleEnter();break;case d.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,this.showFeedback=!0,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=this.resolveEffectiveId(this.inputId),s={"--modus-autocomplete-min-input-width":`${this.minInputWidth||10}px`},c=!!this.el.querySelector('[slot="menu-items"]'),l=!!this.el.querySelector('[slot="custom-icon"]');return t(i,{key:"98f322082fb68d3186773e0ea041435a412524b6",class:this.getClasses(),style:s},this.label&&t("modus-wc-input-label",{key:"d779f21d83c763d2d03a897c7bdb548b5f5ac0ca",customClass:this.feedback&&(this.showFeedback||this.menuVisible)?`modus-wc-input-label--${this.feedback.level}`:"",forId:o,labelText:this.label,required:this.required,size:this.size}),this.multiSelect?t("div",{class:this.getMultiSelectClasses()},this.includeSearch&&t(u,{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}),h({autoComplete:this.autoComplete,bordered:this.bordered,multiSelect:this.multiSelect,disabled:this.disabled,feedback:this.showFeedback||this.menuVisible?this.feedback:void 0,includeClear:this.includeClear,includeSearch:this.includeSearch,inputId:o,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:l,onBlur:this.handleBlur,onChange:this.handleChange,onFocus:this.handleFocus})),t("div",{class:"modus-wc-autocomplete-button-container"},(d={includeClear:this.includeClear,disabled:this.disabled,readOnly:this.readOnly,selectionOrder:this.selectionOrder,value:this.value,onClearAll:this.handleClearAll}).includeClear&&!d.disabled&&!d.readOnly&&(d.selectionOrder.length>0||(null!==(m=null===(a=d.value)||void 0===a?void 0:a.length)&&void 0!==m?m:0)>0)?t("modus-wc-button",{onClick:d.onClearAll,variant:"borderless",color:"tertiary","aria-label":"Clear all",disabled:d.disabled||d.readOnly,size:"xs",shape:"circle",type:"button"},t(n,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,h({autoComplete:this.autoComplete,bordered:this.bordered,multiSelect:this.multiSelect,disabled:this.disabled,feedback:void 0,customClass:this.feedback&&(this.showFeedback||this.menuVisible)?`modus-wc-input--${this.feedback.level}`:"",includeClear:this.includeClear,includeSearch:this.includeSearch,inputId:o,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:l,onBlur:this.handleBlur,onChange:this.handleChange,onClear:this.handleClearAll,onFocus:this.handleFocus})),!this.multiSelect&&this.feedback&&this.showFeedback&&t("modus-wc-input-feedback",{key:"d02769c9e2e353e60667ff5e50501655b9a37f5d",level:this.feedback.level,message:this.feedback.message,size:this.size}),c?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},r({showSpinner:this.showSpinner,size:this.size,filteredItems:this.filteredItems,items:this.items,noResults:this.noResults,hasSlottedContent:c,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},r({showSpinner:this.showSpinner,size:this.size,filteredItems:this.filteredItems,items:this.items,noResults:this.noResults,hasSlottedContent:c,onItemSelect:this.handleItemSelectByValue}),t("slot",{name:"menu-items"})),this.multiSelect&&this.feedback&&this.showFeedback&&t("modus-wc-input-feedback",{key:"442e65de40426493f3aecea0a271cb6efe5d2a5b",level:this.feedback.level,message:this.feedback.message,size:this.size}));var d,a,m}get el(){return c(this)}static get watchers(){return{disabled:["handleMenuVisibilityChange"],readOnly:["handleMenuVisibilityChange"],items:["handleItemsChange"]}}};p.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;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--error{border-color:var(--modus-wc-color-error) !important}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--info{border-color:var(--modus-wc-color-info) !important}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--success{border-color:var(--modus-wc-color-success) !important}modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--warning{border-color:var(--modus-wc-color-warning) !important}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-base-100);border-radius:var(--modus-wc-border-radius-sm);color:var(--modus-wc-color-base-content);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-base-content-low-contrast);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-base-content-low-contrast);font-size:var(--modus-wc-font-size-sm);text-align:center}[data-theme=modus-modern-light] modus-wc-autocomplete .modus-wc-input-label,[data-theme=modus-modern-dark] modus-wc-autocomplete .modus-wc-input-label,[data-theme=modus-classic-light] modus-wc-autocomplete .modus-wc-input-label,[data-theme=modus-classic-dark] modus-wc-autocomplete .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}[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-base-page)}[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-base-page)}[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{p as modus_wc_autocomplete}