https://levaa.app/dmxAppConnect/dmxAutocomplete/dmxAutocomplete.js

1/*!
2 App Connect Autocomplete
3 Version: 2.0.4
4 (c) 2025 Wappler.io
5 @build 2025-04-02 10:35:13
6 */
7dmx.Component("autocomplete",{extends:"form-element",initialData:{selectedItem:null},attributes:{data:{type:Array,default:[]},matchcase:{type:Boolean,default:!1},matchstart:{type:Boolean,default:!1},matchaccent:{type:Boolean,default:!1},optiontext:{type:String,default:"$value"},optionvalue:{type:String,default:"$value"},optionsearch:{type:String,default:null},noresultslabel:{type:String,default:"No Results..."},placeholder:{type:String,default:""},noclear:{type:Boolean,default:!1}},events:{noresults:Event},init(t){this._keydownHandler=this._keydownHandler.bind(this),this._mousedownHandler=this._mousedownHandler.bind(this),this._data=[],this._selectedIndex=-1,this._input=t.cloneNode(),this._input.removeAttribute("id"),this._input.removeAttribute("name"),this._input.setAttribute("form","__dummy__"),this._input.setAttribute("autocomplete","off"),dmx.Component("form-element").prototype.init.call(this,t),this._input.addEventListener("keydown",this._keydownHandler),this._input.addEventListener("input",this._inputHandler),this._input.addEventListener("change",this._changeHandler),this._input.addEventListener("focus",this._focusHandler),this._input.addEventListener("blur",this._blurHandler),t.style.setProperty("display","none"),t.parentNode.insertBefore(this._input,t)},destroy(){dmx.Component("form-element").prototype.destroy.call(this),this._input.removeEventListener("keydown",this._keydownHandler),this._list.removeEventListener("mousedown",this._mousedownHandler),this._hideList(!0),this._input.remove(),this.$node.style.removeProperty("display")},render(t){this._list=document.createElement("div"),this._list.setAttribute("id",this.name+"-list"),this._list.classList.add("dmx-autocomplete-items"),this._list.addEventListener("mousedown",this._mousedownHandler),this._input.setAttribute("role","combobox"),this._input.setAttribute("aria-autocomplete","list"),this._input.setAttribute("aria-controls",this.name+"-list"),this._input.setAttribute("aria-expanded","false"),this._list.setAttribute("role","listbox"),this.performUpdate(new Map([["data",!0]]))},performUpdate(t){(t.has("data")||t.has("optiontext")||t.has("optionvalue")||t.has("optionsearch"))&&(this._data=dmx.repeatItems(this.props.data).map(((t,e)=>{const s=dmx.parse(this.props.optiontext,dmx.DataScope(t,this));return{index:e,label:s,value:dmx.parse(this.props.optionvalue,dmx.DataScope(t,this)),search:this.props.optionsearch?dmx.parse(this.props.optionsearch,dmx.DataScope(t,this)):s,item:t}})),this._setValue(this.props.value,!0)),dmx.Component("form-element").prototype.performUpdate.call(this,t)},_setValue(t,e,s){const i=this._data.find((e=>e.value==t));this._input.value=i?i.label:"",this.$node.value=i?i.value:"",e&&(this._input.defaultValue=this._input.value,this.$node.defaultValue=this.$node.value),this.set("value",this.$node.value),s&&this.dispatchEvent("changed"),dmx.nextTick((()=>this.dispatchEvent("updated")))},_focus(){this._input.focus()},_disable(t){this._input.disabled=t,dmx.Component("form-element").prototype._disable.call(this,t)},_updateList(){const t=this._input.value;let e=0,s="";if(t){for(const i of this._data)this._matches(i.search,t)&&(s+=`<div id="${this.name}-option-${++e}" class="dmx-autocomplete-item" value="${this._htmlEncode(i.value)}" role="option">${this._htmlItem(i.label,t)}</div>`);""===s&&(s=`<div class="dmx-autocomplete-item dmx-autocomplete-noresults" role="option">${this.props.noresultslabel}</div>`)}this._selectedIndex=-1,this._list.innerHTML=s,t?this._showList():this._hideList()},_updateActive(){const t=this._list.children;this._selectedIndex>=t.length&&(this._selectedIndex=0),this._selectedIndex<0&&(this._selectedIndex=t.length-1),Array.from(t).forEach(((t,e)=>{e===this._selectedIndex?(t.classList.add("dmx-autocomplete-active"),t.setAttribute("aria-selected","true"),t.id&&this._input.setAttribute("aria-activedescendant",t.id)):(t.classList.remove("dmx-autocomplete-active"),t.removeAttribute("aria-selected"))}));const e=t[this._selectedIndex].offsetTop,s=t[this._selectedIndex].offsetHeight,i=this._list.scrollTop,a=this._list.offsetHeight;e<i?this._list.scrollTop=e:e+s>i+a&&(this._list.scrollTop=e+s-a)},_htmlItem(t,e){let s=this._htmlEncode(t),i=new RegExp((this.props.matchstart?"^":"")+dmx.escapeRegExp(this._htmlEncode(e),this.props.matchcase?"g":"gi"));return s.replace(i,(t=>`<b>${t}</b>`))},_htmlEncode:t=>String(t).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),_matches(t,e){return!!t&&(this.props.matchaccent||(t=this._normalize(t),e=this._normalize(e)),this.props.matchcase||(t=t.toLowerCase(),e=e.toLowerCase()),this.props.matchstart&&(t=t.substring(0,e.length)),t.includes(e))},_normalize(t){if(t.normalize)return t.normalize("NFD").replace(/[\u0300-\u036f]/g,"");const e=t.split("");for(const s=0;s<e.length;s++){const i=t.charCodeAt(s);i>=192&&i<=383?e[s]=String.fromCharCode("AAAAAAACEEEEIIIIDNOOOOO*OUUUUYIsaaaaaaaceeeeiiii?nooooo/ouuuuy?yAaAaAaCcCcCcCcDdDdEeEeEeEeEeGgGgGgGgHhHhIiIiIiIiIiJjJjKkkLlLlLlLlLlNnNnNnnNnOoOoOoOoRrRrRrSsSsSsSsTtTtTtUuUuUuUuUuUuWwYyYZzZzZzF".charCodeAt(i-192)):i>127&&(e[s]="?")}return e.join("")},_showList(){""!==this._list.innerHTML&&(this._list.style.setProperty("left",this._input.offsetLeft+"px"),this._list.style.setProperty("top",this._input.offsetTop+this._input.offsetHeight+"px"),this._list.parentNode||(this.$node.parentNode.insertBefore(this._list,this.$n

7ode),this._input.setAttribute("aria-expanded","true")))},_hideList(t){this._list.remove(),this._input.setAttribute("aria-expanded","false"),this._input.setAttribute("aria-activedescendant",""),t&&(this._list.innerHTML="")},_keydownHandler(t){switch(t.key){case"ArrowDown":t.preventDefault(),this._selectedIndex++,this._updateActive(),this._showList();break;case"ArrowUp":t.preventDefault(),this._selectedIndex--,this._updateActive(),this._showList();break;case"Escape":t.preventDefault(),this._selectedIndex=-1,this._hideList();break;case"Enter":t.preventDefault(),this._selectedIndex>-1&&this._list.children[this._selectedIndex].dispatchEvent(new MouseEvent("mousedown",{bubbles:!0}))}},_mousedownHandler(t){t.preventDefault(),t.stopPropagation(),t.target.classList.contains("dmx-autocomplete-noresults")?this.dispatchEvent("noresults",null,{value:this._input.value}):t.target.classList.contains("dmx-autocomplete-item")&&(this._setValue(t.target.getAttribute("value"),!1,t),this._input.select(),this._hideList())},_inputHandler(t){this._updateList()},_focusHandler(t){this._input.select(),this._showList(),dmx.Component("form-element").prototype._focusHandler.call(this,t)},_blurHandler(t){this._data.find((t=>t.label==this._input.value))||(this.props.noclear?this.$node.value=this._input.value:this._setValue("",!1,t)),this._hideList(!0),dmx.Component("form-element").prototype._blurHandler.call(this,t)},_resetHandler(t){this._input.value=this._input.defaultValue,this.$node.value=this.$node.defaultValue,dmx.Component("form-element").prototype._resetHandler.call(this,t)}});
8//# sourceMappingURL=dmxAutocomplete.js.map