@nyaruka/temba-components 0.80.0 → 0.80.1

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.80.1](https://github.com/nyaruka/temba-components/compare/v0.80.0...v0.80.1)
+
+- Add beat for temba-option collection [`3406463`](https://github.com/nyaruka/temba-components/commit/3406463dd07490615ec979c21c8701f7694a4f80)
+
 #### [v0.80.0](https://github.com/nyaruka/temba-components/compare/v0.77.0...v0.80.0)
 
+> 9 April 2024
+
 - Switch bundling away from templates [`#412`](https://github.com/nyaruka/temba-components/pull/412)
 - Update dependencies [`#411`](https://github.com/nyaruka/temba-components/pull/411)
 - Dependency updates [`#409`](https://github.com/nyaruka/temba-components/pull/409)

package/dist/temba-components.js

@@ -882,7 +882,7 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         pointer-events: none;
         padding: 0px;
       }
-    `}updated(t){if(super.updated(t),t.has("values")&&(this.updateInputs(),(this.multi||1===this.values.length||0==this.values.length&&t.get("values")&&t.get("values").length>0)&&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(Ae.FetchComplete)),(t.has("cursorIndex")||t.has("visibleOptions"))&&this.endpoint&&!this.fetching&&this.isPastFetchThreshold()&&this.fetchOptions(this.query,this.page+1),t.has("value")&&this.value&&!this.values.length&&this.staticOptions.length>0){const t=this.staticOptions.find((t=>this.getValue(t)===this.value));t&&this.setValues([t])}0===this.values.length&&!this.placeholder&&this.staticOptions.length>0&&this.setValues([this.staticOptions[0]])}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){const e=t.detail.selected;e.post&&this.endpoint?Kt(this.endpoint,e).then((t=>{t.status>=200&&t.status<300?(this.setSelectedOption(t.json),this.lruCache=Oe(20,6e4)):this.blur()})):this.setSelectedOption(e)}handleExpressionSelection(t){const e=t.detail.selected,i=t.detail.tabbed,o=this.shadowRoot.querySelector(".searchbox");ja(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.requestUpdate("input")}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.sortFunction&&t.sort(this.sortFunction),this.visibleOptions=t,this.fireCustomEvent(Ae.ContentChanged,{options:this.visibleOptions})}fetchExpressions(){const t=document.querySelector("temba-store");if(this.expressions&&t){const e=this.shadowRoot.querySelector(".searchbox"),i=Ha(e,t,"session"===this.expressions);return this.query=i.query,this.completionOptions=i.options,this.visibleOptions=[],this.anchorPosition=i.anchorPosition,void this.fireCustomEvent(Ae.FetchComplete)}}fetchOptions(t,e=0){if(this.completionOptions=[],!this.fetching){this.fetching=!0;const i=[...this.staticOptions],o=(t||"").trim().toLowerCase();if(this.tags&&o&&(i.find((t=>this.getValue(t)&&this.getValue(t).toLowerCase()===o))||i.splice(0,0,{name:t,value:t})),this.endpoint){let n=this.endpoint;t&&this.queryParam&&(n.indexOf("?")>-1?n+="&":n+="?",n+=this.queryParam+"="+encodeURIComponent(t)),e&&(n.indexOf("?")>-1?n+="&":n+="?",n+="page="+e),this.next&&(n=this.next);const s=this.lruCache.get(n);if(this.cache&&!this.tags&&s)return 0!==e||this.next?this.setVisibleOptions([...this.visibleOptions,...s.options]):(this.cursorIndex=0,this.setVisibleOptions([...i,...s.options])),this.complete=s.complete,this.next=s.next,void(this.fetching=!1);this.searchable&&!this.queryParam?jt(n).then((t=>{this.cache&&!this.tags&&(this.lruCache.set(n,{options:t,complete:!0,next:null}),this.complete=!0,this.next=null,this.setVisibleOptions([...i,...t]),this.fetching=!1)})):Ft(n).then((s=>{const r=this.getOptions(s).filter((t=>this.isMatch(t,o))),a=s.json;a.next&&(this.next=a.next),0!==e||this.next?(r.length>0&&this.setVisibleOptions([...this.visibleOptions,...r]),this.complete=this.isComplete(r,s)):(this.cursorIndex=0,this.setVisibleOptions([...i,...r]),this.query=t,this.complete=this.isComplete(this.visibleOptions,s)),this.cache&&!this.tags&&this.lruCache.set(n,{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(i)}}handleFocus(){this.focused||0!==this.visibleOptions.length||(this.focused=!0,this.searchOnFocus&&!this.removingSelection&&this.requestUpdate("input"))}handleBlur(){this.focused=!1,this.visibleOptions.length>0&&(this.input="",this.next=null,this.complete=!0,this.visibleOptions=[],this.cursorIndex=0)}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(this.focused=!0,"INPUT"!==t.target.tagName){const e=this.shadowRoot.querySelector("input");if(e)return e.click(),void e.focus();this.visibleOptions.length>0?(this.visibleOptions=[],t.preventDefault(),t.stopPropagation()):this.requestUpdate("input")}}getEventHandlers(){return[{event:Ae.Canceled,method:this.handleCancel},{event:Ae.CursorChanged,method:this.handleCursorChanged},{event:"blur",method:this.handleBlur},{event:"focus",method:this.handleFocus}]}firstUpdated(t){super.firstUpdated(t),this.anchorElement=this.shadowRoot.querySelector(".select-container"),this.anchorExpressions=this.shadowRoot.querySelector("#anchor");const e=this.value;window.setTimeout((()=>{for(const t of this.children)if("TEMBA-OPTION"===t.tagName){const e={};for(const i of t.attributes)e[i.name]=i.value;this.staticOptions.push(e),null===t.getAttribute("selected")&&this.getValue(e)!=this.value||(null!==this.getAttribute("multi")?this.addValue(e):this.setValues([e]))}0!==this.values.length||this.placeholder&&!e||(0==this.staticOptions.length&&this.endpoint?jt(this.endpoint).then((t=>{if(t&&t.length>0){if(e){const i=t.find((t=>this.getValue(t)===e));if(i)return void this.setValues([i])}this.setValues([t[0]])}})):null!==this.getAttribute("multi")?this.addValue(this.staticOptions[0]):this.setValues([this.staticOptions[0]])),this.searchable&&0===this.staticOptions.length&&(this.quietMillis=200)}),0)}handleArrowClick(t){this.visibleOptions.length>0&&(this.visibleOptions=[],t.preventDefault(),t.stopPropagation())}renderSelectedItemDefault(t){return t?Z`
+    `}updated(t){if(super.updated(t),t.has("values")&&(this.updateInputs(),(this.multi||1===this.values.length||0==this.values.length&&t.get("values")&&t.get("values").length>0)&&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(Ae.FetchComplete)),(t.has("cursorIndex")||t.has("visibleOptions"))&&this.endpoint&&!this.fetching&&this.isPastFetchThreshold()&&this.fetchOptions(this.query,this.page+1),t.has("value")&&this.value&&!this.values.length&&this.staticOptions.length>0){const t=this.staticOptions.find((t=>this.getValue(t)===this.value));t&&this.setValues([t])}0===this.values.length&&!this.placeholder&&this.staticOptions.length>0&&this.setValues([this.staticOptions[0]])}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){const e=t.detail.selected;e.post&&this.endpoint?Kt(this.endpoint,e).then((t=>{t.status>=200&&t.status<300?(this.setSelectedOption(t.json),this.lruCache=Oe(20,6e4)):this.blur()})):this.setSelectedOption(e)}handleExpressionSelection(t){const e=t.detail.selected,i=t.detail.tabbed,o=this.shadowRoot.querySelector(".searchbox");ja(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.requestUpdate("input")}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.sortFunction&&t.sort(this.sortFunction),this.visibleOptions=t,this.fireCustomEvent(Ae.ContentChanged,{options:this.visibleOptions})}fetchExpressions(){const t=document.querySelector("temba-store");if(this.expressions&&t){const e=this.shadowRoot.querySelector(".searchbox"),i=Ha(e,t,"session"===this.expressions);return this.query=i.query,this.completionOptions=i.options,this.visibleOptions=[],this.anchorPosition=i.anchorPosition,void this.fireCustomEvent(Ae.FetchComplete)}}fetchOptions(t,e=0){if(this.completionOptions=[],!this.fetching){this.fetching=!0;const i=[...this.staticOptions],o=(t||"").trim().toLowerCase();if(this.tags&&o&&(i.find((t=>this.getValue(t)&&this.getValue(t).toLowerCase()===o))||i.splice(0,0,{name:t,value:t})),this.endpoint){let n=this.endpoint;t&&this.queryParam&&(n.indexOf("?")>-1?n+="&":n+="?",n+=this.queryParam+"="+encodeURIComponent(t)),e&&(n.indexOf("?")>-1?n+="&":n+="?",n+="page="+e),this.next&&(n=this.next);const s=this.lruCache.get(n);if(this.cache&&!this.tags&&s)return 0!==e||this.next?this.setVisibleOptions([...this.visibleOptions,...s.options]):(this.cursorIndex=0,this.setVisibleOptions([...i,...s.options])),this.complete=s.complete,this.next=s.next,void(this.fetching=!1);this.searchable&&!this.queryParam?jt(n).then((t=>{this.cache&&!this.tags&&(this.lruCache.set(n,{options:t,complete:!0,next:null}),this.complete=!0,this.next=null,this.setVisibleOptions([...i,...t]),this.fetching=!1)})):Ft(n).then((s=>{const r=this.getOptions(s).filter((t=>this.isMatch(t,o))),a=s.json;a.next&&(this.next=a.next),0!==e||this.next?(r.length>0&&this.setVisibleOptions([...this.visibleOptions,...r]),this.complete=this.isComplete(r,s)):(this.cursorIndex=0,this.setVisibleOptions([...i,...r]),this.query=t,this.complete=this.isComplete(this.visibleOptions,s)),this.cache&&!this.tags&&this.lruCache.set(n,{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(i)}}handleFocus(){this.focused||0!==this.visibleOptions.length||(this.focused=!0,this.searchOnFocus&&!this.removingSelection&&this.requestUpdate("input"))}handleBlur(){this.focused=!1,this.visibleOptions.length>0&&(this.input="",this.next=null,this.complete=!0,this.visibleOptions=[],this.cursorIndex=0)}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(this.focused=!0,"INPUT"!==t.target.tagName){const e=this.shadowRoot.querySelector("input");if(e)return e.click(),void e.focus();this.visibleOptions.length>0?(this.visibleOptions=[],t.preventDefault(),t.stopPropagation()):this.requestUpdate("input")}}getEventHandlers(){return[{event:Ae.Canceled,method:this.handleCancel},{event:Ae.CursorChanged,method:this.handleCursorChanged},{event:"blur",method:this.handleBlur},{event:"focus",method:this.handleFocus}]}firstUpdated(t){super.firstUpdated(t),this.anchorElement=this.shadowRoot.querySelector(".select-container"),this.anchorExpressions=this.shadowRoot.querySelector("#anchor");const e=this.value;window.setTimeout((()=>{for(const t of this.children)if("TEMBA-OPTION"===t.tagName){const e={};for(const i of t.attributes)e[i.name]=i.value;this.staticOptions.push(e),null===t.getAttribute("selected")&&this.getValue(e)!=this.value||(null!==this.getAttribute("multi")?this.addValue(e):this.setValues([e]))}0!==this.values.length||this.placeholder&&!e||(0==this.staticOptions.length&&this.endpoint?jt(this.endpoint).then((t=>{if(t&&t.length>0){if(e){const i=t.find((t=>this.getValue(t)===e));if(i)return void this.setValues([i])}this.setValues([t[0]])}})):null!==this.getAttribute("multi")?this.addValue(this.staticOptions[0]):this.setValues([this.staticOptions[0]])),this.searchable&&0===this.staticOptions.length&&(this.quietMillis=200)}),100)}handleArrowClick(t){this.visibleOptions.length>0&&(this.visibleOptions=[],t.preventDefault(),t.stopPropagation())}renderSelectedItemDefault(t){return t?Z`
       <div class="option-name" style="display:flex">
         ${t.icon?Z`<temba-icon
               name="${t.icon}"