@nyaruka/temba-components 0.32.0 → 0.32.2

package/.github/workflows/cla.yml

@@ -0,0 +1,25 @@
+name: "CLA Assistant"
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened,closed,synchronize]
+
+jobs:
+  CLAssistant:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "CLA Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        # Beta Release
+        uses: contributor-assistant/github-action@v2.2.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERSONAL_ACCESS_TOKEN : ${{ secrets.CLA_TOKEN }}
+        with:
+          path-to-signatures: 'signatures/version1/cla.json'
+          path-to-document: 'https://github.com/nyaruka/license/blob/main/TextIt_CLA.md'
+          branch: 'main'
+          allowlist: bot*
+          remote-organization-name: 'nyaruka'
+          remote-repository-name: 'legal'

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.32.2](https://github.com/nyaruka/temba-components/compare/v0.32.1...v0.32.2)
+
+- Always fire change for select when initially selected [`#209`](https://github.com/nyaruka/temba-components/pull/209)
+- Remove push hooks [`#208`](https://github.com/nyaruka/temba-components/pull/208)
+- Fix groups from losing icon on update [`#207`](https://github.com/nyaruka/temba-components/pull/207)
+- Fix field updates to prep response when caching [`d1f44b5`](https://github.com/nyaruka/temba-components/commit/d1f44b5750496536a83900b055b6a332f98253ef)
+- Create cla.yml [`58ba52d`](https://github.com/nyaruka/temba-components/commit/58ba52decd16bb06673fde5b8086eaaff7e63dc2)
+- Move update into super [`3a5aa60`](https://github.com/nyaruka/temba-components/commit/3a5aa606967f14362316461574a155db3b3fe917)
+
+#### [v0.32.1](https://github.com/nyaruka/temba-components/compare/v0.32.0...v0.32.1)
+
+> 16 September 2022
+
+- Truncate time when picking dates [`#205`](https://github.com/nyaruka/temba-components/pull/205)
+
 #### [v0.32.0](https://github.com/nyaruka/temba-components/compare/v0.31.9...v0.32.0)
 
+> 15 September 2022
+
 - Remove lit-flatpickr [`#204`](https://github.com/nyaruka/temba-components/pull/204)
 - Initial commit for html5 based datepicker [`a8fb395`](https://github.com/nyaruka/temba-components/commit/a8fb395c39890a9a30f580020430b1ead9711bbd)
 - Support both date and datetime [`46073b7`](https://github.com/nyaruka/temba-components/commit/46073b7ca4b6248e46a982b72e3fb19ad84e68d8)

package/{LICENSE.md → LICENSE}

@@ -1,6 +1,6 @@
-Temba Components - General components for building websites
+Temba Components - general components for building websites
 
-Copyright (C) 2020 Nyaruka
+Copyright (C) 2020-2022 TextIt
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
@@ -14,7 +14,7 @@ GNU Affero General Public License below for more details.
 
 ------------------------------------------------------------------------
 
-GNU AFFERO GENERAL PUBLIC LICENSE
+                    GNU AFFERO GENERAL PUBLIC LICENSE
                        Version 3, 19 November 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>

package/dist/{193d2225.js → 1b980073.js}

@@ -1626,7 +1626,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           </div>`:null;return P`<div class="counter${i?" attention":""}"><div class="counts">${this.count}${this.segments>1||t?P`<div class="segments">
             &nbsp;/&nbsp;${this.segments}${t?P`+`:null}
             <div></div>
-          </div>`:null}</div> ${n}</div></div>`}}t([it({type:String})],Nr.prototype,"text",void 0),t([it({type:Number})],Nr.prototype,"count",void 0),t([it({type:Number,attribute:!1})],Nr.prototype,"segments",void 0),t([it({type:Object,attribute:!1})],Nr.prototype,"extended",void 0);class Rr extends tt{prepareData(t){return t}refresh(){this.store.makeRequest(this.url,{prepareData:this.prepareData,force:!0})}handleStoreUpdated(t){t.detail.url===this.url&&(this.data=t.detail.data,this.fireCustomEvent(zt.Refreshed,{data:this.data}))}updated(t){super.updated(t),t.has("url")&&this.url&&this.store.makeRequest(this.url,{prepareData:this.prepareData})}connectedCallback(){super.connectedCallback(),this.store=document.querySelector("temba-store"),this.handleStoreUpdated=this.handleStoreUpdated.bind(this),this.prepareData=this.prepareData.bind(this),this.store&&this.store.addEventListener(zt.StoreUpdated,this.handleStoreUpdated)}disconnectedCallback(){super.disconnectedCallback(),this.store&&this.store.removeEventListener(zt.StoreUpdated,this.handleStoreUpdated)}}t([it({type:String})],Rr.prototype,"url",void 0),t([it({type:Object,attribute:!1})],Rr.prototype,"data",void 0);class Br extends Rr{constructor(){super(...arguments),this.endpoint="/api/v2/contacts.json?uuid="}prepareData(t){return t&&t.length>0?((t=t[0]).groups.forEach((t=>{t.is_dynamic=this.store.isDynamicGroup(t.uuid)})),t.groups.sort(((t,e)=>{if(!t.is_dynamic||!e.is_dynamic){if(t.is_dynamic)return-1;if(e.is_dynamic)return 1}return t.name.localeCompare(e.name)})),t):null}updateStoreContact(t){this.store.updateCache(`${this.endpoint}${this.contact}`,t)}updated(t){super.updated(t),t.has("contact")&&(this.contact?this.url=`${this.endpoint}${this.contact}`:this.url=null)}}t([it({type:String})],Br.prototype,"contact",void 0),t([it({type:Object,attribute:!1})],Br.prototype,"data",void 0),t([it({type:String})],Br.prototype,"endpoint",void 0);class qr extends Br{constructor(){super(),this.contactsEndpoint="/api/v2/contacts.json",this.currentChat="",this.currentNote="",this.showDetails=!0,this.toolbar=!1,this.monitor=!1,this.currentTicket=null,this.currentContact=null,this.agent="",this.refreshInterval=null,this.showDetails=Lt(At.TICKET_SHOW_DETAILS)}static get styles(){return s`
+          </div>`:null}</div> ${n}</div></div>`}}t([it({type:String})],Nr.prototype,"text",void 0),t([it({type:Number})],Nr.prototype,"count",void 0),t([it({type:Number,attribute:!1})],Nr.prototype,"segments",void 0),t([it({type:Object,attribute:!1})],Nr.prototype,"extended",void 0);class Rr extends tt{prepareData(t){return t}refresh(){this.store.makeRequest(this.url,{prepareData:this.prepareData,force:!0})}handleStoreUpdated(t){t.detail.url===this.url&&(this.data=t.detail.data,this.fireCustomEvent(zt.Refreshed,{data:this.data}))}updated(t){super.updated(t),t.has("url")&&this.url&&this.store.makeRequest(this.url,{prepareData:this.prepareData})}connectedCallback(){super.connectedCallback(),this.store=document.querySelector("temba-store"),this.handleStoreUpdated=this.handleStoreUpdated.bind(this),this.prepareData=this.prepareData.bind(this),this.store&&this.store.addEventListener(zt.StoreUpdated,this.handleStoreUpdated)}disconnectedCallback(){super.disconnectedCallback(),this.store&&this.store.removeEventListener(zt.StoreUpdated,this.handleStoreUpdated)}}t([it({type:String})],Rr.prototype,"url",void 0),t([it({type:Object,attribute:!1})],Rr.prototype,"data",void 0);class Br extends Rr{constructor(){super(...arguments),this.endpoint="/api/v2/contacts.json?uuid="}prepareData(t){return t&&t.length>0?((t=t[0]).groups.forEach((t=>{t.is_dynamic=this.store.isDynamicGroup(t.uuid)})),t.groups.sort(((t,e)=>{if(!t.is_dynamic||!e.is_dynamic){if(t.is_dynamic)return-1;if(e.is_dynamic)return 1}return t.name.localeCompare(e.name)})),t):null}setContact(t){this.data=this.prepareData([t]),this.store.updateCache(`${this.endpoint}${this.contact}`,this.data)}updated(t){super.updated(t),t.has("contact")&&(this.contact?this.url=`${this.endpoint}${this.contact}`:this.url=null)}}t([it({type:String})],Br.prototype,"contact",void 0),t([it({type:Object,attribute:!1})],Br.prototype,"data",void 0),t([it({type:String})],Br.prototype,"endpoint",void 0);class qr extends Br{constructor(){super(),this.contactsEndpoint="/api/v2/contacts.json",this.currentChat="",this.currentNote="",this.showDetails=!0,this.toolbar=!1,this.monitor=!1,this.currentTicket=null,this.currentContact=null,this.agent="",this.refreshInterval=null,this.showDetails=Lt(At.TICKET_SHOW_DETAILS)}static get styles(){return s`
       .left-pane {
         box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
         transition: box-shadow 600ms linear;
@@ -3917,7 +3917,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       slot[name='header'].show-header {
         display: block;
       }
-    `}setBubble(t,e){const i=da(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(zt.Ready))}reset(){this.loadItems(this.root)}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(zt.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=yt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=da(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),"modax-button"!=e.type)if(e.trigger)new Function(e.trigger)();else if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!0),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=da(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(zt.ButtonClicked,{title:e.name,href:e.href,on_submit:e.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=da(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!da(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=da(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return P`<temba-loading
+    `}setBubble(t,e){const i=da(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(zt.Ready))}reset(){this.loadItems(this.root)}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(zt.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=yt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=da(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),"modax-button"!=e.type)if(e.trigger)new Function(e.trigger)();else{if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!0);else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=da(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}this.requestUpdate("root")}this.dispatchEvent(new Event("change"))}else this.fireCustomEvent(zt.ButtonClicked,{title:e.name,href:e.href,on_submit:e.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=da(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!da(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=da(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return P`<temba-loading
         units="3"
         size="10"
         direction="column"
@@ -3987,7 +3987,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         padding: 0;
         border-radius: var(--curvature);
         background: #fff;
-        transform: translateY(2em);
+        transform: translateY(-1em);
         transition: all calc(0.6 * var(--transition-speed)) linear;
         user-select: none;
         margin-top: 0px;
@@ -4014,7 +4014,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .open .dropdown {
         opacity: 1;
         pointer-events: auto;
-        transform: translateY(0);
+        transform: translateY(0.5em);
       }
     `}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot.querySelector(".dropdown"),i=this.shadowRoot.querySelector(".arrow");i.style.borderWidth=this.arrowSize+"px",i.style.top="-"+this.arrowSize+"px",this.arrowOffset<0?i.style.right=Math.abs(this.arrowOffset)+"px":i.style.left=this.arrowOffset+"px",e.style.marginTop=this.offsetY+"px",e.offsetLeft+e.clientWidth>window.outerWidth?e.style.marginLeft="-"+(e.clientWidth-this.clientWidth-this.offsetX)+"px":e.style.marginLeft=this.offsetX+"px",e.addEventListener("blur",(()=>{window.setTimeout((()=>{this.open=!1}),200)}))}updated(t){super.updated(t),t.has("open")&&(this.open?this.classList.add("open"):this.classList.remove("open"))}handleOpen(){if(!this.open){this.open=!0;this.shadowRoot.querySelector(".dropdown").focus()}}render(){return P`
       <div class=${this.open?"open":""}>
@@ -4364,7 +4364,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         align-items: center;
         margin-top: 0.5em;
       }
-    `}connectedCallback(){super.connectedCallback(),this.handleFieldChanged=this.handleFieldChanged.bind(this)}updated(t){super.updated(t),t.has("data")&&Object.keys(this.data.fields).length<=10&&(this.showAll=!0)}handleFieldChanged(t){const e=t.currentTarget,i=e.value;this.data.fields[e.key]=i,wt("/api/v2/contacts.json?uuid="+this.data.uuid,{fields:{[e.key]:i}}).then((t=>{this.updateStoreContact(t.json)}))}handleToggle(t){const e=t.currentTarget;this.showAll=e.checked}render(){if(this.data){const t=Object.entries(this.data.fields).filter((t=>this.pinned&&this.store.getContactField(t[0]).pinned||!this.pinned&&!this.store.getContactField(t[0]).pinned)).sort(((t,e)=>{const[i]=t,[n]=e,o=this.store.getContactField(n).priority-this.store.getContactField(i).priority;return 0!==o?o:i.localeCompare(n)}));if(0==t.length)return P`<slot name="empty"></slot>`;const e=t.map((t=>{const[e,i]=t,n=this.store.getContactField(e);return P`<temba-contact-field
+    `}connectedCallback(){super.connectedCallback(),this.handleFieldChanged=this.handleFieldChanged.bind(this)}updated(t){super.updated(t),t.has("data")&&Object.keys(this.data.fields).length<=10&&(this.showAll=!0)}handleFieldChanged(t){const e=t.currentTarget,i=e.value;wt("/api/v2/contacts.json?uuid="+this.data.uuid,{fields:{[e.key]:i}}).then((t=>{this.setContact(t.json)}))}handleToggle(t){const e=t.currentTarget;this.showAll=e.checked}render(){if(this.data){const t=Object.entries(this.data.fields).filter((t=>this.pinned&&this.store.getContactField(t[0]).pinned||!this.pinned&&!this.store.getContactField(t[0]).pinned)).sort(((t,e)=>{const[i]=t,[n]=e,o=this.store.getContactField(n).priority-this.store.getContactField(i).priority;return 0!==o?o:i.localeCompare(n)}));if(0==t.length)return P`<slot name="empty"></slot>`;const e=t.map((t=>{const[e,i]=t,n=this.store.getContactField(e);return P`<temba-contact-field
           class=${i?"set":"unset"}
           key=${n.key}
           name=${n.label}
@@ -5096,7 +5096,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         margin: 0;
         padding: 0;
       }
-    `}serializeValue(t){return t}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Mo.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Mo.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.setValue(this.value)}updated(t){super.updated(t),t.has("timezone")&&this.time&&(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.requestUpdate("value"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleBlur(t){this.time?(this.datetime=Mo.fromISO(t.target.value,{zone:this.timezone}),this.setValue(this.datetime.toUTC().toISO())):this.setValue(t.target.value),this.fireEvent("change")}handleClicked(){this.shadowRoot.querySelector("input").focus()}render(){const t=gt({unset:!this.value});let e=null;return this.time&&this.datetime&&!this.datetime.invalid?e=this.datetime.toFormat("yyyy-LL-dd'T'HH:mm"):this.time||(e=this.value),P`
+    `}serializeValue(t){return t}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Mo.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Mo.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.datetime=Mo.fromSQL(this.value),this.setValue(this.datetime.toISODate())}updated(t){super.updated(t),t.has("timezone")&&this.time&&(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.requestUpdate("value"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleBlur(t){this.time?(this.datetime=Mo.fromISO(t.target.value,{zone:this.timezone}),this.setValue(this.datetime.toUTC().toISO())):this.setValue(t.target.value),this.fireEvent("change")}handleClicked(){this.shadowRoot.querySelector("input").focus()}render(){const t=gt({unset:!this.value});let e=null;return this.time&&this.datetime&&!this.datetime.invalid?e=this.datetime.toFormat("yyyy-LL-dd'T'HH:mm"):this.time||(e=this.value),P`
       <temba-field
         name=${this.name}
         .label="${this.label}"

package/dist/index.js

@@ -1626,7 +1626,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
           </div>`:null;return P`<div class="counter${i?" attention":""}"><div class="counts">${this.count}${this.segments>1||t?P`<div class="segments">
             &nbsp;/&nbsp;${this.segments}${t?P`+`:null}
             <div></div>
-          </div>`:null}</div> ${n}</div></div>`}}t([it({type:String})],Nr.prototype,"text",void 0),t([it({type:Number})],Nr.prototype,"count",void 0),t([it({type:Number,attribute:!1})],Nr.prototype,"segments",void 0),t([it({type:Object,attribute:!1})],Nr.prototype,"extended",void 0);class Rr extends tt{prepareData(t){return t}refresh(){this.store.makeRequest(this.url,{prepareData:this.prepareData,force:!0})}handleStoreUpdated(t){t.detail.url===this.url&&(this.data=t.detail.data,this.fireCustomEvent(zt.Refreshed,{data:this.data}))}updated(t){super.updated(t),t.has("url")&&this.url&&this.store.makeRequest(this.url,{prepareData:this.prepareData})}connectedCallback(){super.connectedCallback(),this.store=document.querySelector("temba-store"),this.handleStoreUpdated=this.handleStoreUpdated.bind(this),this.prepareData=this.prepareData.bind(this),this.store&&this.store.addEventListener(zt.StoreUpdated,this.handleStoreUpdated)}disconnectedCallback(){super.disconnectedCallback(),this.store&&this.store.removeEventListener(zt.StoreUpdated,this.handleStoreUpdated)}}t([it({type:String})],Rr.prototype,"url",void 0),t([it({type:Object,attribute:!1})],Rr.prototype,"data",void 0);class Br extends Rr{constructor(){super(...arguments),this.endpoint="/api/v2/contacts.json?uuid="}prepareData(t){return t&&t.length>0?((t=t[0]).groups.forEach((t=>{t.is_dynamic=this.store.isDynamicGroup(t.uuid)})),t.groups.sort(((t,e)=>{if(!t.is_dynamic||!e.is_dynamic){if(t.is_dynamic)return-1;if(e.is_dynamic)return 1}return t.name.localeCompare(e.name)})),t):null}updateStoreContact(t){this.store.updateCache(`${this.endpoint}${this.contact}`,t)}updated(t){super.updated(t),t.has("contact")&&(this.contact?this.url=`${this.endpoint}${this.contact}`:this.url=null)}}t([it({type:String})],Br.prototype,"contact",void 0),t([it({type:Object,attribute:!1})],Br.prototype,"data",void 0),t([it({type:String})],Br.prototype,"endpoint",void 0);class qr extends Br{constructor(){super(),this.contactsEndpoint="/api/v2/contacts.json",this.currentChat="",this.currentNote="",this.showDetails=!0,this.toolbar=!1,this.monitor=!1,this.currentTicket=null,this.currentContact=null,this.agent="",this.refreshInterval=null,this.showDetails=Lt(At.TICKET_SHOW_DETAILS)}static get styles(){return s`
+          </div>`:null}</div> ${n}</div></div>`}}t([it({type:String})],Nr.prototype,"text",void 0),t([it({type:Number})],Nr.prototype,"count",void 0),t([it({type:Number,attribute:!1})],Nr.prototype,"segments",void 0),t([it({type:Object,attribute:!1})],Nr.prototype,"extended",void 0);class Rr extends tt{prepareData(t){return t}refresh(){this.store.makeRequest(this.url,{prepareData:this.prepareData,force:!0})}handleStoreUpdated(t){t.detail.url===this.url&&(this.data=t.detail.data,this.fireCustomEvent(zt.Refreshed,{data:this.data}))}updated(t){super.updated(t),t.has("url")&&this.url&&this.store.makeRequest(this.url,{prepareData:this.prepareData})}connectedCallback(){super.connectedCallback(),this.store=document.querySelector("temba-store"),this.handleStoreUpdated=this.handleStoreUpdated.bind(this),this.prepareData=this.prepareData.bind(this),this.store&&this.store.addEventListener(zt.StoreUpdated,this.handleStoreUpdated)}disconnectedCallback(){super.disconnectedCallback(),this.store&&this.store.removeEventListener(zt.StoreUpdated,this.handleStoreUpdated)}}t([it({type:String})],Rr.prototype,"url",void 0),t([it({type:Object,attribute:!1})],Rr.prototype,"data",void 0);class Br extends Rr{constructor(){super(...arguments),this.endpoint="/api/v2/contacts.json?uuid="}prepareData(t){return t&&t.length>0?((t=t[0]).groups.forEach((t=>{t.is_dynamic=this.store.isDynamicGroup(t.uuid)})),t.groups.sort(((t,e)=>{if(!t.is_dynamic||!e.is_dynamic){if(t.is_dynamic)return-1;if(e.is_dynamic)return 1}return t.name.localeCompare(e.name)})),t):null}setContact(t){this.data=this.prepareData([t]),this.store.updateCache(`${this.endpoint}${this.contact}`,this.data)}updated(t){super.updated(t),t.has("contact")&&(this.contact?this.url=`${this.endpoint}${this.contact}`:this.url=null)}}t([it({type:String})],Br.prototype,"contact",void 0),t([it({type:Object,attribute:!1})],Br.prototype,"data",void 0),t([it({type:String})],Br.prototype,"endpoint",void 0);class qr extends Br{constructor(){super(),this.contactsEndpoint="/api/v2/contacts.json",this.currentChat="",this.currentNote="",this.showDetails=!0,this.toolbar=!1,this.monitor=!1,this.currentTicket=null,this.currentContact=null,this.agent="",this.refreshInterval=null,this.showDetails=Lt(At.TICKET_SHOW_DETAILS)}static get styles(){return s`
       .left-pane {
         box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
         transition: box-shadow 600ms linear;
@@ -3917,7 +3917,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       slot[name='header'].show-header {
         display: block;
       }
-    `}setBubble(t,e){const i=da(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(zt.Ready))}reset(){this.loadItems(this.root)}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(zt.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=yt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=da(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),"modax-button"!=e.type)if(e.trigger)new Function(e.trigger)();else if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!0),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=da(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(zt.ButtonClicked,{title:e.name,href:e.href,on_submit:e.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=da(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!da(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=da(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return P`<temba-loading
+    `}setBubble(t,e){const i=da(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(zt.Ready))}reset(){this.loadItems(this.root)}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(zt.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=yt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=da(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),"modax-button"!=e.type)if(e.trigger)new Function(e.trigger)();else{if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!0);else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=da(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}this.requestUpdate("root")}this.dispatchEvent(new Event("change"))}else this.fireCustomEvent(zt.ButtonClicked,{title:e.name,href:e.href,on_submit:e.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=da(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!da(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=da(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return P`<temba-loading
         units="3"
         size="10"
         direction="column"
@@ -3987,7 +3987,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         padding: 0;
         border-radius: var(--curvature);
         background: #fff;
-        transform: translateY(2em);
+        transform: translateY(-1em);
         transition: all calc(0.6 * var(--transition-speed)) linear;
         user-select: none;
         margin-top: 0px;
@@ -4014,7 +4014,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .open .dropdown {
         opacity: 1;
         pointer-events: auto;
-        transform: translateY(0);
+        transform: translateY(0.5em);
       }
     `}firstUpdated(t){super.firstUpdated(t);const e=this.shadowRoot.querySelector(".dropdown"),i=this.shadowRoot.querySelector(".arrow");i.style.borderWidth=this.arrowSize+"px",i.style.top="-"+this.arrowSize+"px",this.arrowOffset<0?i.style.right=Math.abs(this.arrowOffset)+"px":i.style.left=this.arrowOffset+"px",e.style.marginTop=this.offsetY+"px",e.offsetLeft+e.clientWidth>window.outerWidth?e.style.marginLeft="-"+(e.clientWidth-this.clientWidth-this.offsetX)+"px":e.style.marginLeft=this.offsetX+"px",e.addEventListener("blur",(()=>{window.setTimeout((()=>{this.open=!1}),200)}))}updated(t){super.updated(t),t.has("open")&&(this.open?this.classList.add("open"):this.classList.remove("open"))}handleOpen(){if(!this.open){this.open=!0;this.shadowRoot.querySelector(".dropdown").focus()}}render(){return P`
       <div class=${this.open?"open":""}>
@@ -4364,7 +4364,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         align-items: center;
         margin-top: 0.5em;
       }
-    `}connectedCallback(){super.connectedCallback(),this.handleFieldChanged=this.handleFieldChanged.bind(this)}updated(t){super.updated(t),t.has("data")&&Object.keys(this.data.fields).length<=10&&(this.showAll=!0)}handleFieldChanged(t){const e=t.currentTarget,i=e.value;this.data.fields[e.key]=i,wt("/api/v2/contacts.json?uuid="+this.data.uuid,{fields:{[e.key]:i}}).then((t=>{this.updateStoreContact(t.json)}))}handleToggle(t){const e=t.currentTarget;this.showAll=e.checked}render(){if(this.data){const t=Object.entries(this.data.fields).filter((t=>this.pinned&&this.store.getContactField(t[0]).pinned||!this.pinned&&!this.store.getContactField(t[0]).pinned)).sort(((t,e)=>{const[i]=t,[n]=e,o=this.store.getContactField(n).priority-this.store.getContactField(i).priority;return 0!==o?o:i.localeCompare(n)}));if(0==t.length)return P`<slot name="empty"></slot>`;const e=t.map((t=>{const[e,i]=t,n=this.store.getContactField(e);return P`<temba-contact-field
+    `}connectedCallback(){super.connectedCallback(),this.handleFieldChanged=this.handleFieldChanged.bind(this)}updated(t){super.updated(t),t.has("data")&&Object.keys(this.data.fields).length<=10&&(this.showAll=!0)}handleFieldChanged(t){const e=t.currentTarget,i=e.value;wt("/api/v2/contacts.json?uuid="+this.data.uuid,{fields:{[e.key]:i}}).then((t=>{this.setContact(t.json)}))}handleToggle(t){const e=t.currentTarget;this.showAll=e.checked}render(){if(this.data){const t=Object.entries(this.data.fields).filter((t=>this.pinned&&this.store.getContactField(t[0]).pinned||!this.pinned&&!this.store.getContactField(t[0]).pinned)).sort(((t,e)=>{const[i]=t,[n]=e,o=this.store.getContactField(n).priority-this.store.getContactField(i).priority;return 0!==o?o:i.localeCompare(n)}));if(0==t.length)return P`<slot name="empty"></slot>`;const e=t.map((t=>{const[e,i]=t,n=this.store.getContactField(e);return P`<temba-contact-field
           class=${i?"set":"unset"}
           key=${n.key}
           name=${n.label}
@@ -5096,7 +5096,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         margin: 0;
         padding: 0;
       }
-    `}serializeValue(t){return t}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Mo.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Mo.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.setValue(this.value)}updated(t){super.updated(t),t.has("timezone")&&this.time&&(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.requestUpdate("value"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleBlur(t){this.time?(this.datetime=Mo.fromISO(t.target.value,{zone:this.timezone}),this.setValue(this.datetime.toUTC().toISO())):this.setValue(t.target.value),this.fireEvent("change")}handleClicked(){this.shadowRoot.querySelector("input").focus()}render(){const t=gt({unset:!this.value});let e=null;return this.time&&this.datetime&&!this.datetime.invalid?e=this.datetime.toFormat("yyyy-LL-dd'T'HH:mm"):this.time||(e=this.value),P`
+    `}serializeValue(t){return t}firstUpdated(t){if(t.has("value"))if(this.time){if(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.value){let t=Mo.fromSQL(this.value).setZone(this.timezone);t.invalid&&(t=Mo.fromISO(this.value).setZone(this.timezone)),this.datetime=t,this.setValue(this.datetime.toUTC().toISO())}}else this.datetime=Mo.fromSQL(this.value),this.setValue(this.datetime.toISODate())}updated(t){super.updated(t),t.has("timezone")&&this.time&&(this.timezone=this.timezone||Intl.DateTimeFormat().resolvedOptions().timeZone,this.timezoneFriendly=this.timezone.replace("_"," ").replace("/",", "),this.requestUpdate("value"))}handleChange(t){t.preventDefault(),t.stopPropagation()}handleBlur(t){this.time?(this.datetime=Mo.fromISO(t.target.value,{zone:this.timezone}),this.setValue(this.datetime.toUTC().toISO())):this.setValue(t.target.value),this.fireEvent("change")}handleClicked(){this.shadowRoot.querySelector("input").focus()}render(){const t=gt({unset:!this.value});let e=null;return this.time&&this.datetime&&!this.datetime.invalid?e=this.datetime.toFormat("yyyy-LL-dd'T'HH:mm"):this.time||(e=this.value),P`
       <temba-field
         name=${this.name}
         .label="${this.label}"

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"193d2225.js",revision:"c7e8c8232aec09f7b22902cf2eae8297"},{url:"templates/components-body.html",revision:"0d257e3ce0aea0c848b6fc93824af73b"},{url:"templates/components-head.html",revision:"02dc3df226f8db28fb7ca42a749b28e7"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"1b980073.js",revision:"311292626edd3970559a36f0c8f5be2e"},{url:"templates/components-body.html",revision:"b3eabfe06e894a7aeeb8ce47507efe89"},{url:"templates/components-head.html",revision:"80991daad27c97bbc8acc25ab38d016c"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/fd57cafc550e15880df4ac5ff363bc2e/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"193d2225.js\",\n    \"revision\": \"c7e8c8232aec09f7b22902cf2eae8297\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"0d257e3ce0aea0c848b6fc93824af73b\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"02dc3df226f8db28fb7ca42a749b28e7\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/d469fd2b299aa962e94419900b75f639/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"1b980073.js\",\n    \"revision\": \"311292626edd3970559a36f0c8f5be2e\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"b3eabfe06e894a7aeeb8ce47507efe89\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"80991daad27c97bbc8acc25ab38d016c\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/193d2225.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.32.0"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/1b980073.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.32.2"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/193d2225.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/1b980073.js" crossorigin="anonymous">

package/out-tsc/src/contacts/ContactFields.js

@@ -87,11 +87,11 @@ export class ContactFields extends ContactStoreElement {
     handleFieldChanged(evt) {
         const field = evt.currentTarget;
         const value = field.value;
-        this.data.fields[field.key] = value;
         postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
             fields: { [field.key]: value },
         }).then((response) => {
-            this.updateStoreContact(response.json);
+            // returns a single contact with latest updates
+            this.setContact(response.json);
         });
     }
     handleToggle(evt) {

package/out-tsc/src/contacts/ContactFields.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Checkbox } from '../checkbox/Checkbox';\n\nconst MIN_FOR_FILTER = 10;\n\nexport class ContactFields extends ContactStoreElement {\n  static get styles() {\n    return css`\n      :host {\n        --curvature-widget: 0px;\n      }\n\n      .fields {\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .field {\n        display: flex;\n        margin: 0.3em 0.3em;\n        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);\n        border-radius: 0px;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .show-all .unset {\n        display: block;\n      }\n\n      .unset {\n        display: none;\n      }\n\n      .field:hover {\n        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),\n          0px 0px 0px 2px var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .label {\n        padding: 0.25em 1em;\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n        color: #777;\n        font-size: 0.9em;\n        font-weight: 400;\n        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      .value {\n        --icon-color: #ddd;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        padding: 0.25em 1em;\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n        font-size: 0.9em;\n      }\n\n      temba-contact-field {\n      }\n\n      .footer {\n        margin-bottom: 0;\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-top: 0.5em;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  pinned: boolean;\n\n  @property({ type: Boolean })\n  system: boolean;\n\n  @property({ type: Boolean })\n  dirty: boolean;\n\n  @property({ type: Boolean })\n  showAll: boolean;\n\n  @property({ type: String })\n  timezone: string;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data')) {\n      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {\n        this.showAll = true;\n      }\n    }\n  }\n\n  public handleFieldChanged(evt: InputEvent) {\n    const field = evt.currentTarget as ContactFieldEditor;\n    const value = field.value;\n    this.data.fields[field.key] = value;\n    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value },\n    }).then((response: any) => {\n      this.updateStoreContact(response.json);\n    });\n  }\n\n  public handleToggle(evt: Event) {\n    const checkbox = evt.currentTarget as Checkbox;\n    this.showAll = checkbox.checked;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const fieldsToShow = Object.entries(this.data.fields)\n        .filter((entry: [string, string]) => {\n          return (\n            (this.pinned && this.store.getContactField(entry[0]).pinned) ||\n            (!this.pinned && !this.store.getContactField(entry[0]).pinned)\n          );\n        })\n        .sort((a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const priority =\n            this.store.getContactField(bk).priority -\n            this.store.getContactField(ak).priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        });\n\n      if (fieldsToShow.length == 0) {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n\n      const fields = fieldsToShow.map((entry: [string, string]) => {\n        const [k, v] = entry;\n        const field = this.store.getContactField(k);\n        return html`<temba-contact-field\n          class=${v ? 'set' : 'unset'}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n          timezone=${this.timezone}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=\"fields ${this.showAll || this.pinned ? 'show-all' : ''}\">\n          ${fields}\n        </div>\n\n        ${!this.pinned && Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n          ? html`<div class=\"footer\">\n              <div style=\"flex-grow: 1\"></div>\n              <div>\n                <temba-checkbox\n                  ?checked=${this.showAll}\n                  @change=${this.handleToggle}\n                  label=\"Show All\"\n                />\n              </div>\n            </div>`\n          : null}\n      `;\n    }\n\n    return null;\n  }\n}\n"]}
+{"version":3,"file":"ContactFields.js","sourceRoot":"","sources":["../../../src/contacts/ContactFields.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,MAAM,cAAc,GAAG,EAAE,CAAC;AAE1B,MAAM,OAAO,aAAc,SAAQ,mBAAmB;IACpD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgET,CAAC;IACJ,CAAC;IAiBD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,IAAI,cAAc,EAAE;gBAC1D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;aACrB;SACF;IACH,CAAC;IAEM,kBAAkB,CAAC,GAAe;QACvC,MAAM,KAAK,GAAG,GAAG,CAAC,aAAmC,CAAC;QACtD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QAC1B,QAAQ,CAAC,6BAA6B,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACvD,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE;SAC/B,CAAC,CAAC,IAAI,CAAC,CAAC,QAAa,EAAE,EAAE;YACxB,+CAA+C;YAC/C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,YAAY,CAAC,GAAU;QAC5B,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAyB,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;IAClC,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;iBAClD,MAAM,CAAC,CAAC,KAAuB,EAAE,EAAE;gBAClC,OAAO,CACL,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;oBAC5D,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAC/D,CAAC;YACJ,CAAC,CAAC;iBACD,IAAI,CAAC,CAAC,CAAmB,EAAE,CAAmB,EAAE,EAAE;gBACjD,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;gBACf,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;gBACf,MAAM,QAAQ,GACZ,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,QAAQ;oBACvC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC;gBAC1C,IAAI,QAAQ,KAAK,CAAC,EAAE;oBAClB,OAAO,QAAQ,CAAC;iBACjB;gBAED,OAAO,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;YAC9B,CAAC,CAAC,CAAC;YAEL,IAAI,YAAY,CAAC,MAAM,IAAI,CAAC,EAAE;gBAC5B,OAAO,IAAI,CAAA,4BAA4B,CAAC;aACzC;YAED,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,KAAuB,EAAE,EAAE;gBAC1D,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC;gBACrB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;gBAC5C,OAAO,IAAI,CAAA;kBACD,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;gBACrB,KAAK,CAAC,GAAG;iBACR,KAAK,CAAC,KAAK;kBACV,CAAC;iBACF,KAAK,CAAC,UAAU;oBACb,IAAI,CAAC,kBAAkB;qBACtB,IAAI,CAAC,QAAQ;gCACF,CAAC;YAC3B,CAAC,CAAC,CAAC;YAEH,OAAO,IAAI,CAAA;6BACY,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC9D,MAAM;;;UAGR,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,IAAI,cAAc;gBACtE,CAAC,CAAC,IAAI,CAAA;;;;6BAIa,IAAI,CAAC,OAAO;4BACb,IAAI,CAAC,YAAY;;;;mBAI1B;gBACT,CAAC,CAAC,IAAI;OACT,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AA5GC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACb;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACV","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { postJSON } from '../utils';\nimport { ContactFieldEditor } from './ContactFieldEditor';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Checkbox } from '../checkbox/Checkbox';\n\nconst MIN_FOR_FILTER = 10;\n\nexport class ContactFields extends ContactStoreElement {\n  static get styles() {\n    return css`\n      :host {\n        --curvature-widget: 0px;\n      }\n\n      .fields {\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .field {\n        display: flex;\n        margin: 0.3em 0.3em;\n        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);\n        border-radius: 0px;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .show-all .unset {\n        display: block;\n      }\n\n      .unset {\n        display: none;\n      }\n\n      .field:hover {\n        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),\n          0px 0px 0px 2px var(--color-link-primary);\n        cursor: pointer;\n      }\n\n      .label {\n        padding: 0.25em 1em;\n        border-top-left-radius: 0px;\n        border-bottom-left-radius: 0px;\n        color: #777;\n        font-size: 0.9em;\n        font-weight: 400;\n        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;\n      }\n\n      .value {\n        --icon-color: #ddd;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        padding: 0.25em 1em;\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n        font-size: 0.9em;\n      }\n\n      temba-contact-field {\n      }\n\n      .footer {\n        margin-bottom: 0;\n        display: flex;\n        background: #fff;\n        align-items: center;\n        margin-top: 0.5em;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  pinned: boolean;\n\n  @property({ type: Boolean })\n  system: boolean;\n\n  @property({ type: Boolean })\n  dirty: boolean;\n\n  @property({ type: Boolean })\n  showAll: boolean;\n\n  @property({ type: String })\n  timezone: string;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.handleFieldChanged = this.handleFieldChanged.bind(this);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data')) {\n      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {\n        this.showAll = true;\n      }\n    }\n  }\n\n  public handleFieldChanged(evt: InputEvent) {\n    const field = evt.currentTarget as ContactFieldEditor;\n    const value = field.value;\n    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {\n      fields: { [field.key]: value },\n    }).then((response: any) => {\n      // returns a single contact with latest updates\n      this.setContact(response.json);\n    });\n  }\n\n  public handleToggle(evt: Event) {\n    const checkbox = evt.currentTarget as Checkbox;\n    this.showAll = checkbox.checked;\n  }\n\n  public render(): TemplateResult {\n    if (this.data) {\n      const fieldsToShow = Object.entries(this.data.fields)\n        .filter((entry: [string, string]) => {\n          return (\n            (this.pinned && this.store.getContactField(entry[0]).pinned) ||\n            (!this.pinned && !this.store.getContactField(entry[0]).pinned)\n          );\n        })\n        .sort((a: [string, string], b: [string, string]) => {\n          const [ak] = a;\n          const [bk] = b;\n          const priority =\n            this.store.getContactField(bk).priority -\n            this.store.getContactField(ak).priority;\n          if (priority !== 0) {\n            return priority;\n          }\n\n          return ak.localeCompare(bk);\n        });\n\n      if (fieldsToShow.length == 0) {\n        return html`<slot name=\"empty\"></slot>`;\n      }\n\n      const fields = fieldsToShow.map((entry: [string, string]) => {\n        const [k, v] = entry;\n        const field = this.store.getContactField(k);\n        return html`<temba-contact-field\n          class=${v ? 'set' : 'unset'}\n          key=${field.key}\n          name=${field.label}\n          value=${v}\n          type=${field.value_type}\n          @change=${this.handleFieldChanged}\n          timezone=${this.timezone}\n        ></temba-contact-field>`;\n      });\n\n      return html`\n        <div class=\"fields ${this.showAll || this.pinned ? 'show-all' : ''}\">\n          ${fields}\n        </div>\n\n        ${!this.pinned && Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n          ? html`<div class=\"footer\">\n              <div style=\"flex-grow: 1\"></div>\n              <div>\n                <temba-checkbox\n                  ?checked=${this.showAll}\n                  @change=${this.handleToggle}\n                  label=\"Show All\"\n                />\n              </div>\n            </div>`\n          : null}\n      `;\n    }\n\n    return null;\n  }\n}\n"]}

package/out-tsc/src/contacts/ContactStoreElement.js

@@ -27,8 +27,10 @@ export class ContactStoreElement extends StoreElement {
         }
         return null;
     }
-    updateStoreContact(value) {
-        this.store.updateCache(`${this.endpoint}${this.contact}`, value);
+    setContact(contact) {
+        // make sure contact data is properly prepped
+        this.data = this.prepareData([contact]);
+        this.store.updateCache(`${this.endpoint}${this.contact}`, this.data);
     }
     updated(changes) {
         super.updated(changes);

package/out-tsc/src/contacts/ContactStoreElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactStoreElement.js","sourceRoot":"","sources":["../../../src/contacts/ContactStoreElement.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,OAAO,mBAAoB,SAAQ,YAAY;IAArD;;QAQE,aAAQ,GAAG,6BAA6B,CAAC;IA4C3C,CAAC;IA1CC,WAAW,CAAC,IAAS;QACnB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACf,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAY,EAAE,EAAE;gBACnC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAQ,EAAE,CAAQ,EAAE,EAAE;gBACtC,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE;oBAClC,IAAI,CAAC,CAAC,UAAU,EAAE;wBAChB,OAAO,CAAC,CAAC,CAAC;qBACX;oBAED,IAAI,CAAC,CAAC,UAAU,EAAE;wBAChB,OAAO,CAAC,CAAC;qBACV;iBACF;gBAED,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;YAEH,OAAO,IAAI,CAAC;SACb;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,kBAAkB,CAAC,KAAU;QAClC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;IACnE,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;aAC9C;iBAAM;gBACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;aACjB;SACF;IACH,CAAC;CACF;AAlDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAC/B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACc","sourcesContent":["import { PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, Group } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\n\nexport class ContactStoreElement extends StoreElement {\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: Object, attribute: false })\n  data: Contact;\n\n  @property({ type: String })\n  endpoint = '/api/v2/contacts.json?uuid=';\n\n  prepareData(data: any) {\n    if (data && data.length > 0) {\n      data = data[0];\n      data.groups.forEach((group: Group) => {\n        group.is_dynamic = this.store.isDynamicGroup(group.uuid);\n      });\n\n      data.groups.sort((a: Group, b: Group) => {\n        if (!a.is_dynamic || !b.is_dynamic) {\n          if (a.is_dynamic) {\n            return -1;\n          }\n\n          if (b.is_dynamic) {\n            return 1;\n          }\n        }\n\n        return a.name.localeCompare(b.name);\n      });\n\n      return data;\n    }\n    return null;\n  }\n\n  public updateStoreContact(value: any) {\n    this.store.updateCache(`${this.endpoint}${this.contact}`, value);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact')) {\n      if (this.contact) {\n        this.url = `${this.endpoint}${this.contact}`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"ContactStoreElement.js","sourceRoot":"","sources":["../../../src/contacts/ContactStoreElement.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,OAAO,mBAAoB,SAAQ,YAAY;IAArD;;QAQE,aAAQ,GAAG,6BAA6B,CAAC;IA8C3C,CAAC;IA5CC,WAAW,CAAC,IAAS;QACnB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;YACf,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAY,EAAE,EAAE;gBACnC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAQ,EAAE,CAAQ,EAAE,EAAE;gBACtC,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,UAAU,EAAE;oBAClC,IAAI,CAAC,CAAC,UAAU,EAAE;wBAChB,OAAO,CAAC,CAAC,CAAC;qBACX;oBAED,IAAI,CAAC,CAAC,UAAU,EAAE;wBAChB,OAAO,CAAC,CAAC;qBACV;iBACF;gBAED,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;YAEH,OAAO,IAAI,CAAC;SACb;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,UAAU,CAAC,OAAY;QAC5B,6CAA6C;QAC7C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACvE,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;aAC9C;iBAAM;gBACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;aACjB;SACF;IACH,CAAC;CACF;AApDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAC/B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACc","sourcesContent":["import { PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Contact, Group } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\n\nexport class ContactStoreElement extends StoreElement {\n  @property({ type: String })\n  contact: string;\n\n  @property({ type: Object, attribute: false })\n  data: Contact;\n\n  @property({ type: String })\n  endpoint = '/api/v2/contacts.json?uuid=';\n\n  prepareData(data: any) {\n    if (data && data.length > 0) {\n      data = data[0];\n      data.groups.forEach((group: Group) => {\n        group.is_dynamic = this.store.isDynamicGroup(group.uuid);\n      });\n\n      data.groups.sort((a: Group, b: Group) => {\n        if (!a.is_dynamic || !b.is_dynamic) {\n          if (a.is_dynamic) {\n            return -1;\n          }\n\n          if (b.is_dynamic) {\n            return 1;\n          }\n        }\n\n        return a.name.localeCompare(b.name);\n      });\n\n      return data;\n    }\n    return null;\n  }\n\n  public setContact(contact: any) {\n    // make sure contact data is properly prepped\n    this.data = this.prepareData([contact]);\n    this.store.updateCache(`${this.endpoint}${this.contact}`, this.data);\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('contact')) {\n      if (this.contact) {\n        this.url = `${this.endpoint}${this.contact}`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n}\n"]}

package/out-tsc/src/datepicker/DatePicker.js

@@ -138,7 +138,8 @@ export default class DatePicker extends FormElement {
                 }
             }
             else {
-                this.setValue(this.value);
+                this.datetime = DateTime.fromSQL(this.value);
+                this.setValue(this.datetime.toISODate());
             }
         }
     }

package/out-tsc/src/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/datepicker/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FormElement } from '../FormElement';\nimport { getClasses } from '../utils';\nimport { DateTime } from 'luxon';\n\nexport default class DatePicker extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      .container {\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        display: flex;\n        cursor: pointer;\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .input-wrapper {\n        padding: var(--temba-textinput-padding);\n        flex-grow: 1;\n      }\n\n      .tz {\n        margin-left: 0.5em;\n        font-size: 0.8em;\n        flex-direction: column;\n        align-self: stretch;\n        color: #888;\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        padding: 0em 1em;\n        font-weight: 400;\n        cursor: pointer;\n        margin: auto;\n      }\n\n      .tz .label {\n        font-size: 0.8em;\n        color: #aaa;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz .zone {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz-wrapper {\n        background: #efefef;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      input {\n        color: var(--color-widget-text);\n        border: 0px;\n        font-family: var(--font-family);\n        font-weight: 300;\n        outline: none;\n        width: 100%;\n        font-size: 13px;\n        padding: 0px;\n        margin: 0px;\n        line-height: 1em;\n      }\n\n      input.unset {\n        color: #ddd;\n      }\n\n      input.unset:focus {\n        color: var(--color-widget-text);\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      ::-webkit-calendar-picker-indicator {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23bbbbbb\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n\n      ::-webkit-calendar-picker-indicator:hover {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23777777\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  timezone = '';\n\n  @property({ type: String })\n  timezoneFriendly = '';\n\n  @property({ type: Object })\n  datetime = null;\n\n  @property({ type: Boolean })\n  time = false;\n\n  /** we just return the value since it should be a string */\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changed.has('value')) {\n      // default to the local browser zone\n      if (this.time) {\n        this.timezone =\n          this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n        this.timezoneFriendly = this.timezone\n          .replace('_', ' ')\n          .replace('/', ', ');\n\n        if (this.value) {\n          // we fire a change event on blur\n          let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);\n          // if we can't read it as a sql stamp, try iso\n          if (datetime.invalid) {\n            datetime = DateTime.fromISO(this.value).setZone(this.timezone);\n          }\n          this.datetime = datetime;\n          this.setValue(this.datetime.toUTC().toISO());\n        }\n      } else {\n        this.setValue(this.value);\n      }\n    }\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('timezone') && this.time) {\n      this.timezone =\n        this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n      this.timezoneFriendly = this.timezone\n        .replace('_', ' ')\n        .replace('/', ', ');\n      this.requestUpdate('value');\n    }\n  }\n\n  public handleChange(event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  public handleBlur(event) {\n    if (this.time) {\n      this.datetime = DateTime.fromISO(event.target.value, {\n        zone: this.timezone,\n      });\n      this.setValue(this.datetime.toUTC().toISO());\n    } else {\n      this.setValue(event.target.value);\n    }\n    this.fireEvent('change');\n  }\n\n  public handleClicked() {\n    this.shadowRoot.querySelector('input').focus();\n  }\n\n  public render(): TemplateResult {\n    const classes = getClasses({ unset: !this.value });\n\n    let dateWidgetValue = null;\n    if (this.time && this.datetime && !this.datetime.invalid) {\n      dateWidgetValue = this.datetime.toFormat(\"yyyy-LL-dd'T'HH:mm\");\n    } else if (!this.time) {\n      dateWidgetValue = this.value;\n    }\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=\"${this.label}\"\n        .helpText=\"${this.helpText}\"\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div class=\"container\" @click=${this.handleClicked}>\n          <slot name=\"prefix\"></slot>\n          <div class=\"input-wrapper\">\n            <input\n              class=${classes}\n              name=${this.label}\n              value=${dateWidgetValue}\n              type=\"${this.time ? 'datetime-local' : 'date'}\"\n              @change=${this.handleChange}\n              @blur=${this.handleBlur}\n            />\n          </div>\n          ${this.time\n            ? html`\n                <div class=\"tz-wrapper\">\n                  <div class=\"tz\">\n                    <div class=\"label\">Time Zone</div>\n                    <div class=\"zone\">${this.timezoneFriendly}</div>\n                  </div>\n                </div>\n              `\n            : null}\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/datepicker/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FormElement } from '../FormElement';\nimport { getClasses } from '../utils';\nimport { DateTime } from 'luxon';\n\nexport default class DatePicker extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      .container {\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        display: flex;\n        cursor: pointer;\n        box-shadow: var(--widget-box-shadow);\n      }\n\n      .input-wrapper {\n        padding: var(--temba-textinput-padding);\n        flex-grow: 1;\n      }\n\n      .tz {\n        margin-left: 0.5em;\n        font-size: 0.8em;\n        flex-direction: column;\n        align-self: stretch;\n        color: #888;\n        display: flex;\n        align-items: flex-start;\n        flex-direction: column;\n        padding: 0em 1em;\n        font-weight: 400;\n        cursor: pointer;\n        margin: auto;\n      }\n\n      .tz .label {\n        font-size: 0.8em;\n        color: #aaa;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz .zone {\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .tz-wrapper {\n        background: #efefef;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n      }\n\n      .container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n      }\n\n      input {\n        color: var(--color-widget-text);\n        border: 0px;\n        font-family: var(--font-family);\n        font-weight: 300;\n        outline: none;\n        width: 100%;\n        font-size: 13px;\n        padding: 0px;\n        margin: 0px;\n        line-height: 1em;\n      }\n\n      input.unset {\n        color: #ddd;\n      }\n\n      input.unset:focus {\n        color: var(--color-widget-text);\n      }\n\n      input:focus {\n        outline: none;\n      }\n\n      ::-webkit-calendar-picker-indicator {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23bbbbbb\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n\n      ::-webkit-calendar-picker-indicator:hover {\n        background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"15\" viewBox=\"0 0 24 24\"><path fill=\"%23777777\" d=\"M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z\"/></svg>');\n        cursor: pointer;\n        margin: 0;\n        padding: 0;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  timezone = '';\n\n  @property({ type: String })\n  timezoneFriendly = '';\n\n  @property({ type: Object })\n  datetime = null;\n\n  @property({ type: Boolean })\n  time = false;\n\n  /** we just return the value since it should be a string */\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changed.has('value')) {\n      // default to the local browser zone\n      if (this.time) {\n        this.timezone =\n          this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n        this.timezoneFriendly = this.timezone\n          .replace('_', ' ')\n          .replace('/', ', ');\n\n        if (this.value) {\n          // we fire a change event on blur\n          let datetime = DateTime.fromSQL(this.value).setZone(this.timezone);\n          // if we can't read it as a sql stamp, try iso\n          if (datetime.invalid) {\n            datetime = DateTime.fromISO(this.value).setZone(this.timezone);\n          }\n          this.datetime = datetime;\n          this.setValue(this.datetime.toUTC().toISO());\n        }\n      } else {\n        this.datetime = DateTime.fromSQL(this.value);\n        this.setValue(this.datetime.toISODate());\n      }\n    }\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n    if (changed.has('timezone') && this.time) {\n      this.timezone =\n        this.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n      this.timezoneFriendly = this.timezone\n        .replace('_', ' ')\n        .replace('/', ', ');\n      this.requestUpdate('value');\n    }\n  }\n\n  public handleChange(event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  public handleBlur(event) {\n    if (this.time) {\n      this.datetime = DateTime.fromISO(event.target.value, {\n        zone: this.timezone,\n      });\n      this.setValue(this.datetime.toUTC().toISO());\n    } else {\n      this.setValue(event.target.value);\n    }\n    this.fireEvent('change');\n  }\n\n  public handleClicked() {\n    this.shadowRoot.querySelector('input').focus();\n  }\n\n  public render(): TemplateResult {\n    const classes = getClasses({ unset: !this.value });\n\n    let dateWidgetValue = null;\n    if (this.time && this.datetime && !this.datetime.invalid) {\n      dateWidgetValue = this.datetime.toFormat(\"yyyy-LL-dd'T'HH:mm\");\n    } else if (!this.time) {\n      dateWidgetValue = this.value;\n    }\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=\"${this.label}\"\n        .helpText=\"${this.helpText}\"\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div class=\"container\" @click=${this.handleClicked}>\n          <slot name=\"prefix\"></slot>\n          <div class=\"input-wrapper\">\n            <input\n              class=${classes}\n              name=${this.label}\n              value=${dateWidgetValue}\n              type=\"${this.time ? 'datetime-local' : 'date'}\"\n              @change=${this.handleChange}\n              @blur=${this.handleBlur}\n            />\n          </div>\n          ${this.time\n            ? html`\n                <div class=\"tz-wrapper\">\n                  <div class=\"tz\">\n                    <div class=\"label\">Time Zone</div>\n                    <div class=\"zone\">${this.timezoneFriendly}</div>\n                  </div>\n                </div>\n              `\n            : null}\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

package/out-tsc/src/dropdown/Dropdown.js

@@ -25,7 +25,7 @@ export class Dropdown extends RapidElement {
         padding: 0;
         border-radius: var(--curvature);
         background: #fff;
-        transform: translateY(2em);
+        transform: translateY(-1em);
         transition: all calc(0.6 * var(--transition-speed)) linear;
         user-select: none;
         margin-top: 0px;
@@ -52,7 +52,7 @@ export class Dropdown extends RapidElement {
       .open .dropdown {
         opacity: 1;
         pointer-events: auto;
-        transform: translateY(0);
+        transform: translateY(0.5em);
       }
     `;
     }

package/out-tsc/src/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\n\nexport class Dropdown extends RapidElement {\n  static get styles() {\n    return css`\n      .toggle {\n        cursor: pointer;\n      }\n\n      .dropdown {\n        position: absolute;\n        opacity: 0;\n        z-index: 10;\n        pointer-events: none;\n        padding: 0;\n        border-radius: var(--curvature);\n        background: #fff;\n        transform: translateY(2em);\n        transition: all calc(0.6 * var(--transition-speed)) linear;\n        user-select: none;\n        margin-top: 0px;\n        margin-left: 0px;\n        box-shadow: var(--dropdown-shadow);\n      }\n\n      .dropdown:focus {\n        outline: none;\n      }\n\n      .arrow {\n        content: '';\n        width: 0px;\n        height: 0;\n        top: -6px;\n        z-index: 10;\n        position: absolute;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-bottom: 6px solid white;\n      }\n\n      .open .dropdown {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: Number })\n  arrowSize = 6;\n\n  @property({ type: Number })\n  arrowOffset = this.arrowSize * 2;\n\n  @property({ type: Number })\n  offsetX = -10;\n\n  @property({ type: Number })\n  offsetY = 0;\n\n  public firstUpdated(props: any) {\n    super.firstUpdated(props);\n\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n\n    arrow.style.borderWidth = this.arrowSize + 'px';\n    arrow.style.top = '-' + this.arrowSize + 'px';\n\n    if (this.arrowOffset < 0) {\n      arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n    } else {\n      arrow.style.left = this.arrowOffset + 'px';\n    }\n\n    dropdown.style.marginTop = this.offsetY + 'px';\n\n    if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n      dropdown.style.marginLeft =\n        '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n    } else {\n      dropdown.style.marginLeft = this.offsetX + 'px';\n    }\n\n    dropdown.addEventListener('blur', () => {\n      // we nest this to deal with clicking the toggle to close\n      // as we don't want it to toggle an immediate open, probably\n      // a better way to deal with this\n      window.setTimeout(() => {\n        this.open = false;\n      }, 200);\n    });\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.classList.add('open');\n      } else {\n        this.classList.remove('open');\n      }\n    }\n  }\n\n  public handleOpen(): void {\n    if (!this.open) {\n      this.open = true;\n\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n      dropdown.focus();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=${this.open ? 'open' : ''}>\n        <slot name=\"toggle\" class=\"toggle\" @click=\"${this.handleOpen}\"></slot>\n        <div class=\"dropdown\" tabindex=\"0\">\n          <div class=\"arrow\"></div>\n          <slot name=\"dropdown\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\n\nexport class Dropdown extends RapidElement {\n  static get styles() {\n    return css`\n      .toggle {\n        cursor: pointer;\n      }\n\n      .dropdown {\n        position: absolute;\n        opacity: 0;\n        z-index: 10;\n        pointer-events: none;\n        padding: 0;\n        border-radius: var(--curvature);\n        background: #fff;\n        transform: translateY(-1em);\n        transition: all calc(0.6 * var(--transition-speed)) linear;\n        user-select: none;\n        margin-top: 0px;\n        margin-left: 0px;\n        box-shadow: var(--dropdown-shadow);\n      }\n\n      .dropdown:focus {\n        outline: none;\n      }\n\n      .arrow {\n        content: '';\n        width: 0px;\n        height: 0;\n        top: -6px;\n        z-index: 10;\n        position: absolute;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-bottom: 6px solid white;\n      }\n\n      .open .dropdown {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0.5em);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  open = false;\n\n  @property({ type: Number })\n  arrowSize = 6;\n\n  @property({ type: Number })\n  arrowOffset = this.arrowSize * 2;\n\n  @property({ type: Number })\n  offsetX = -10;\n\n  @property({ type: Number })\n  offsetY = 0;\n\n  public firstUpdated(props: any) {\n    super.firstUpdated(props);\n\n    const dropdown = this.shadowRoot.querySelector(\n      '.dropdown'\n    ) as HTMLDivElement;\n    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n\n    arrow.style.borderWidth = this.arrowSize + 'px';\n    arrow.style.top = '-' + this.arrowSize + 'px';\n\n    if (this.arrowOffset < 0) {\n      arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n    } else {\n      arrow.style.left = this.arrowOffset + 'px';\n    }\n\n    dropdown.style.marginTop = this.offsetY + 'px';\n\n    if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n      dropdown.style.marginLeft =\n        '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n    } else {\n      dropdown.style.marginLeft = this.offsetX + 'px';\n    }\n\n    dropdown.addEventListener('blur', () => {\n      // we nest this to deal with clicking the toggle to close\n      // as we don't want it to toggle an immediate open, probably\n      // a better way to deal with this\n      window.setTimeout(() => {\n        this.open = false;\n      }, 200);\n    });\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.classList.add('open');\n      } else {\n        this.classList.remove('open');\n      }\n    }\n  }\n\n  public handleOpen(): void {\n    if (!this.open) {\n      this.open = true;\n\n      const dropdown = this.shadowRoot.querySelector(\n        '.dropdown'\n      ) as HTMLDivElement;\n      dropdown.focus();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=${this.open ? 'open' : ''}>\n        <slot name=\"toggle\" class=\"toggle\" @click=\"${this.handleOpen}\"></slot>\n        <div class=\"dropdown\" tabindex=\"0\">\n          <div class=\"arrow\"></div>\n          <slot name=\"dropdown\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/list/TembaMenu.js

@@ -714,7 +714,6 @@ export class TembaMenu extends RapidElement {
             }
             if (menuItem.endpoint) {
                 this.loadItems(menuItem, true);
-                this.dispatchEvent(new Event('change'));
             }
             else {
                 if (this.pending && this.pending.length > 0) {
@@ -734,11 +733,9 @@ export class TembaMenu extends RapidElement {
                         this.fireNoPath(nextId);
                     }
                 }
-                else {
-                    this.dispatchEvent(new Event('change'));
-                }
                 this.requestUpdate('root');
             }
+            this.dispatchEvent(new Event('change'));
         }
     }
     scrollSelectedIntoView() {