radh-ui/dist/radh-ui/p-0c9f24db.entry.js

Stencil Component Starter

import{r as t,c as s,h as e,g as i}from"./p-1a9f3501.js";class o{constructor(e){t(this,e),this.results=[],this.search="",this.isLoading=!1,this.arrowCounter=0,this.activedescendant="",this.valueSelected=s(this,"valueSelected",7)}itemsChanged(t){t&&(this.innerItems=JSON.parse(t),this.isLoading=!1)}onChange(t){this.search=t.target?t.target.value:null,this.isAsync?this.isLoading=!0:(this.filterResults(),this.isOpen=!0)}componentWillLoad(){this.innerItems=JSON.parse(this.items),this.closeOptions()}componentDidLoad(){document.addEventListener("click",this.handleClickOutside)}componentDidUnload(){document.removeEventListener("click",this.handleClickOutside)}filterResults(){this.results=this.innerItems.filter(t=>t.toLowerCase().indexOf(this.search.toLowerCase())>-1)}setResult(t){this.search=t,this.isOpen=!1,this.valueSelected.emit(this.search)}async closeOptions(){this.isOpen=!1,this.arrowCounter=-1}onArrow(t){this.isOpen&&(38===t.which?this.arrowCounter>0&&(this.arrowCounter=this.arrowCounter-1,this.setActiveDescendent()):40===t.which&&this.arrowCounter<this.results.length&&(this.arrowCounter=this.arrowCounter+1,this.setActiveDescendent()))}onKeyPress(t){13===t.which&&(this.search=this.results[this.arrowCounter],this.setResult(this.search),this.isOpen=!1,this.arrowCounter=-1)}handleClickOutside(){var t=document.querySelector("radh-autocomplete");t.componentOnReady().then(()=>{t.closeOptions()})}isSelected(t){return t===this.arrowCounter}setActiveDescendent(){this.activedescendant=this.getId(this.arrowCounter)}getId(t){return"result-option-"+t}render(){if(this.items)return e("div",{class:"autocomplete",role:"combobox","aria-expanded":this.isOpen?"true":"false"},e("label",{htmlFor:this.labelBy,"aria-label":this.labelBy},this.label),e("input",{type:"text",id:this.labelBy,onInput:t=>this.onChange(t),onKeyPress:t=>this.onKeyPress(t),onKeyDown:t=>this.onArrow(t),"aria-multiline":"false",role:"searchbox","aria-autocomplete":"list","aria-controls":"autocomplete-results","aria-activedescendant":this.activedescendant,"aria-labelledby":this.labelBy,value:this.search,title:"Elige la fruta",autocomplete:"off"}),this.isOpen?e("ul",{id:"autocomplete-results",class:"autocomplete-results",role:"listbox"},this.isLoading?e("li",{class:"loading"},"Loading results"):e("span",null,this.results.map((t,s)=>e("li",{key:s,onClick:()=>this.setResult(t),role:"option",id:this.getId(s),"aria-selected":this.isSelected(s),class:"autocomplete-result"+(this.isSelected(s)?" is-active":"")},t)))):e("span",null))}get el(){return i(this)}static get watchers(){return{items:["itemsChanged"]}}}o.style='radh-autocomplete{font-family:"Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;margin-top:60px}.autocomplete{position:relative;width:130px}.autocomplete-results{padding:0;margin:0;border:1px solid #eeeeee;height:120px;overflow:auto;width:100%}.autocomplete-result{list-style:none;text-align:left;padding:4px 2px;cursor:pointer}.autocomplete-result.is-active,.autocomplete-result:hover{background-color:#4aae9b;color:white}';export{o as radh_autocomplete}