@nyaruka/temba-components 0.84.0 → 0.86.0

package/CHANGELOG.md

@@ -4,8 +4,25 @@ 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.86.0](https://github.com/nyaruka/temba-components/compare/v0.85.0...v0.86.0)
+
+- Allow selection of disabled contact fields [`#422`](https://github.com/nyaruka/temba-components/pull/422)
+- Update webchat protocol [`#421`](https://github.com/nyaruka/temba-components/pull/421)
+- Updates to webchat protocol [`4a66673`](https://github.com/nyaruka/temba-components/commit/4a66673526f123474b18d2ae8842b33144b5e3bc)
+- fix typo [`f90a03f`](https://github.com/nyaruka/temba-components/commit/f90a03f4f4a8450371c81fb36465b8a73dca6e8f)
+
+#### [v0.85.0](https://github.com/nyaruka/temba-components/compare/v0.84.0...v0.85.0)
+
+> 1 May 2024
+
+- Switched to indexed template variables [`#419`](https://github.com/nyaruka/temba-components/pull/419)
+- Update template editor tests to match new format [`c81422a`](https://github.com/nyaruka/temba-components/commit/c81422a4ca59c66c96d8f809f255febda8cfe63d)
+- Switch to indexed template variables [`2401b74`](https://github.com/nyaruka/temba-components/commit/2401b74e3fea5c5a415c96d25470575c4fcfbd46)
+
 #### [v0.84.0](https://github.com/nyaruka/temba-components/compare/v0.83.0...v0.84.0)
 
+> 25 April 2024
+
 - Set selected option by value [`#418`](https://github.com/nyaruka/temba-components/pull/418)
 - Allow selecting text from contacts history events [`#417`](https://github.com/nyaruka/temba-components/pull/417)
 - Remove logging [`1b7272d`](https://github.com/nyaruka/temba-components/commit/1b7272d3d93eac7b13e1a1b2284f2c3544751460)

package/dist/temba-components.js

@@ -4770,7 +4770,8 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         margin-bottom: 0.5em;
       }
 
-      .prefix .name {
+      .prefix .name,
+      .label .name {
         padding: 0em 0.4em;
         color: rgba(100, 100, 100, 0.7);
         white-space: nowrap;
@@ -4779,6 +4780,17 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         font-size: 0.8em;
       }
 
+      .disabled .name {
+        margin-top: 1em;
+        margin-left: 0.75em;
+      }
+
+      .disabled .value {
+        margin-left: 0.9em;
+        margin-top: 0.1em;
+        min-height: 1.75em;
+      }
+
       .postfix {
         display: flex;
         align-items: stretch;
@@ -4939,7 +4951,17 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         cursor: default !important;
         opacity: 0.7;
       }
-    `}connectedCallback(){super.connectedCallback(),this.handleInput=this.handleInput.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleIconClick(t){const e=t.target.getAttribute("icon-action"),i=this.shadowRoot.querySelector("temba-textinput");"copy"===e&&navigator.clipboard&&(this.iconClass="clicked",navigator.clipboard.writeText(i.getDisplayValue()).then((()=>{window.setTimeout((()=>{this.iconClass=""}),300)}))),"search"===e&&this.fireCustomEvent(Ae.ButtonClicked,{key:this.key,value:this.value}),t.preventDefault(),t.stopPropagation()}handleResponse(t){200===t.status?(this.value=t.json.fields[this.key],this.status=Gl.Ready,this.dirty=!1):(this.status=Gl.Failure,this.dirty=!1)}handleSubmit(){const t=this.shadowRoot.querySelector("temba-textinput, temba-datepicker");t.value!==this.value&&(this.dirty=!0,this.status=Gl.Saving,this.value=t.value,this.fireEvent("change"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleDateChange(t){t.preventDefault(),t.stopPropagation(),this.dirty=!0}handleInput(t){const e=t.currentTarget;"Enter"===t.key?(e.blur(),this.handleSubmit()):e.value!==this.value&&(this.dirty=!0)}getInputType(t){return"numeric"===t?$e.Number:$e.Text}render(){const t=Z`<div class="save-state">
+    `}connectedCallback(){super.connectedCallback(),this.handleInput=this.handleInput.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleIconClick(t){const e=t.target.getAttribute("icon-action"),i=this.shadowRoot.querySelector("temba-textinput");"copy"===e&&navigator.clipboard&&(this.iconClass="clicked",navigator.clipboard.writeText(i.getDisplayValue()).then((()=>{window.setTimeout((()=>{this.iconClass=""}),300)}))),"search"===e&&this.fireCustomEvent(Ae.ButtonClicked,{key:this.key,value:this.value}),t.preventDefault(),t.stopPropagation()}handleResponse(t){200===t.status?(this.value=t.json.fields[this.key],this.status=Gl.Ready,this.dirty=!1):(this.status=Gl.Failure,this.dirty=!1)}handleSubmit(){const t=this.shadowRoot.querySelector("temba-textinput, temba-datepicker");t.value!==this.value&&(this.dirty=!0,this.status=Gl.Saving,this.value=t.value,this.fireEvent("change"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleDateChange(t){t.preventDefault(),t.stopPropagation(),this.dirty=!0}handleInput(t){const e=t.currentTarget;"Enter"===t.key?(e.blur(),this.handleSubmit()):e.value!==this.value&&(this.dirty=!0)}getInputType(t){return"numeric"===t?$e.Number:$e.Text}render(){if(this.disabled)return Z`<div
+        class=${this.status+" "+Zt({wrapper:!0,set:!!this.value,unset:!this.value,disabled:this.disabled,mutable:!this.disabled,dirty:this.dirty})}
+      >
+        <div class="label"><div class="name">${this.name}</div></div>
+        <div class="value">
+          ${"datetime"===this.type?this.value?Z`<temba-date
+                  value=${this.value}
+                  display="datetime"
+                ></temba-date>`:null:this.value}
+        </div>
+      </div>`;const t=Z`<div class="save-state">
       ${this.dirty?Z`<temba-button
             class="save-button"
             name="Save"
@@ -6929,7 +6951,7 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
       </div>
     `}}t([pe({type:String})],kh.prototype,"url",void 0),t([pe({type:String})],kh.prototype,"label",void 0),t([pe({type:Boolean})],kh.prototype,"zoom",void 0),t([pe({type:Boolean})],kh.prototype,"zooming",void 0);!function(t){t.DISCONNECTED="disconnected",t.CONNECTING="connecting",t.CONNECTED="connected"}(vh||(vh={}));const Sh={hour:"numeric",minute:"2-digit"},$h={weekday:void 0,year:"numeric",month:"short",day:"numeric"},Ch={weekday:void 0,year:"numeric",month:"short",day:"numeric",hour:"numeric",minute:"2-digit"};class Eh extends rt{static get styles(){return r`
       :host {
-        display: flex-inline;
+        display: flex;
         align-items: center;
         align-self: center;
         --curvature: 0.6em;
@@ -6938,6 +6960,10 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         font-weight: 400;
         font-size: 1.1em;
         --toggle-speed: 80ms;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
       }
 
       .header {
@@ -7210,7 +7236,7 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
       .input:disabled {
         background: transparent !important;
       }
-    `}constructor(){super(),this.messages=[],this.status=vh.DISCONNECTED,this.open=!1,this.hasPendingText=!1,this.hideTopScroll=!0,this.hideBottomScroll=!0}handleReconnect(){this.openSocket()}openSocket(){if(this.status!==vh.DISCONNECTED)return;this.status=vh.CONNECTING;const t=this;let e=`ws://localhost:8070/start/${this.channel}/`;this.urn&&(e=`${e}?chat_id=${this.urn}`),this.sock=new WebSocket(e),this.sock.onclose=function(e){console.log("Socket closed",e),t.status=vh.DISCONNECTED},this.sock.onmessage=function(e){console.log(e),t.status=vh.CONNECTED;const i=JSON.parse(e.data);"chat_started"===i.type?(t.urn!==i.chat_id&&(t.messages=[]),t.urn=i.chat_id,t.requestUpdate("messages")):"chat_resumed"===i.type?t.urn=i.chat_id:"msg_out"===i.type&&(i.timestamp=(new Date).getTime(),t.addMessage(i),t.requestUpdate("messages"))}}restoreFromLocal(){const t=JSON.parse(localStorage.getItem("temba-chat")||"{}"),e="urn"in t?t.urn:null;if(e&&!this.urn){this.urn=e;const i="messages"in t?t.messages:[];this.messages.push(...i)}}writeToLocal(){if(this.urn){const t={urn:this.urn,messages:this.messages,version:1};localStorage.setItem("temba-chat",JSON.stringify(t))}}firstUpdated(t){super.firstUpdated(t)}focusInput(){const t=this.shadowRoot.querySelector(".input");t&&t.focus()}updated(t){if(super.updated(t),this.open&&t.has("open")&&void 0!==t.get("open")){const t=this.shadowRoot.querySelector(".scroll"),e=t.scrollHeight>t.clientHeight;this.hideBottomScroll=!0,this.hideTopScroll=!e,this.scrollToBottom(),this.status===vh.DISCONNECTED&&this.openSocket()}t.has("status")&&this.status===vh.CONNECTED&&this.focusInput(),t.has("channel")&&this.restoreFromLocal(),t.has("messages")&&(this.writeToLocal(),this.scrollToBottom())}addMessage(t){let e=this.messages.length>0?this.messages[this.messages.length-1]:[];0===e.length||e[0].origin===t.origin||(e=[]),0===e.length&&this.messages.push(e),e.push(t)}openChat(){this.open=!0}handleKeyUp(t){this.hasPendingText&&"Enter"===t.key&&this.sendPendingMessage(),this.hasPendingText=t.target.value.length>0}sendPendingMessage(){if(this.status===vh.CONNECTED){const t=this.shadowRoot.querySelector(".input"),e=t.value;t.value="";const i={type:"msg_in",text:e,timestamp:(new Date).getTime()};this.addMessage(i),this.sock.send(JSON.stringify(i)),this.requestUpdate("messages"),this.hasPendingText=t.value.length>0}}scrollToBottom(){const t=this.shadowRoot.querySelector(".scroll");t&&(t.scrollTop=t.scrollHeight,this.hideBottomScroll=!0)}renderMessageGroup(t,e,i){let o=null;if(e>0){const t=i[e-1];t&&t.length>0&&(o=t[t.length-1].timestamp)}const n=t[0].timestamp;let s=null;if(n-o>18e5){let t=null;const e=new Date(n);o&&(t=new Date(o));s=!t||e.getDate()!==t.getDate()?Z`<div class="time">
+    `}constructor(){super(),this.messages=[],this.status=vh.DISCONNECTED,this.open=!1,this.hasPendingText=!1,this.hideTopScroll=!0,this.hideBottomScroll=!0}handleReconnect(){this.openSocket()}openSocket(){if(this.status!==vh.DISCONNECTED)return;this.status=vh.CONNECTING;const t=this;let e=`ws://localhost:8070/connect/${this.channel}/`;this.urn&&(e=`${e}?chat_id=${this.urn}`);const i=new WebSocket(e);this.sock=i,this.sock.onclose=function(e){console.log("Socket closed",e),t.status=vh.DISCONNECTED},this.sock.onopen=function(e){console.log("Socket opened",e),t.status=vh.CONNECTED,i.send(JSON.stringify({type:"start_chat"}))},this.sock.onmessage=function(e){console.log(e),t.status=vh.CONNECTED;const i=JSON.parse(e.data);"chat_started"===i.type?(t.urn!==i.chat_id&&(t.messages=[]),t.urn=i.chat_id,t.requestUpdate("messages")):"chat_resumed"===i.type?t.urn=i.chat_id:"msg_created"===i.type&&(i.timestamp=(new Date).getTime(),t.addMessage(i),t.requestUpdate("messages"))}}restoreFromLocal(){const t=JSON.parse(localStorage.getItem("temba-chat")||"{}"),e="urn"in t?t.urn:null;if(e&&!this.urn){this.urn=e;const i="messages"in t?t.messages:[];this.messages.push(...i)}}writeToLocal(){if(this.urn){const t={urn:this.urn,messages:this.messages,version:1};localStorage.setItem("temba-chat",JSON.stringify(t))}}firstUpdated(t){super.firstUpdated(t)}focusInput(){const t=this.shadowRoot.querySelector(".input");t&&t.focus()}updated(t){if(super.updated(t),this.open&&t.has("open")&&void 0!==t.get("open")){const t=this.shadowRoot.querySelector(".scroll"),e=t.scrollHeight>t.clientHeight;this.hideBottomScroll=!0,this.hideTopScroll=!e,this.scrollToBottom(),this.status===vh.DISCONNECTED&&this.openSocket()}t.has("status")&&this.status===vh.CONNECTED&&this.focusInput(),t.has("channel")&&this.restoreFromLocal(),t.has("messages")&&(this.writeToLocal(),this.scrollToBottom())}addMessage(t){let e=this.messages.length>0?this.messages[this.messages.length-1]:[];0===e.length||e[0].origin===t.origin||(e=[]),0===e.length&&this.messages.push(e),e.push(t)}openChat(){this.open=!0}handleKeyUp(t){this.hasPendingText&&"Enter"===t.key&&this.sendPendingMessage(),this.hasPendingText=t.target.value.length>0}sendPendingMessage(){if(this.status===vh.CONNECTED){const t=this.shadowRoot.querySelector(".input"),e=t.value;t.value="";const i={type:"send_msg",text:e};this.addMessage(i),this.sock.send(JSON.stringify(i)),this.requestUpdate("messages"),this.hasPendingText=t.value.length>0}}scrollToBottom(){const t=this.shadowRoot.querySelector(".scroll");t&&(t.scrollTop=t.scrollHeight,this.hideBottomScroll=!0)}renderMessageGroup(t,e,i){let o=null;if(e>0){const t=i[e-1];t&&t.length>0&&(o=t[t.length-1].timestamp)}const n=t[0].timestamp;let s=null;if(n-o>18e5){let t=null;const e=new Date(n);o&&(t=new Date(o));s=!t||e.getDate()!==t.getDate()?Z`<div class="time">
           ${e.toLocaleDateString(void 0,$h)}
         </div>`:Z`<div class="time">
           ${e.toLocaleTimeString(void 0,Sh)}
@@ -7839,15 +7865,15 @@ background: #ccc;
         padding: 1em;
         line-height: 2.2em;
       }
-    `}firstUpdated(t){super.firstUpdated(t)}updated(t){super.updated(t)}handleTemplateChanged(t){this.selectedTemplate=t.target.values[0];const[e,i]=this.lang.split("-"),o={};this.selectedTemplate?this.selectedTemplate.translations.forEach((t=>{if(t.locale===this.lang||!i&&t.locale.split("-")[0]===e){this.translation=t;for(const e of t.components){const t=e.params||[];t.length>0&&(o[e.name]=new Array(t.length).fill(""))}if(this.template===this.selectedTemplate.uuid)for(const t of Object.keys(this.params||{}))if(o[t])for(let e=0;e<this.params[t].length;e++)o[t][e]=this.params[t][e]}})):this.translation=null,this.params=o,this.fireCustomEvent(Ae.ContextChanged,{template:this.selectedTemplate,translation:this.translation,params:this.params})}handleVariableChanged(t){const e=t.target,i=parseInt(e.getAttribute("index"));this.params[e.name][i-1]=e.value,this.fireCustomEvent(Ae.ContentChanged,{template:this.selectedTemplate,translation:this.translation,params:this.params})}renderVariables(t){const e=t.content.split(/{{(\d+)}}/g);if(e.length>0){const i=e.map(((e,i)=>{const o=Math.round(i/2);return i%2==0?Z`<span class="text">${e}</span>`:Z`<temba-completion
+    `}firstUpdated(t){super.firstUpdated(t)}updated(t){super.updated(t)}handleTemplateChanged(t){const e=this.selectedTemplate;this.selectedTemplate=t.target.values[0];const[i,o]=this.lang.split("-");this.selectedTemplate?this.selectedTemplate.translations.forEach((t=>{if(t.locale===this.lang||!o&&t.locale.split("-")[0]===i){this.translation=t;const i=new Array((t.variables||[]).length).fill("");e||this.variables&&this.variables.forEach(((t,e)=>{i[e]=t})),this.variables=i}})):this.translation=null,this.fireCustomEvent(Ae.ContextChanged,{template:this.selectedTemplate,translation:this.translation,variables:this.variables})}handleVariableChanged(t){const e=t.target,i=parseInt(e.getAttribute("index"));this.variables[i]=e.value,this.fireCustomEvent(Ae.ContentChanged,{template:this.selectedTemplate,translation:this.translation,variables:this.variables})}renderVariables(t){const e=new RegExp(`{{(${Object.keys(t.variables||[]).join("|")})}}`,"g"),i=t.content.split(e);if(i.length>0){const e=i.map(((e,i)=>{if(i%2==0)return Z`<span class="text">${e}</span>`;const o=t.variables[e];return Z`<temba-completion
           class="variable"
           type="text"
-          value=${this.params[t.name][o-1]}
-          @change=${this.handleVariableChanged}
+          value=${o<this.variables.length?this.variables[o]:null}
+          @keyup=${this.handleVariableChanged}
           name="${t.name}"
           index="${o}"
-          placeholder="variable.."
-        ></temba-completion>`}));return Z`<div class="content">${i}</div>`}}renderComponents(t){const e=t.filter((t=>!t.type.startsWith("button/"))).map((t=>Z`<div class="${t.name}">
+          placeholder="{{${e}}}"
+        ></temba-completion>`}));return Z`<div class="content">${e}</div>`}}renderComponents(t){const e=t.filter((t=>!t.type.startsWith("button/"))).map((t=>Z`<div class="${t.name}">
             ${this.renderVariables(t)}
           </div>`)),i=t.filter((t=>t.type.startsWith("button/"))),o=i.length>0?this.renderButtons(i):null;return Z`<div class="main">${e}</div>
       <div class="buttons">
@@ -7884,7 +7910,7 @@ background: #ccc;
 
         ${this.template?Z` <div class="template">${t}</div>`:null}
       </div>
-    `}}function zh(t,e){window.customElements.get(t)||window.customElements.define(t,e)}t([pe({type:String})],Mh.prototype,"url",void 0),t([pe({type:String})],Mh.prototype,"template",void 0),t([pe({type:Object})],Mh.prototype,"selectedTemplate",void 0),t([pe({type:String})],Mh.prototype,"lang",void 0),t([pe({type:Object})],Mh.prototype,"params",void 0),t([pe({type:Object,attribute:!1})],Mh.prototype,"translation",void 0),t([pe({type:Boolean})],Mh.prototype,"translating",void 0),zh("temba-anchor",ql),zh("temba-alert",Al),zh("temba-store",nr),zh("temba-textinput",Le),zh("temba-datepicker",rh),zh("temba-date",gh),zh("temba-completion",Ga),zh("temba-checkbox",fe),zh("temba-select",Wa),zh("temba-options",sr),zh("temba-loading",el),zh("temba-lightbox",_h),zh("temba-button",Qa),zh("temba-omnibox",Pl),zh("temba-tip",Nl),zh("temba-contact-name",jl),zh("temba-contact-name-fetch",sh),zh("temba-contact-field",Kl),zh("temba-contact-fields",Wl),zh("temba-field-manager",hh),zh("temba-urn",Hl),zh("temba-content-menu",ph),zh("temba-field",tl),zh("temba-dialog",Ja),zh("temba-modax",Xa),zh("temba-charcount",cl),zh("temba-contact-history",Sl),zh("temba-contact-chat",ml),zh("temba-contact-details",class extends pl{static get styles(){return r`
+    `}}function zh(t,e){window.customElements.get(t)||window.customElements.define(t,e)}Mh.shadowRootOptions={...rt.shadowRootOptions,delegatesFocus:!0},t([pe({type:String})],Mh.prototype,"url",void 0),t([pe({type:String})],Mh.prototype,"template",void 0),t([pe({type:Object})],Mh.prototype,"selectedTemplate",void 0),t([pe({type:String})],Mh.prototype,"lang",void 0),t([pe({type:Array})],Mh.prototype,"variables",void 0),t([pe({type:Object,attribute:!1})],Mh.prototype,"translation",void 0),t([pe({type:Boolean})],Mh.prototype,"translating",void 0),zh("temba-anchor",ql),zh("temba-alert",Al),zh("temba-store",nr),zh("temba-textinput",Le),zh("temba-datepicker",rh),zh("temba-date",gh),zh("temba-completion",Ga),zh("temba-checkbox",fe),zh("temba-select",Wa),zh("temba-options",sr),zh("temba-loading",el),zh("temba-lightbox",_h),zh("temba-button",Qa),zh("temba-omnibox",Pl),zh("temba-tip",Nl),zh("temba-contact-name",jl),zh("temba-contact-name-fetch",sh),zh("temba-contact-field",Kl),zh("temba-contact-fields",Wl),zh("temba-field-manager",hh),zh("temba-urn",Hl),zh("temba-content-menu",ph),zh("temba-field",tl),zh("temba-dialog",Ja),zh("temba-modax",Xa),zh("temba-charcount",cl),zh("temba-contact-history",Sl),zh("temba-contact-chat",ml),zh("temba-contact-details",class extends pl{static get styles(){return r`
       .urn {
         display: flex;
         padding: 0.4em 1em 0.8em 1em;