import{r as e,c as t,h as s,H as i}from"./p-a5747bb7.js";class l{constructor(s){e(this,s),this.dense=!1,this.showSuggestions=!1,this.selectedIndex=-1,this.change=t(this,"change",7)}componentDidLoad(){this.watchValue(),this.textElement.addEventListener("keydown",e=>this.navigateSuggestions(e))}componentWillLoad(){this.watchValue()}watchValue(){this.value?this.value.label=this.value.label?this.value.label:this.value.value:this.value={value:null,label:null}}navigateSuggestions(e){if(this.suggestions&&this.suggestions.size>0){let t;const s=Array.from(this.suggestions.keys());switch(e.key){case"ArrowDown":(t=null!==this.selectedIndex?this.selectedIndex+1:0)>=this.suggestions.size&&(t=0),this.selectedIndex=t;break;case"ArrowUp":(t=null!==this.selectedIndex?this.selectedIndex-1:this.suggestions.size-1)<0&&(t=this.suggestions.size-1),this.selectedIndex=t;break;case"Enter":return null===this.selectedIndex&&(this.selectedIndex=0),this.selectSuggestion(s[this.selectedIndex]),this.change.emit(this.value),void this.clearSuggestions();default:return}e.preventDefault()}}clearSuggestions(){this.selectedIndex=-1,this.suggestions=null}selectSuggestion(e){if(this.showSuggestions=!1,this.suggestions){const t={value:e,label:this.suggestions.get(e)};this.value=Object.assign({},t)}}execAutocomplete(e){this.value.label=e.target.value,this.autocomplete(e.target.value).then(e=>this.suggestions=e),this.showSuggestions=this.suggestions&&this.suggestions.size>0}handleChange(){this.textElement.value?this.change.emit(this.value):(this.value=null,this.change.emit(this.value))}render(){return s(i,{style:{position:"relative"},onBlur:()=>{this.change.emit(this.value),this.showSuggestions=!1}},s("materials-text-field",{ref:e=>this.textElement=e,"trailing-icon":this.trailingIcon,dense:this.dense,label:this.label,focused:!!this.value.label,value:this.value.label,onInput:e=>this.execAutocomplete(e),onChange:e=>{e.stopPropagation(),e.preventDefault(),this.handleChange()}}),this.showSuggestions&&s("materials-list",{style:{position:"absolute",top:this.textElement.getBoundingClientRect().bottom-this.textElement.getBoundingClientRect().top+"px"}},Array.from(this.suggestions.keys()).map((e,t)=>t<this.maxSuggestions?s("materials-list-item",{selected:t===this.selectedIndex,onClick:()=>{this.selectSuggestion(e),this.change.emit(this.value),this.clearSuggestions()},label:this.suggestions.get(e)}):null)))}static get watchers(){return{value:["watchValue"]}}static get style(){return":host{display:block}materials-list{z-index:1;background-color:#fff;width:100%;overflow-y:visible;-webkit-box-shadow:0 2px 4px 0 #aaa;box-shadow:0 2px 4px 0 #aaa}"}}export{l as materials_autocomplete};