@nyaruka/temba-components 0.85.0 → 0.86.0

package/CHANGELOG.md

@@ -4,8 +4,17 @@ 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)

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)}