@nyaruka/temba-components 0.80.1 → 0.81.0

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.81.0](https://github.com/nyaruka/temba-components/compare/v0.80.1...v0.81.0)
+
+- Heavier fonts [`#413`](https://github.com/nyaruka/temba-components/pull/413)
+
 #### [v0.80.1](https://github.com/nyaruka/temba-components/compare/v0.80.0...v0.80.1)
 
+> 10 April 2024
+
 - 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)

package/dist/temba-components.js

@@ -66,7 +66,6 @@ let rt=class extends w{constructor(){super(...arguments),this.renderOptions={hos
         font-family: var(--font-family);
         padding: 0px;
         margin-left: 8px;
-        font-weight: 300;
         font-size: 14px;
         line-height: 19px;
         flex-grow: 1;
@@ -178,7 +177,6 @@ const ve=t=>t??j
         line-height: normal;
         cursor: var(--input-cursor);
         resize: none;
-        font-weight: 300;
         width: 100%;
       }
 
@@ -191,7 +189,6 @@ const ve=t=>t??j
 
       .textinput::placeholder {
         color: var(--color-placeholder);
-        font-weight: 300;
       }
 
       .grow-wrap {
@@ -213,7 +210,6 @@ const ve=t=>t??j
         line-height: normal;
         cursor: text;
         resize: none;
-        font-weight: 300;
         width: 100%;
         visibility: hidden;
         word-break: break-word;
@@ -241,6 +237,7 @@ const ve=t=>t??j
           />`:null;let i=Z`
       <input
         class="textinput"
+        autocomplete="off"
         name=${this.name}
         type="${this.password||this.type===$e.Password?"password":this.type}"
         maxlength="${ve(this.maxlength)}"
@@ -800,7 +797,6 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
       }
 
       .searchable input {
-        font-weight: 300;
         visibility: visible;
         cursor: pointer;
         background: none;
@@ -829,7 +825,6 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
 
       .searchbox::placeholder {
         color: var(--color-placeholder);
-        font-weight: 300;
         font-size: 1em;
         line-height: var(--temba-select-selected-line-height);
         padding-left: 1px;
@@ -839,7 +834,6 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         font-size: var(--temba-select-selected-font-size);
         color: var(--color-placeholder);
         display: none;
-        font-weight: 300;
         line-height: var(--temba-select-selected-line-height);
       }
 
@@ -1221,7 +1215,6 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         align-items: center;
         font-size: 20px;
         padding: 12px 20px;
-        font-weight: 300;
         color: var(--header-text);
         background: var(--header-bg);
       }
@@ -1394,7 +1387,6 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         padding: 10px;
         margin-bottom: 10px;
         border-radius: 6px;
-        font-weight: 300;
       }
 
       .step-ball {
@@ -1570,7 +1562,6 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
       .secondary-button {
         background: transparent;
         color: var(--color-text);
-        font-weight: 300;
       }
 
       .destructive-button {
@@ -4598,15 +4589,13 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
       }
 
       .name {
-        font-size: 1.5rem;
+        font-size: var(--contact-name-font-size, 1.5rem);
         overflow: hidden;
         max-height: 2rem;
         line-height: 2rem;
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 1;
         text-overflow: ellipsis;
-        display: -webkit-box;
-        margin: auto;
       }
     `}render(){const t=this.urn?Z`<temba-urn size=${this.size} urn=${this.urn}></temba-urn>`:null;return Z`
       ${t}
@@ -5656,6 +5645,7 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
     </div>`}}t([pe({type:Boolean})],eh.prototype,"range",void 0),t([pe({type:Number})],eh.prototype,"min",void 0),t([pe({type:Number})],eh.prototype,"max",void 0);const ih="rgb(223, 65, 159)";class oh extends $l{static get styles(){return r`
       :host {
         overflow-y: auto !important;
+        --contact-name-font-size: 1em;
       }
 
       @media only screen and (max-height: 768px) {
@@ -5687,7 +5677,7 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         />`),e}createRenderOption(){this.renderOption=t=>{let e="";return t.exited_on||(e="font-weight:400;"),t.responded||(e+=""),Z`
         <div class="row" style="${e}display:flex;align-items:center">
           <div
-            style="width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
+            style="width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
           >
             <temba-contact-name
               name=${t.contact.name||t.contact.anon_display}
@@ -5911,7 +5901,6 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         color: var(--color-widget-text);
         border: 0px;
         font-family: var(--font-family);
-        font-weight: 300;
         outline: none;
         width: 100%;
         font-size: 13px;
@@ -6949,6 +6938,36 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         --curvature: 0.6em;
         --color-primary: hsla(208, 70%, 55%, 1);
         font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+        font-weight: 400;
+        font-size: 1.1em;
+        --toggle-speed: 80ms;
+      }
+
+      .header {
+        background: var(--color-primary);
+        height: 3em;
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+
+      .header slot {
+        flex-grow: 1;
+        padding: 1em;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 1.2em;
+        display: block;
+      }
+
+      .header .close-button {
+        margin: 0.5em;
+        color: rgba(255, 255, 255, 0.5);
+        cursor: pointer;
+      }
+
+      .header .close-button:hover {
+        cursor: pointer;
+        color: rgba(255, 255, 255, 1);
       }
 
       .block {
@@ -7006,9 +7025,9 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
           rgba(0, 0, 0, 0.2) 0px 1px 2px 0px,
           inset 0 0 0 0.25em rgba(0, 0, 0, 0.1);
         cursor: pointer;
-        transition: box-shadow 0.2s ease-out;
+        transition: box-shadow var(--toggle-speed) ease-out;
         position: absolute;
-        bottom: 1em;
+        bottom: 0.5em;
         right: 1em;
       }
 
@@ -7028,12 +7047,14 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         padding-bottom: 0.5em;
         background: #fafafa;
         border-radius: var(--curvature);
+        max-width: 70%;
       }
 
       .bubble .name {
-        font-size: 0.9em;
+        font-size: 0.95em;
         font-weight: 400;
-        margin-bottom: 0.5em;
+        color: #888;
+        margin-bottom: 0.25em;
       }
 
       .outgoing .bubble {
@@ -7044,10 +7065,12 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         background: var(--color-primary);
         color: white;
         border-top-right-radius: 0;
+        text-align: right;
       }
 
       .message {
         margin-bottom: 0.5em;
+        line-height: 1.2em;
       }
 
       .chat {
@@ -7058,16 +7081,16 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,
           rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 5em 5em 5em 5em;
         position: absolute;
-        bottom: 2em;
+        bottom: 3em;
         right: 1em;
-        transition: all 0.2s ease-out;
+        transition: all var(--toggle-speed) ease-out;
         transform: scale(0.9);
         pointer-events: none;
         opacity: 0;
       }
 
       .chat.open {
-        bottom: 6em;
+        bottom: 5em;
         opacity: 1;
         transform: scale(1);
         pointer-events: initial;
@@ -7099,7 +7122,7 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         position: absolute;
         max-width: 50vw;
         width: 28rem;
-        transition: opacity 0.1s ease-out;
+        transition: opacity var(--toggle-speed) ease-out;
       }
 
       .messages:after {
@@ -7117,7 +7140,7 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
         max-width: 50vw;
         width: 28rem;
         margin-right: 5em;
-        transition: opacity 0.1s ease-out;
+        transition: opacity var(--toggle-speed) ease-out;
       }
 
       .scroll-at-top .messages:before {
@@ -7131,6 +7154,8 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
       .input {
         border: none;
         flex-grow: 1;
+        color: #333;
+        font-size: 1em;
       }
 
       .input:focus {
@@ -7188,7 +7213,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){t.status=vh.DISCONNECTED},this.sock.onmessage=function(e){t.status=vh.CONNECTED;const i=JSON.parse(e.data);"chat_started"===i.type?(t.urn!==i.identifier&&(t.messages=[]),t.urn=i.identifier,t.requestUpdate("messages")):"chat_resumed"===i.type?t.urn=i.identifier:"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(console.log("Writing to localStorage.."),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")&&(console.log("messages changed",this.messages),this.writeToLocal(),console.log(this.messages),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/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">
           ${e.toLocaleDateString(void 0,$h)}
         </div>`:Z`<div class="time">
           ${e.toLocaleTimeString(void 0,Sh)}
@@ -7210,10 +7235,19 @@ class rr extends xe{constructor(t){if(super(t),this.it=j,t.type!==ye)throw Error
           ${t.map((t=>Z`<div class="message">${t.text}</div>`))}
         </div>
       </div>
-    </div>`}handleScroll(t){this.hideBottomScroll=Math.round(t.target.scrollTop+t.target.clientHeight)>=t.target.scrollHeight,this.hideTopScroll=0===t.target.scrollTop}handleClickInputPanel(t){this.shadowRoot.querySelector(".input").focus()}toggleChat(){this.open=!this.open}render(){return Z`
+    </div>`}handleScroll(t){this.hideBottomScroll=Math.round(t.target.scrollTop+t.target.clientHeight)>=t.target.scrollHeight,this.hideTopScroll=0===t.target.scrollTop}handleClickInputPanel(t){t.preventDefault(),t.stopPropagation();this.shadowRoot.querySelector(".input").focus()}toggleChat(){this.open=!this.open}render(){return Z`
       <div
         class="chat ${this.status} ${this.hideTopScroll?"scroll-at-top":""} ${this.hideBottomScroll?"scroll-at-bottom":""} ${this.open?"open":""}"
       >
+        <div class="header">
+          <slot name="header"></slot>
+          <temba-icon
+            name="close"
+            size="1.3"
+            class="close-button"
+            @click=${this.toggleChat}
+          ></temba-icon>
+        </div>
         <div class="messages">
           <div class="scroll" @scroll=${this.handleScroll}>
             ${this.messages?this.messages.map(((t,e,i)=>Z`${this.renderMessageGroup(t,e,i)}`)):null}
@@ -7956,7 +7990,7 @@ background: #ccc;
         font-weight: normal;
       }
     `}constructor(){super(),this.reverseRefresh=!1,this.internalFocusDisabled=!0,this.valueKey="target_url",this.renderOption=t=>{let e=null,i=null;return"incident:started"===t.type?"org:flagged"===t.incident.type?(e=ge.incidents,i="Your workspace was flagged, please contact support for assistance."):"org:suspended"===t.incident.type?(e=ge.incidents,i="Your workspace was suspended, please contact support for assistance."):"channel:disconnected"===t.incident.type?(e=ge.channel,i="Your android channel is not connected"):"channel:templates_failed"===t.incident.type?(e=ge.channel,i="Your WhatsApp channel templates failed syncing"):"webhooks:unhealthy"===t.incident.type&&(e=ge.webhook,i="Your webhook calls are not working properly."):"import:finished"===t.type?"contact"===t.import.type&&(e=ge.contact_import,i=`Imported ${t.import.num_records.toLocaleString()} contacts`):"export:finished"===t.type?"contact"===t.export.type?(e=ge.contact_export,i="Exported contacts"):"message"===t.export.type?(e=ge.message_export,i="Exported messages"):"results"===t.export.type?(e=ge.results_export,i="Exported flow results"):"ticket"===t.export.type&&(e=ge.tickets_export,i="Exported tickets"):"tickets:activity"===t.type?(e=ge.tickets,i="New ticket activity"):"tickets:opened"===t.type&&(e=ge.tickets,i="New unassigned ticket"),Z`<div
-        style="color:${"#333"};display:flex;align-items:flex-start;flex-direction:row;font-weight:${t.is_seen?300:400}"
+        style="color:${"#333"};display:flex;align-items:flex-start;flex-direction:row;font-weight:${t.is_seen?400:500}"
       >
         ${e?Z`<div style="margin-right:0.6em">
               <temba-icon name="${e}"></temba-icon>