text: class SelectAutocomplete extends HTMLElement{constructor(){super(),this.handleKeydown=this.handleKeydown.bind(this),this.handleEnter=this.handleEnter.bind(this),this.handleEsc=this.handleEsc.bind(this),this.handleClickItem=this.handleClickItem.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.handleClickInput=this.handleClickInput.bind(this),this.handleClickLabel=this.handleClickLabel.bind(this),this.handleHoverItem=this.handleHoverItem.bind(this),this.handleArrowdown=this.handleArrowdown.bind(this),this.handleArrowup=this.handleArrowup.bind(this)}connectedCallback(){this.populate(),this.storage(),this.querySelector("datalist").remove(),this.dataset.open="false",this.store.input.setAttribute("autocomplete","off"),this.triggerEvents()}populate(){let t="";this.querySelectorAll("option").forEach(e=>{t+=`<div>${e.value}</div>\n`}),t=`<div data-list hidden>${t}</div>`,this.querySelector("datalist").insertAdjacentHTML("beforebegin",t)}storage(){this.store={values:this.values,input:this.querySelector("input"),list:this.querySelector("[data-list]"),items:this.querySelectorAll("[data-list] > div")}}filter(){this.store.hasVisible=!1,this.store.items.forEach(t=>{const e=t.innerText,i=this.store.input.value,s=e.toLowerCase().indexOf(i.toLowerCase())>-1;""!==i&&s?(t.removeAttribute("hidden"),this.store.hasVisible=!0,t.innerHTML=this.boldString(e,i)):t.setAttribute("hidden","")}),this.triggerListVisibility(),this.activateFirst(),this.triggerMenuDirection(),this.done=!1}boldString(t,e){var i=new RegExp("("+e+")","gi");return t.replace(i,"<strong>$1</strong>")}triggerListVisibility(){this.store.hasVisible?this.store.list.removeAttribute("hidden"):this.store.list.setAttribute("hidden","")}triggerMenuDirection(){this.store.hasVisible?this.dataset.open="true":this.dataset.open="false"}customEventSubmit(){this.dispatchEvent(new CustomEvent("submit",{detail:{value:this.store.input.value}}))}customEventToggle(){this.dispatchEvent(new CustomEvent("toggle",{detail:{open:this.dataset.open}}))}hideAll(){this.store.list.setAttribute("hidden",""),this.store.items.forEach(t=>{t.setAttribute("hidden","")}),this.store.hasVisible=!1,this.triggerMenuDirection()}showAll(){this.deactivateAll(),this.store.list.removeAttribute("hidden"),this.store.items.forEach(t=>{this.stripTags(t),t.removeAttribute("hidden")}),this.store.hasVisible=!0,this.triggerMenuDirection()}stripTags(t){t.innerHTML=t.innerText}activate(t){this.deactivateAll(),t.dataset.active="",this.active=t}deactivateAll(){this.store.items.forEach(t=>{delete t.dataset.active})}activateFirst(){const t=this.store.list.querySelector("div:not([hidden])");t?this.activate(t):this.active=null}activateBySelector(t){const e=this.store.list.querySelector(t);e&&this.activate(e)}triggerEvents(){this.onKeydown(),this.onEnter(),this.onEsc(),this.onClickInput(),this.onClickItem(),this.onClickOutside(),this.onClickLabel(),this.onHoverItem(),this.onArrowdown(),this.onArrowup()}onKeydown(){this.store.input.addEventListener("input",this.handleKeydown)}handleKeydown(){this.filter()}onEnter(){this.store.input.addEventListener("keydown",this.handleEnter)}handleEnter(t){13===t.keyCode&&(""!=this.store.input.value||this.active?this.done?this.customEventSubmit():(this.active&&(this.store.input.value=this.active.innerText),this.handleClickEnter(),this.done=!0):this.showAll())}onEsc(){this.store.input.addEventListener("keydown",this.handleEsc)}handleEsc(t){27===t.keyCode&&this.hideAll()}onClickInput(){this.store.input.addEventListener("click",this.handleClickInput)}handleClickInput(t){t.stopPropagation(),this.handleCloseOthers(),""==this.store.input.value?this.showAll():this.filter(),this.customEventToggle()}onClickLabel(){this.querySelector("label").addEventListener("click",this.handleClickLabel)}handleClickLabel(t){t.preventDefault(),"false"===this.dataset.open?(this.handleCloseOthers(),""==this.store.input.value?this.showAll():this.filter()):this.hideAll(),this.store.input.focus(),this.customEventToggle()}handleCloseOthers(){document.querySelectorAll("select-autocomplete").forEach(t=>{t.dataset.open="false",t.querySelector("[data-list]").setAttribute("hidden","")})}onClickOutside(){window.addEventListener("click",this.handleClickOutside)}handleClickOutside(t){t.target.closest("select-autocomplete")||(this.hideAll(),this.triggerMenuDirection())}onClickItem(){this.store.items.forEach(t=>{t.addEventListener("click",this.handleClickItem)})}handleClickItem(t){this.store.input.value=t.currentTarget.innerText,this.handleClickEnter()}handleClickEnter(){this.filter(),this.hideAll(),this.triggerMenuDirection(),this.store.input.focus()}onHoverItem(){this.store.items.forEach(t=>{t.addEventListener("mouseover",this.handleHoverItem)})}handleHoverItem(t){this.activate(t.currentTarget)}onArrowup(){this.store.input.addEventListener("keydown",this.handleArrowup)}onArrowdown(){this.store.input.addEventListener("keydown",this.handleArrowdown)}handleArrowup(t){if(38===t.keyCode&&this.active){const e="div:not([hidden]):last-of-type";this.handleArrow(t,this.active.previousElementSibling,e)}}handleArrowdown(t){if(40===t.keyCode)if(this.active){const e="div:not([hidden]):first-of-type";this.handleArrow(t,this.active.nextElementSibling,e)}else this.activateFirst()}handleArrow(t,e,i){for(t.preventDefault();e&&1==e.hidden;)e=38==t.keyCode?e.previousElementSibling:e.nextElementSibling;e?this.activate(e):this.activateBySelector(i)}}customElements.define("select-autocomplete",SelectAutocomplete);