@nyaruka/temba-components 0.80.0 → 0.81.0

package/CHANGELOG.md

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

@@ -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);
       }
 
@@ -882,7 +876,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}"
@@ -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>