@nyaruka/temba-components 0.120.4 → 0.120.5

package/CHANGELOG.md

@@ -4,8 +4,14 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.120.5](https://github.com/nyaruka/temba-components/compare/v0.120.4...v0.120.5)
+
+- Detect changes from aribtrary options [`a9a2489`](https://github.com/nyaruka/temba-components/commit/a9a2489bc07e29f781f5f43061f038de77e26c37)
+
 #### [v0.120.4](https://github.com/nyaruka/temba-components/compare/v0.120.3...v0.120.4)
 
+> 28 April 2025
+
 - Allow select to post to it's endpoint [`#492`](https://github.com/nyaruka/temba-components/pull/492)
 - Remove emacs extension [`dcbf4dc`](https://github.com/nyaruka/temba-components/commit/dcbf4dc54a513cd214d0aaf54c11bd120fab2007)
 

package/dist/temba-components.js

@@ -915,7 +915,7 @@ let fr=Ks,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
         pointer-events: none;
         padding: 0px;
       }
-    `}constructor(){super(),this.hiddenInputs=[],this.inputStyle={},this.multi=!1,this.searchOnFocus=!1,this.placeholder="",this.name="",this.allowCreate=!1,this.nameKey="name",this.valueKey="value",this.maxItems=0,this.maxItemsText="Maximum items reached",this.queryParam=null,this.input="",this.visibleOptions=[],this.completionOptions=[],this.quietMillis=0,this.searchable=!1,this.cache=!0,this.cacheKey="",this.focused=!1,this.disabled=!1,this.selectedIndex=-1,this.anchorPosition={left:0,top:0},this.tags=!1,this.flavor="default",this.infoText="",this.values=[],this.getName=t=>t[this.nameKey||"name"],this.isMatch=this.isMatchDefault,this.getValue=t=>t[this.valueKey||"value"]||t.id,this.sortFunction=null,this.renderOptionDetail=()=>V``,this.renderSelectedItem=this.renderSelectedItemDefault,this.createArbitraryOption=this.createArbitraryOptionDefault,this.getOptions=this.getOptionsDefault,this.prepareOptions=this.prepareOptionsDefault,this.isComplete=this.isCompleteDefault,this.staticOptions=[],this.allowAnchor=!0,this.alphaSort=(t,e)=>this.endpoint?this.getName(t).localeCompare(this.getName(e)):0,this.next=null,this.lruCache=Le(20,6e4),this.getNameInternal=t=>this.getName(t),this.renderOptionDefault=this.renderOptionDefault.bind(this),this.renderSelectedItemDefault=this.renderSelectedItemDefault.bind(this),this.prepareOptionsDefault=this.prepareOptionsDefault.bind(this),this.isMatchDefault=this.isMatchDefault.bind(this)}prepareOptionsDefault(t){return t}isMatchDefault(t,e){return(this.getName(t)||"").toLowerCase().indexOf(e)>-1}handleSlotChange(){if(this.staticOptions&&0===this.staticOptions.length)for(const t of this.children)if("TEMBA-OPTION"===t.tagName){const e={};for(const i of t.attributes)e[i.name]=i.value;if(e){let t=!1;void 0!==e.selected&&(delete e.selected,t=!0);const i=this.value||this.getAttribute("value");if(i){this.getValue(e)==i&&(t=!0)}this.staticOptions.push(e),t&&(this.multi?this.addValue(e):this.setValues([e]))}}this.searchable&&0===this.staticOptions.length&&(this.quietMillis=200)}checkSelectedOption(){if(this.value&&0==this.values.length&&0==this.staticOptions.length&&this.endpoint){const t=this.value;this.resolving=!0,Wt(this.endpoint).then((e=>{if(e&&e.length>0){if(t){const i=e.find((e=>this.getValue(e)===t));if(i)return this.resolving=!1,this.fetching=!1,void this.setValues([i])}this.setValues([e[0]]),this.resolving=!1}}))}else this.staticOptions.length>0&&(null!==this.getAttribute("multi")?this.addValue(this.staticOptions[0]):this.getAttribute("value")?this.setSelectedValue(this.getAttribute("value")):this.setValues([this.staticOptions[0]]))}firstUpdated(t){super.firstUpdated(t),this.anchorElement=this.shadowRoot.querySelector(".select-container"),this.anchorExpressions=this.shadowRoot.querySelector("#anchor"),this.shadowRoot.addEventListener("slotchange",this.handleSlotChange.bind(this))}async createOptionPost(t){return Qt(this.endpoint,t).then((e=>{if(e.status>=200&&e.status<300)return{json:e.json,payload:t}}))}updated(t){if(super.updated(t),t.has("sorted")&&(this.sortFunction=this.sorted?this.alphaSort:null),t.has("value")&&this.value&&!this.values.length&&this.setSelectedValue(this.value),t.has("values")&&(this.updateInputs(),this.hasChanges(t.get("values")))){const t=[];if(this.allowCreate){const e=this.values.filter((t=>t.arbitrary));for(const i of e)i.arbitrary&&t.push(this.createOptionPost(i));Promise.all(t).then((t=>{for(const i of t)if(i){const t=e.find((t=>t===i.payload));if(t&&(delete t.arbitrary,i.json))for(const e in i.json)t[e]=i.json[e]}this.values=this.values.filter((t=>!t.arbitrary)),this.cacheKey=(new Date).getTime().toString(),this.fireEvent("change")}))}else this.fireEvent("change")}t.has("cacheKey")&&this.lruCache.clear(),t.has("input")&&!t.has("values")&&!t.has("options")&&this.focused&&(this.lastQuery&&window.clearTimeout(this.lastQuery),this.lastQuery=window.setTimeout((()=>{this.expressions&&this.input.indexOf("@")>-1?this.fetchExpressions():this.fetchOptions(this.input)}),this.quietMillis)),this.endpoint&&t.has("fetching")&&(this.fetching||this.isPastFetchThreshold()||this.fireCustomEvent($e.FetchComplete)),(t.has("cursorIndex")||t.has("visibleOptions"))&&this.endpoint&&!this.fetching&&this.isPastFetchThreshold()&&(this.next?this.fetchOptions(null,null,this.next):this.fetchOptions(this.query,this.page+1)),0===this.values.length&&!this.placeholder&&this.staticOptions.length>0&&this.setValues([this.staticOptions[0]])}hasChanges(t){if(void 0===t)return!1;let e;void 0!==t&&(e=(t||[]).map((t=>this.getValue(t))).join(","));return e!==(this.values||[]).map((t=>this.getValue(t))).join(",")}setSelectedValue(t){if(this.staticOptions.length>0){const e=this.staticOptions.find((e=>this.getValue(e)===t));e&&this.setValues([e])}else this.checkSelectedOption()}updateInputs(){for(let t=null;t=this.hiddenInputs.pop();)t.remove();if(0===this.values.length)this.value=null;else{const t=this.getAttribute("name");t&&(this.multi||1!==this.values.length?this.inputRoot.parentElement&&this.values.forEach((e=>{const i=document.createElement("input");i.setAttribute("type","hidden"),i.setAttribute("name",t),i.setAttribute("value",this.serializeValue(e)),this.hiddenInputs.push(i),this.inputRoot.parentElement.appendChild(i)})):(this.selection=this.values[0],this.value=this.serializeValue(this.values[0])))}}setSelectedOption(t){this.multi?this.addValue(t):this.setValues([t]),this.multi&&this.searchable||(this.blur(),this.focused=!1),this.visibleOptions=[],this.input="",this.next=null,this.complete=!0,this.selectedIndex=-1}isPastFetchThreshold(){return(this.visibleOptions.length>0||this.next)&&!this.complete&&(this.cursorIndex||0)>this.visibleOptions.length-20}handleOptionSelection(t){if(this.multi&&this.maxItems>0&&this.values.length>=this.maxItems)return void(this.infoText=this.maxItemsText);this.infoText="";const e=t.detail.selected;e.post&&this.endpoint?Qt(this.endpoint,e).then((t=>{t.status>=200&&t.status<300?(this.setSelectedOption(t.json),this.lruCache=Le(20,6e4)):this.blur()})):this.setSelectedOption(e)}handleExpressionSelection(t){const e=t.detail.selected,i=t.detail.tabbed,o=this.shadowRoot.querySelector(".searchbox");cl(this.query,o,e),this.query="",this.completionOptions=[],i?this.fetchExpressions():-1===this.input.indexOf("(")&&this.addInputAsValue()}getOptionsDefault(t){return t.json.results}isCompleteDefault(t,e){const i=e.json;return!i.more&&!i.next}handleRemoveSelection(t){this.removeValue(t),this.visibleOptions=[]}createArbitraryOptionDefault(){return null}open(){this.shadowRoot.querySelector(".select-container").click()}isOpen(){return this.visibleOptions.length>0}setOptions(t){this.staticOptions=t}setVisibleOptions(t){if(t=t.filter((t=>!!this.getNameInternal(t)&&(!this.shouldExclude||!this.shouldExclude(t)))),this.input){if(this.searchable&&!this.queryParam){const e=this.input.trim().toLowerCase();t=t.filter((t=>this.isMatch(t,e)))}const e=this.createArbitraryOption(this.input,t);if(e){e.arbitrary=!0;t.find((t=>this.getValue(t)===this.getValue(e)))||(t.length>0&&t[0].arbitrary?t[0]=e:t.unshift(e))}}this.values.length>0&&(this.multi?t=t.filter((t=>!this.values.find((e=>this.getValue(e)===this.getValue(t))))):(this.input?this.cursorIndex=0:this.cursorIndex=t.findIndex((t=>this.getValue(t)===this.getValue(this.values[0]))),this.requestUpdate("cursorIndex"))),this.multi&&this.maxItems>0&&this.values.length>=this.maxItems&&(t=[],this.infoText=this.maxItemsText),this.sortFunction&&t.sort(this.sortFunction),this.visibleOptions=t,this.fireCustomEvent($e.ContentChanged,{options:this.visibleOptions})}fetchExpressions(){const t=document.querySelector("temba-store");if(this.expressions&&t){const e=this.shadowRoot.querySelector(".searchbox"),i=dl(e,t,"session"===this.expressions);return this.query=i.query,this.completionOptions=i.options,this.visibleOptions=[],this.anchorPosition=i.anchorPosition,void this.fireCustomEvent($e.FetchComplete)}}fetchOptions(t,e=0,i=null){if(this.completionOptions=[],!this.fetching){this.fetching=!0;const o=[...this.staticOptions],n=(t||"").trim().toLowerCase();if(this.tags&&n&&(o.find((t=>this.getValue(t)&&this.getValue(t).toLowerCase()===n))||o.splice(0,0,{name:t,value:t})),this.endpoint){let s=this.endpoint;i?s=i:(t&&this.queryParam&&(s.indexOf("?")>-1?s+="&":s+="?",s+=this.queryParam+"="+encodeURIComponent(t)),e&&(s.indexOf("?")>-1?s+="&":s+="?",s+="page="+e));const r=this.lruCache.get(s);if(this.cache&&!this.tags&&r)return 0!==e||this.next?this.setVisibleOptions([...this.visibleOptions,...r.options]):(this.cursorIndex=0,this.setVisibleOptions([...o,...r.options])),this.complete=r.complete,this.next=r.next,void(this.fetching=!1);this.searchable&&!this.queryParam?Wt(s).then((t=>{t=this.prepareOptions(t),this.cache&&!this.tags&&(this.lruCache.set(s,{options:t,complete:!0,next:null}),this.complete=!0,this.next=null,this.setVisibleOptions([...o,...t]),this.fetching=!1)})):Vt(s).then((i=>{let r=this.getOptions(i).filter((t=>this.isMatch(t,n)));r=this.prepareOptions(r),this.next=null;const a=i.json;a.next&&(this.next=a.next),0!==e||this.next?(r.length>0&&this.setVisibleOptions([...this.visibleOptions,...r]),this.complete=this.isComplete(r,i)):(this.cursorIndex=0,this.setVisibleOptions([...o,...r]),this.query=t,this.complete=this.isComplete(this.visibleOptions,i)),this.cache&&!this.tags&&this.lruCache.set(s,{options:r,complete:this.complete,next:this.next}),this.fetching=!1,this.page=e})).catch((t=>{this.fetching=!1,console.error(t)}))}else this.fetching=!1,this.setVisibleOptions(o)}}handleFocus(){this.focused||0!==this.visibleOptions.length||(this.focused=!0)}handleBlur(){this.focused=!1,this.visibleOptions.length>0&&(this.input="",this.next=null,this.complete=!0,this.visibleOptions=[],this.cursorIndex=0),this.multi&&this.maxItems>0&&this.values.length>=this.maxItems&&(this.infoText="")}handleClick(){this.selectedIndex=-1,this.requestUpdate("input")}addInputAsValue(){const t=this.shadowRoot.querySelector(".searchbox"),e={name:t.value,value:t.value,expression:!0};this.multi?this.values.find((t=>t.expression&&t.value&&e.value&&t.value.toLowerCase().trim()==e.value.toLowerCase().trim()))||this.addValue(e):this.setValues([e]),this.input="",this.multi||this.blur()}handleKeyDown(t){if("Enter"===t.key&&this.expressions&&0===this.completionOptions.length&&this.input.indexOf("@")>-1&&this.addInputAsValue(),("Enter"===t.key||"ArrowDown"===t.key||"n"===t.key&&t.ctrlKey)&&0===this.visibleOptions.length&&0===this.completionOptions.length)this.requestUpdate("input");else if(this.multi&&"Backspace"===t.key&&!this.input){if(this.visibleOptions.length>0)return void(this.visibleOptions=[]);-1===this.selectedIndex?(this.selectedIndex=this.values.length-1,this.visibleOptions=[]):(this.popValue(),this.selectedIndex=-1)}else this.selectedIndex=-1}getStaticOptions(){return this.staticOptions}handleInput(t){const e=t.currentTarget;this.input=e.value}handleCancel(){this.visibleOptions=[]}handleCursorChanged(t){this.cursorIndex=t.detail.index}handleContainerClick(t){if(t.stopPropagation(),t.preventDefault(),this.focused=!0,"INPUT"!==t.target.tagName){const t=this.shadowRoot.querySelector("input");if(t)return t.click(),void t.focus();this.visibleOptions.length>0?this.visibleOptions=[]:this.requestUpdate("input")}}getEventHandlers(){return[{event:$e.Canceled,method:this.handleCancel},{event:$e.CursorChanged,method:this.handleCursorChanged},{event:"blur",method:this.handleBlur},{event:"focus",method:this.handleFocus}]}handleArrowClick(t){this.isOpen()&&(t.preventDefault(),t.stopPropagation(),this.blur())}renderOptionDefault(t){if(!t)return null;const e=t.icon;return V`
+    `}constructor(){super(),this.hiddenInputs=[],this.inputStyle={},this.multi=!1,this.searchOnFocus=!1,this.placeholder="",this.name="",this.allowCreate=!1,this.nameKey="name",this.valueKey="value",this.maxItems=0,this.maxItemsText="Maximum items reached",this.queryParam=null,this.input="",this.visibleOptions=[],this.completionOptions=[],this.quietMillis=0,this.searchable=!1,this.cache=!0,this.cacheKey="",this.focused=!1,this.disabled=!1,this.selectedIndex=-1,this.anchorPosition={left:0,top:0},this.tags=!1,this.flavor="default",this.infoText="",this.values=[],this.getName=t=>t[this.nameKey||"name"],this.isMatch=this.isMatchDefault,this.getValue=t=>t[this.valueKey||"value"]||t.id,this.sortFunction=null,this.renderOptionDetail=()=>V``,this.renderSelectedItem=this.renderSelectedItemDefault,this.createArbitraryOption=this.createArbitraryOptionDefault,this.getOptions=this.getOptionsDefault,this.prepareOptions=this.prepareOptionsDefault,this.isComplete=this.isCompleteDefault,this.staticOptions=[],this.allowAnchor=!0,this.alphaSort=(t,e)=>this.endpoint?this.getName(t).localeCompare(this.getName(e)):0,this.next=null,this.lruCache=Le(20,6e4),this.getNameInternal=t=>this.getName(t),this.renderOptionDefault=this.renderOptionDefault.bind(this),this.renderSelectedItemDefault=this.renderSelectedItemDefault.bind(this),this.prepareOptionsDefault=this.prepareOptionsDefault.bind(this),this.isMatchDefault=this.isMatchDefault.bind(this)}prepareOptionsDefault(t){return t}isMatchDefault(t,e){return(this.getName(t)||"").toLowerCase().indexOf(e)>-1}handleSlotChange(){if(this.staticOptions&&0===this.staticOptions.length)for(const t of this.children)if("TEMBA-OPTION"===t.tagName){const e={};for(const i of t.attributes)e[i.name]=i.value;if(e){let t=!1;void 0!==e.selected&&(delete e.selected,t=!0);const i=this.value||this.getAttribute("value");if(i){this.getValue(e)==i&&(t=!0)}this.staticOptions.push(e),t&&(this.multi?this.addValue(e):this.setValues([e]))}}this.searchable&&0===this.staticOptions.length&&(this.quietMillis=200)}checkSelectedOption(){if(this.value&&0==this.values.length&&0==this.staticOptions.length&&this.endpoint){const t=this.value;this.resolving=!0,Wt(this.endpoint).then((e=>{if(e&&e.length>0){if(t){const i=e.find((e=>this.getValue(e)===t));if(i)return this.resolving=!1,this.fetching=!1,void this.setValues([i])}this.setValues([e[0]]),this.resolving=!1}}))}else this.staticOptions.length>0&&(null!==this.getAttribute("multi")?this.addValue(this.staticOptions[0]):this.getAttribute("value")?this.setSelectedValue(this.getAttribute("value")):this.setValues([this.staticOptions[0]]))}firstUpdated(t){super.firstUpdated(t),this.anchorElement=this.shadowRoot.querySelector(".select-container"),this.anchorExpressions=this.shadowRoot.querySelector("#anchor"),this.shadowRoot.addEventListener("slotchange",this.handleSlotChange.bind(this))}async createOptionPost(t){return Qt(this.endpoint,t).then((e=>{if(e.status>=200&&e.status<300)return{json:e.json,payload:t}}))}updated(t){if(super.updated(t),t.has("sorted")&&(this.sortFunction=this.sorted?this.alphaSort:null),t.has("value")&&this.value&&!this.values.length&&this.setSelectedValue(this.value),t.has("values")&&(this.updateInputs(),this.hasChanges(t.get("values")))){const t=[];if(this.allowCreate){const e=this.values.filter((t=>t.arbitrary));for(const i of e)i.arbitrary&&t.push(this.createOptionPost(i));Promise.all(t).then((t=>{for(const i of t)if(i){const t=e.find((t=>t===i.payload));if(t&&(delete t.arbitrary,i.json))for(const e in i.json)t[e]=i.json[e]}this.values=this.values.filter((t=>!t.arbitrary)),this.cacheKey=(new Date).getTime().toString(),this.fireEvent("change")}))}else this.fireEvent("change")}t.has("cacheKey")&&this.lruCache.clear(),t.has("input")&&!t.has("values")&&!t.has("options")&&this.focused&&(this.lastQuery&&window.clearTimeout(this.lastQuery),this.lastQuery=window.setTimeout((()=>{this.expressions&&this.input.indexOf("@")>-1?this.fetchExpressions():this.fetchOptions(this.input)}),this.quietMillis)),this.endpoint&&t.has("fetching")&&(this.fetching||this.isPastFetchThreshold()||this.fireCustomEvent($e.FetchComplete)),(t.has("cursorIndex")||t.has("visibleOptions"))&&this.endpoint&&!this.fetching&&this.isPastFetchThreshold()&&(this.next?this.fetchOptions(null,null,this.next):this.fetchOptions(this.query,this.page+1)),0===this.values.length&&!this.placeholder&&this.staticOptions.length>0&&this.setValues([this.staticOptions[0]])}hasChanges(t){if(void 0===t)return!1;let e;void 0!==t&&(e=(t||[]).map((t=>this.getValue(t))).join(","));return e!==(this.values||[]).map((t=>t.arbitrary||this.getValue(t))).join(",")}setSelectedValue(t){if(this.staticOptions.length>0){const e=this.staticOptions.find((e=>this.getValue(e)===t));e&&this.setValues([e])}else this.checkSelectedOption()}updateInputs(){for(let t=null;t=this.hiddenInputs.pop();)t.remove();if(0===this.values.length)this.value=null;else{const t=this.getAttribute("name");t&&(this.multi||1!==this.values.length?this.inputRoot.parentElement&&this.values.forEach((e=>{const i=document.createElement("input");i.setAttribute("type","hidden"),i.setAttribute("name",t),i.setAttribute("value",this.serializeValue(e)),this.hiddenInputs.push(i),this.inputRoot.parentElement.appendChild(i)})):(this.selection=this.values[0],this.value=this.serializeValue(this.values[0])))}}setSelectedOption(t){this.multi?this.addValue(t):this.setValues([t]),this.multi&&this.searchable||(this.blur(),this.focused=!1),this.visibleOptions=[],this.input="",this.next=null,this.complete=!0,this.selectedIndex=-1}isPastFetchThreshold(){return(this.visibleOptions.length>0||this.next)&&!this.complete&&(this.cursorIndex||0)>this.visibleOptions.length-20}handleOptionSelection(t){if(this.multi&&this.maxItems>0&&this.values.length>=this.maxItems)return void(this.infoText=this.maxItemsText);this.infoText="";const e=t.detail.selected;e.post&&this.endpoint?Qt(this.endpoint,e).then((t=>{t.status>=200&&t.status<300?(this.setSelectedOption(t.json),this.lruCache=Le(20,6e4)):this.blur()})):this.setSelectedOption(e)}handleExpressionSelection(t){const e=t.detail.selected,i=t.detail.tabbed,o=this.shadowRoot.querySelector(".searchbox");cl(this.query,o,e),this.query="",this.completionOptions=[],i?this.fetchExpressions():-1===this.input.indexOf("(")&&this.addInputAsValue()}getOptionsDefault(t){return t.json.results}isCompleteDefault(t,e){const i=e.json;return!i.more&&!i.next}handleRemoveSelection(t){this.removeValue(t),this.visibleOptions=[]}createArbitraryOptionDefault(){return null}open(){this.shadowRoot.querySelector(".select-container").click()}isOpen(){return this.visibleOptions.length>0}setOptions(t){this.staticOptions=t}setVisibleOptions(t){if(t=t.filter((t=>!!this.getNameInternal(t)&&(!this.shouldExclude||!this.shouldExclude(t)))),this.input){if(this.searchable&&!this.queryParam){const e=this.input.trim().toLowerCase();t=t.filter((t=>this.isMatch(t,e)))}const e=this.createArbitraryOption(this.input,t);if(e){e.arbitrary=!0;t.find((t=>this.getValue(t)===this.getValue(e)))||(t.length>0&&t[0].arbitrary?t[0]=e:t.unshift(e))}}this.values.length>0&&(this.multi?t=t.filter((t=>!this.values.find((e=>this.getValue(e)===this.getValue(t))))):(this.input?this.cursorIndex=0:this.cursorIndex=t.findIndex((t=>this.getValue(t)===this.getValue(this.values[0]))),this.requestUpdate("cursorIndex"))),this.multi&&this.maxItems>0&&this.values.length>=this.maxItems&&(t=[],this.infoText=this.maxItemsText),this.sortFunction&&t.sort(this.sortFunction),this.visibleOptions=t,this.fireCustomEvent($e.ContentChanged,{options:this.visibleOptions})}fetchExpressions(){const t=document.querySelector("temba-store");if(this.expressions&&t){const e=this.shadowRoot.querySelector(".searchbox"),i=dl(e,t,"session"===this.expressions);return this.query=i.query,this.completionOptions=i.options,this.visibleOptions=[],this.anchorPosition=i.anchorPosition,void this.fireCustomEvent($e.FetchComplete)}}fetchOptions(t,e=0,i=null){if(this.completionOptions=[],!this.fetching){this.fetching=!0;const o=[...this.staticOptions],n=(t||"").trim().toLowerCase();if(this.tags&&n&&(o.find((t=>this.getValue(t)&&this.getValue(t).toLowerCase()===n))||o.splice(0,0,{name:t,value:t})),this.endpoint){let s=this.endpoint;i?s=i:(t&&this.queryParam&&(s.indexOf("?")>-1?s+="&":s+="?",s+=this.queryParam+"="+encodeURIComponent(t)),e&&(s.indexOf("?")>-1?s+="&":s+="?",s+="page="+e));const r=this.lruCache.get(s);if(this.cache&&!this.tags&&r)return 0!==e||this.next?this.setVisibleOptions([...this.visibleOptions,...r.options]):(this.cursorIndex=0,this.setVisibleOptions([...o,...r.options])),this.complete=r.complete,this.next=r.next,void(this.fetching=!1);this.searchable&&!this.queryParam?Wt(s).then((t=>{t=this.prepareOptions(t),this.cache&&!this.tags&&(this.lruCache.set(s,{options:t,complete:!0,next:null}),this.complete=!0,this.next=null,this.setVisibleOptions([...o,...t]),this.fetching=!1)})):Vt(s).then((i=>{let r=this.getOptions(i).filter((t=>this.isMatch(t,n)));r=this.prepareOptions(r),this.next=null;const a=i.json;a.next&&(this.next=a.next),0!==e||this.next?(r.length>0&&this.setVisibleOptions([...this.visibleOptions,...r]),this.complete=this.isComplete(r,i)):(this.cursorIndex=0,this.setVisibleOptions([...o,...r]),this.query=t,this.complete=this.isComplete(this.visibleOptions,i)),this.cache&&!this.tags&&this.lruCache.set(s,{options:r,complete:this.complete,next:this.next}),this.fetching=!1,this.page=e})).catch((t=>{this.fetching=!1,console.error(t)}))}else this.fetching=!1,this.setVisibleOptions(o)}}handleFocus(){this.focused||0!==this.visibleOptions.length||(this.focused=!0)}handleBlur(){this.focused=!1,this.visibleOptions.length>0&&(this.input="",this.next=null,this.complete=!0,this.visibleOptions=[],this.cursorIndex=0),this.multi&&this.maxItems>0&&this.values.length>=this.maxItems&&(this.infoText="")}handleClick(){this.selectedIndex=-1,this.requestUpdate("input")}addInputAsValue(){const t=this.shadowRoot.querySelector(".searchbox"),e={name:t.value,value:t.value,expression:!0};this.multi?this.values.find((t=>t.expression&&t.value&&e.value&&t.value.toLowerCase().trim()==e.value.toLowerCase().trim()))||this.addValue(e):this.setValues([e]),this.input="",this.multi||this.blur()}handleKeyDown(t){if("Enter"===t.key&&this.expressions&&0===this.completionOptions.length&&this.input.indexOf("@")>-1&&this.addInputAsValue(),("Enter"===t.key||"ArrowDown"===t.key||"n"===t.key&&t.ctrlKey)&&0===this.visibleOptions.length&&0===this.completionOptions.length)this.requestUpdate("input");else if(this.multi&&"Backspace"===t.key&&!this.input){if(this.visibleOptions.length>0)return void(this.visibleOptions=[]);-1===this.selectedIndex?(this.selectedIndex=this.values.length-1,this.visibleOptions=[]):(this.popValue(),this.selectedIndex=-1)}else this.selectedIndex=-1}getStaticOptions(){return this.staticOptions}handleInput(t){const e=t.currentTarget;this.input=e.value}handleCancel(){this.visibleOptions=[]}handleCursorChanged(t){this.cursorIndex=t.detail.index}handleContainerClick(t){if(t.stopPropagation(),t.preventDefault(),this.focused=!0,"INPUT"!==t.target.tagName){const t=this.shadowRoot.querySelector("input");if(t)return t.click(),void t.focus();this.visibleOptions.length>0?this.visibleOptions=[]:this.requestUpdate("input")}}getEventHandlers(){return[{event:$e.Canceled,method:this.handleCancel},{event:$e.CursorChanged,method:this.handleCursorChanged},{event:"blur",method:this.handleBlur},{event:"focus",method:this.handleFocus}]}handleArrowClick(t){this.isOpen()&&(t.preventDefault(),t.stopPropagation(),this.blur())}renderOptionDefault(t){if(!t)return null;const e=t.icon;return V`
       <div class="option-name" style="display:flex">
         ${e?V`<temba-icon
               name="${e}"