@nyaruka/temba-components 0.31.1 → 0.31.2

package/CHANGELOG.md

@@ -4,8 +4,15 @@ 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.31.2](https://github.com/nyaruka/temba-components/compare/v0.31.1...v0.31.2)
+
+- Add chart icons [`#194`](https://github.com/nyaruka/temba-components/pull/194)
+- Option to pause temba-list [`#193`](https://github.com/nyaruka/temba-components/pull/193)
+
 #### [v0.31.1](https://github.com/nyaruka/temba-components/compare/v0.31.0...v0.31.1)
 
+> 24 August 2022
+
 - Checkbox label fix [`#192`](https://github.com/nyaruka/temba-components/pull/192)
 - Allow null labels [`ca6e105`](https://github.com/nyaruka/temba-components/commit/ca6e10560fa3ee2099043d26ae1a11c43610d29e)
 - Fix checkboxes with no label [`0587ed9`](https://github.com/nyaruka/temba-components/commit/0587ed9fb6fd1833d2b669d3b6e0f8cb9d710557)

package/dist/{0f5edc46.js → 4b609711.js}

@@ -2788,7 +2788,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
     <div class="description">${e}</div>`})(t);case wa.CONTACT_LANGUAGE_CHANGED:return(t=>O`<temba-icon name="contact"></temba-icon>
     <div class="description">
       Language updated to <span class="attn">${t.language}</span>
-    </div>`)(t)}return O`<temba-icon name="alert-triangle" style="fill:var(--color-error)"></temba-icon> <div class="description">${t.type}</div>`}handleClose(t){this.httpComplete=te("/api/v2/ticket_actions.json",{tickets:[t],action:"close"}).then((()=>{this.refreshTickets(),this.refresh(),this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:t,status:"closed"}})})).catch((t=>{console.error(t)}))}checkForAgentAssignmentEvent(t){this.httpComplete=Xt(`/api/v2/tickets.json?uuid=${this.ticket}`).then((e=>{if(1===e.length){const i=e[0];i.assignee&&i.assignee.email===t?this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:this.ticket,assigned:"self"}}):this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:this.ticket,assigned:i.assignee?i.assignee:null}})}}))}getEventHandlers(){return[{event:"scroll",method:oe(this.handleScroll,50)}]}isPurged(t){return!this.ticketEvents[t.uuid]}renderEventContainer(t){const e=this.getStickyId(t),i=!!e,n=O` <div class="${this.ticket?"active-ticket":""} event ${t.type} ${i?"has-sticky":""}" data-sticky-id="${e}"> ${this.renderEvent(t)} </div> ${this.debug?O`<pre>${JSON.stringify(t,null,2)}</pre>`:null} `;return e?O`<div class="sticky">${n}</div>`:n}render(){const t=this.eventGroups.length>0&&this.tickets?this.tickets.map((t=>{if(t&&"open"===t.status){if(1e3*new Date(t.opened_on).getTime()<this.nextBefore||this.isPurged(t)){const e={type:wa.TICKET_OPENED,ticket:{uuid:t.uuid,topic:t.topic,body:t.body,ticketer:t.ticketer},created_on:t.opened_on},i=Da(e,this.handleClose,!this.ticket);return O`<div class="event ticket_opened"> ${i} </div>`}}})):null;return O` ${this.ticket?O`<div class="sticky-bin">${t}</div>`:null} ${this.fetching?O`<temba-loading units="5" size="10"></temba-loading>`:O`<div style="height:0"></div>`} <div class="events" @scroll="${this.handleScroll}"> ${this.eventGroups.map(((t,e)=>{const i=ka(t.events[0],this.ticket),n=this.eventGroups.length-e-1,o=Gt({grouping:!0,[i]:!0,expanded:t.open});return O`<div class="${o}"> ${"verbose"===i?O`<div class="event-count" @click="${this.handleEventGroupShow}" data-group-index="${n}"> ${t.open?O`<temba-icon @click="${this.handleEventGroupHide}" data-group-index="${n}" name="x" clickable></temba-icon>`:O`${t.events.length} ${1===t.events.length?O`event`:O`events`} `} </div>`:null} <div class="items"> ${t.events.map((t=>{if(t.type===wa.TICKET_ASSIGNED&&t.note){const e={...t};return e.type=wa.TICKET_NOTE_ADDED,O`${this.renderEventContainer(e)}${this.renderEventContainer(t)}`}return this.renderEventContainer(t)}))} </div> </div>`}))} </div> <div class="new-messages-container"> <div @click="${()=>{this.scrollToBottom(!0)}}" class="new-messages ${Gt({expanded:this.showMessageAlert})}"> New Messages </div> </div> `}}t([it({type:Object})],Aa.prototype,"contact",void 0),t([it({type:String})],Aa.prototype,"uuid",void 0),t([it({type:String})],Aa.prototype,"agent",void 0),t([it({type:Array})],Aa.prototype,"eventGroups",void 0),t([it({type:Boolean})],Aa.prototype,"refreshing",void 0),t([it({type:Boolean})],Aa.prototype,"fetching",void 0),t([it({type:Boolean})],Aa.prototype,"complete",void 0),t([it({type:String})],Aa.prototype,"endpoint",void 0),t([it({type:Boolean})],Aa.prototype,"debug",void 0),t([it({type:Boolean})],Aa.prototype,"showMessageAlert",void 0),t([it({attribute:!1,type:Object})],Aa.prototype,"mostRecentEvent",void 0),t([it({type:String})],Aa.prototype,"ticket",void 0),t([it({type:String})],Aa.prototype,"endDate",void 0),t([it({type:Array})],Aa.prototype,"tickets",void 0);class La extends tt{constructor(){super(),this.items=[],this.cursorIndex=-1,this.tabIndex=1,this.valueKey="id",this.loading=!1,this.refreshKey="0",this.reverseRefresh=!0,this.nextPage=null,this.pages=0,this.pending=[],this.refreshInterval=null,this.store=document.querySelector("temba-store"),this.handleSelection.bind(this)}static get styles(){return r`
+    </div>`)(t)}return O`<temba-icon name="alert-triangle" style="fill:var(--color-error)"></temba-icon> <div class="description">${t.type}</div>`}handleClose(t){this.httpComplete=te("/api/v2/ticket_actions.json",{tickets:[t],action:"close"}).then((()=>{this.refreshTickets(),this.refresh(),this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:t,status:"closed"}})})).catch((t=>{console.error(t)}))}checkForAgentAssignmentEvent(t){this.httpComplete=Xt(`/api/v2/tickets.json?uuid=${this.ticket}`).then((e=>{if(1===e.length){const i=e[0];i.assignee&&i.assignee.email===t?this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:this.ticket,assigned:"self"}}):this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:this.ticket,assigned:i.assignee?i.assignee:null}})}}))}getEventHandlers(){return[{event:"scroll",method:oe(this.handleScroll,50)}]}isPurged(t){return!this.ticketEvents[t.uuid]}renderEventContainer(t){const e=this.getStickyId(t),i=!!e,n=O` <div class="${this.ticket?"active-ticket":""} event ${t.type} ${i?"has-sticky":""}" data-sticky-id="${e}"> ${this.renderEvent(t)} </div> ${this.debug?O`<pre>${JSON.stringify(t,null,2)}</pre>`:null} `;return e?O`<div class="sticky">${n}</div>`:n}render(){const t=this.eventGroups.length>0&&this.tickets?this.tickets.map((t=>{if(t&&"open"===t.status){if(1e3*new Date(t.opened_on).getTime()<this.nextBefore||this.isPurged(t)){const e={type:wa.TICKET_OPENED,ticket:{uuid:t.uuid,topic:t.topic,body:t.body,ticketer:t.ticketer},created_on:t.opened_on},i=Da(e,this.handleClose,!this.ticket);return O`<div class="event ticket_opened"> ${i} </div>`}}})):null;return O` ${this.ticket?O`<div class="sticky-bin">${t}</div>`:null} ${this.fetching?O`<temba-loading units="5" size="10"></temba-loading>`:O`<div style="height:0"></div>`} <div class="events" @scroll="${this.handleScroll}"> ${this.eventGroups.map(((t,e)=>{const i=ka(t.events[0],this.ticket),n=this.eventGroups.length-e-1,o=Gt({grouping:!0,[i]:!0,expanded:t.open});return O`<div class="${o}"> ${"verbose"===i?O`<div class="event-count" @click="${this.handleEventGroupShow}" data-group-index="${n}"> ${t.open?O`<temba-icon @click="${this.handleEventGroupHide}" data-group-index="${n}" name="x" clickable></temba-icon>`:O`${t.events.length} ${1===t.events.length?O`event`:O`events`} `} </div>`:null} <div class="items"> ${t.events.map((t=>{if(t.type===wa.TICKET_ASSIGNED&&t.note){const e={...t};return e.type=wa.TICKET_NOTE_ADDED,O`${this.renderEventContainer(e)}${this.renderEventContainer(t)}`}return this.renderEventContainer(t)}))} </div> </div>`}))} </div> <div class="new-messages-container"> <div @click="${()=>{this.scrollToBottom(!0)}}" class="new-messages ${Gt({expanded:this.showMessageAlert})}"> New Messages </div> </div> `}}t([it({type:Object})],Aa.prototype,"contact",void 0),t([it({type:String})],Aa.prototype,"uuid",void 0),t([it({type:String})],Aa.prototype,"agent",void 0),t([it({type:Array})],Aa.prototype,"eventGroups",void 0),t([it({type:Boolean})],Aa.prototype,"refreshing",void 0),t([it({type:Boolean})],Aa.prototype,"fetching",void 0),t([it({type:Boolean})],Aa.prototype,"complete",void 0),t([it({type:String})],Aa.prototype,"endpoint",void 0),t([it({type:Boolean})],Aa.prototype,"debug",void 0),t([it({type:Boolean})],Aa.prototype,"showMessageAlert",void 0),t([it({attribute:!1,type:Object})],Aa.prototype,"mostRecentEvent",void 0),t([it({type:String})],Aa.prototype,"ticket",void 0),t([it({type:String})],Aa.prototype,"endDate",void 0),t([it({type:Array})],Aa.prototype,"tickets",void 0);class La extends tt{constructor(){super(),this.items=[],this.cursorIndex=-1,this.tabIndex=1,this.valueKey="id",this.loading=!1,this.paused=!1,this.refreshKey="0",this.reverseRefresh=!0,this.nextPage=null,this.pages=0,this.pending=[],this.refreshInterval=null,this.store=document.querySelector("temba-store"),this.handleSelection.bind(this)}static get styles(){return r`
       :host {
       }
 
@@ -2797,7 +2797,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         width: 100%;
         flex-grow: 1;
       }
-    `}reset(){this.selected=null,this.nextPage=null,this.cursorIndex=-1,this.mostRecentItem=null,this.items=[]}connectedCallback(){super.connectedCallback(),this.refreshInterval=setInterval((()=>{this.refreshKey="default_"+(new Date).getTime()}),1e4)}disconnectedCallback(){clearInterval(this.refreshInterval)}updated(t){super.updated(t),t.has("endpoint")&&this.endpoint&&(this.preserve||(this.reset(),this.loading=!0),this.httpComplete=this.fetchItems()),t.has("refreshKey")&&!t.has("endpoint")&&this.refreshTop(),t.has("mostRecentItem")&&this.mostRecentItem&&this.fireCustomEvent(ue.Refreshed),t.has("cursorIndex")&&this.cursorIndex>-1&&(this.selected=this.items[this.cursorIndex],this.handleSelected(this.selected))}handleSelected(t){const e=new Event("change",{bubbles:!0});this.dispatchEvent(e)}getValue(t){if(!t)return null;const e=this.valueKey.split(".");let i=t;for(;e.length>0;){i=i[e.shift()]}return i}setSelection(t){const e=this.items.findIndex((e=>this.getValue(e)===t));this.cursorIndex=e,this.selected=this.items[e];const i=new Event("change",{bubbles:!0});this.dispatchEvent(i)}getItemIndex(t){return this.items.findIndex((e=>this.getValue(e)===t))}removeItem(t){const e=this.getItemIndex(t);this.items.splice(e,1),this.items=[...this.items],this.cursorIndex=Math.max(0,Math.min(this.items.length-1,this.cursorIndex-1)),this.requestUpdate("cursorIndex"),this.requestUpdate("items")}getSelection(){return this.selected}refresh(){this.refreshKey="requested_"+(new Date).getTime()}setEndpoint(t,e=null){this.endpoint=t,this.nextSelection=e}getRefreshEndpoint(){return this.endpoint}async refreshTop(){if(!this.getRefreshEndpoint())return;for(;this.pending.length>0;){this.pending.pop().abort()}const t=new AbortController;this.pending.push(t);const e=this.items[this.cursorIndex];try{const i=await Yt(this.getRefreshEndpoint(),t),n=[...this.items];if(i.results){i.results.forEach((t=>{this.sanitizeOption&&this.sanitizeOption(t);const e=this.getValue(t),i=n.findIndex((t=>this.getValue(t)===e));i>-1&&n.splice(i,1)}));let t=i.results;this.reverseRefresh&&(t=i.results.reverse());const o=[...t,...n],r=o[0];if(this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(r)||(this.mostRecentItem=r),e){const t=o[this.cursorIndex],i=this.getValue(e);if(i!==this.getValue(t)){const t=o.findIndex((t=>this.getValue(t)===i));this.cursorIndex=t,window.setTimeout((()=>{const t=this.shadowRoot.querySelector("temba-options");if(t){t.shadowRoot.querySelector(".option.focused").scrollIntoView({block:"end",inline:"nearest"})}}),0)}}this.items=o}}catch(t){console.error(t)}}async fetchItems(){for(;this.pending.length>0;){this.pending.pop().abort()}let t=this.endpoint,e=this.pages||1,i=0,n=null,o=[];for(;e>0&&t;){const r=new AbortController;this.pending.push(r);try{const s=await Yt(t,r);this.sanitizeOption&&s.results.forEach(this.sanitizeOption),s.results&&(o=o.concat(s.results)),n=s.next,t=n,e--,i++}catch(t){return this.reset(),void console.log("error, resetting")}this.nextPage=n}this.pages=i;const r=o[0];this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(r)||(this.mostRecentItem=r);const s=o[this.cursorIndex];if(!this.nextSelection&&this.selected&&s&&this.getValue(s)!==this.getValue(this.selected)){const t=o.findIndex((t=>this.getValue(t)===this.getValue(this.selected)));t>-1?this.cursorIndex=t:0===this.cursorIndex?this.requestUpdate("cursorIndex"):this.cursorIndex=0}return this.items=o,this.loading=!1,this.pending=[],this.nextSelection?(this.setSelection(this.nextSelection),this.nextSelection=!1):-1===this.cursorIndex&&(this.cursorIndex=0),this.value&&(this.setSelection(this.value),this.value=null),Promise.resolve()}handleScrollThreshold(){this.nextPage&&!this.loading&&(this.loading=!0,Yt(this.nextPage).then((t=>{this.sanitizeOption&&t.results.forEach(this.sanitizeOption),this.items=[...this.items,...t.results],this.nextPage=t.next,this.pages++,this.loading=!1})))}renderHeader(){return null}renderFooter(){return null}getListStyle(){return""}handleSelection(t){const{selected:e,index:i}=t.detail;this.selected=e,this.cursorIndex=i,t.stopPropagation(),t.preventDefault()}render(){return O`
+    `}reset(){this.selected=null,this.nextPage=null,this.cursorIndex=-1,this.mostRecentItem=null,this.items=[]}connectedCallback(){super.connectedCallback(),this.refreshInterval=setInterval((()=>{this.paused||(this.refreshKey="default_"+(new Date).getTime())}),1e4)}disconnectedCallback(){clearInterval(this.refreshInterval)}updated(t){super.updated(t),t.has("endpoint")&&this.endpoint&&(this.preserve||(this.reset(),this.loading=!0),this.httpComplete=this.fetchItems()),t.has("refreshKey")&&!t.has("endpoint")&&this.refreshTop(),t.has("mostRecentItem")&&this.mostRecentItem&&this.fireCustomEvent(ue.Refreshed),t.has("cursorIndex")&&this.cursorIndex>-1&&(this.selected=this.items[this.cursorIndex],this.handleSelected(this.selected))}handleSelected(t){const e=new Event("change",{bubbles:!0});this.dispatchEvent(e)}getValue(t){if(!t)return null;const e=this.valueKey.split(".");let i=t;for(;e.length>0;){i=i[e.shift()]}return i}setSelection(t){const e=this.items.findIndex((e=>this.getValue(e)===t));this.cursorIndex=e,this.selected=this.items[e];const i=new Event("change",{bubbles:!0});this.dispatchEvent(i)}getItemIndex(t){return this.items.findIndex((e=>this.getValue(e)===t))}removeItem(t){const e=this.getItemIndex(t);this.items.splice(e,1),this.items=[...this.items],this.cursorIndex=Math.max(0,Math.min(this.items.length-1,this.cursorIndex-1)),this.requestUpdate("cursorIndex"),this.requestUpdate("items")}getSelection(){return this.selected}refresh(){this.refreshKey="requested_"+(new Date).getTime()}setEndpoint(t,e=null){this.endpoint=t,this.nextSelection=e}getRefreshEndpoint(){return this.endpoint}async refreshTop(){if(!this.getRefreshEndpoint())return;for(;this.pending.length>0;){this.pending.pop().abort()}const t=new AbortController;this.pending.push(t);const e=this.items[this.cursorIndex];try{const i=await Yt(this.getRefreshEndpoint(),t),n=[...this.items];if(i.results){i.results.forEach((t=>{this.sanitizeOption&&this.sanitizeOption(t);const e=this.getValue(t),i=n.findIndex((t=>this.getValue(t)===e));i>-1&&n.splice(i,1)}));let t=i.results;this.reverseRefresh&&(t=i.results.reverse());const o=[...t,...n],r=o[0];if(this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(r)||(this.mostRecentItem=r),e){const t=o[this.cursorIndex],i=this.getValue(e);if(i!==this.getValue(t)){const t=o.findIndex((t=>this.getValue(t)===i));this.cursorIndex=t,window.setTimeout((()=>{const t=this.shadowRoot.querySelector("temba-options");if(t){t.shadowRoot.querySelector(".option.focused").scrollIntoView({block:"end",inline:"nearest"})}}),0)}}this.items=o}}catch(t){console.error(t)}}async fetchItems(){for(;this.pending.length>0;){this.pending.pop().abort()}let t=this.endpoint,e=this.pages||1,i=0,n=null,o=[];for(;e>0&&t;){const r=new AbortController;this.pending.push(r);try{const s=await Yt(t,r);this.sanitizeOption&&s.results.forEach(this.sanitizeOption),s.results&&(o=o.concat(s.results)),n=s.next,t=n,e--,i++}catch(t){return this.reset(),void console.log("error, resetting")}this.nextPage=n}this.pages=i;const r=o[0];this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(r)||(this.mostRecentItem=r);const s=o[this.cursorIndex];if(!this.nextSelection&&this.selected&&s&&this.getValue(s)!==this.getValue(this.selected)){const t=o.findIndex((t=>this.getValue(t)===this.getValue(this.selected)));t>-1?this.cursorIndex=t:0===this.cursorIndex?this.requestUpdate("cursorIndex"):this.cursorIndex=0}return this.items=o,this.loading=!1,this.pending=[],this.nextSelection?(this.setSelection(this.nextSelection),this.nextSelection=!1):-1===this.cursorIndex&&(this.cursorIndex=0),this.value&&(this.setSelection(this.value),this.value=null),Promise.resolve()}handleScrollThreshold(){this.nextPage&&!this.loading&&(this.loading=!0,Yt(this.nextPage).then((t=>{this.sanitizeOption&&t.results.forEach(this.sanitizeOption),this.items=[...this.items,...t.results],this.nextPage=t.next,this.pages++,this.loading=!1})))}renderHeader(){return null}renderFooter(){return null}getListStyle(){return""}handleSelection(t){const{selected:e,index:i}=t.detail;this.selected=e,this.cursorIndex=i,t.stopPropagation(),t.preventDefault()}render(){return O`
       ${this.renderHeader()}
       <temba-options
         style="${this.getListStyle()}"
@@ -2816,7 +2816,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         <slot></slot>
       </temba-options>
       ${this.renderFooter()}
-    `}}t([it({type:Array,attribute:!1})],La.prototype,"items",void 0),t([it({type:Object,attribute:!1})],La.prototype,"selected",void 0),t([it({type:Number})],La.prototype,"cursorIndex",void 0),t([it({type:String})],La.prototype,"endpoint",void 0),t([it({type:String})],La.prototype,"nextSelection",void 0),t([it({type:Number})],La.prototype,"tabIndex",void 0),t([it({type:String})],La.prototype,"valueKey",void 0),t([it({type:String})],La.prototype,"value",void 0),t([it({type:Boolean})],La.prototype,"loading",void 0),t([it({type:Boolean})],La.prototype,"collapsed",void 0),t([it({type:Boolean})],La.prototype,"hideShadow",void 0),t([it({attribute:!1})],La.prototype,"getNextRefresh",void 0),t([it({attribute:!1})],La.prototype,"sanitizeOption",void 0),t([it({attribute:!1})],La.prototype,"renderOption",void 0),t([it({attribute:!1})],La.prototype,"renderOptionDetail",void 0),t([it({attribute:!1,type:Object})],La.prototype,"mostRecentItem",void 0),t([it({type:String})],La.prototype,"refreshKey",void 0);class Oa extends La{constructor(){super(),this.agent="",this.valueKey="ticket.uuid",this.renderOption=t=>O`
+    `}}t([it({type:Array,attribute:!1})],La.prototype,"items",void 0),t([it({type:Object,attribute:!1})],La.prototype,"selected",void 0),t([it({type:Number})],La.prototype,"cursorIndex",void 0),t([it({type:String})],La.prototype,"endpoint",void 0),t([it({type:String})],La.prototype,"nextSelection",void 0),t([it({type:Number})],La.prototype,"tabIndex",void 0),t([it({type:String})],La.prototype,"valueKey",void 0),t([it({type:String})],La.prototype,"value",void 0),t([it({type:Boolean})],La.prototype,"loading",void 0),t([it({type:Boolean})],La.prototype,"collapsed",void 0),t([it({type:Boolean})],La.prototype,"hideShadow",void 0),t([it({type:Boolean})],La.prototype,"paused",void 0),t([it({attribute:!1})],La.prototype,"getNextRefresh",void 0),t([it({attribute:!1})],La.prototype,"sanitizeOption",void 0),t([it({attribute:!1})],La.prototype,"renderOption",void 0),t([it({attribute:!1})],La.prototype,"renderOptionDetail",void 0),t([it({attribute:!1,type:Object})],La.prototype,"mostRecentItem",void 0),t([it({type:String})],La.prototype,"refreshKey",void 0);class Oa extends La{constructor(){super(),this.agent="",this.valueKey="ticket.uuid",this.renderOption=t=>O`
         <div
           style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em"
         >
@@ -3381,7 +3381,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           class="${Gt({sheet:""===this.src,[this.animateChange]:!!this.animateChange,[this.animateChange+"-"+this.animationStep]:this.animationStep>0,[this.animateClick]:!!this.animateClick,[this.animateClick+"-"+this.animationStep]:this.animationStep>0})}"
         >
           <use
-            href="${this.src?this.src:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=13#icon-${this.lastName||this.name||this.id}`}"
+            href="${this.src?this.src:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=14#icon-${this.lastName||this.name||this.id}`}"
           />
         </svg>
       </div>

package/dist/index.js

@@ -2788,7 +2788,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
     <div class="description">${e}</div>`})(t);case wa.CONTACT_LANGUAGE_CHANGED:return(t=>O`<temba-icon name="contact"></temba-icon>
     <div class="description">
       Language updated to <span class="attn">${t.language}</span>
-    </div>`)(t)}return O`<temba-icon name="alert-triangle" style="fill:var(--color-error)"></temba-icon> <div class="description">${t.type}</div>`}handleClose(t){this.httpComplete=te("/api/v2/ticket_actions.json",{tickets:[t],action:"close"}).then((()=>{this.refreshTickets(),this.refresh(),this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:t,status:"closed"}})})).catch((t=>{console.error(t)}))}checkForAgentAssignmentEvent(t){this.httpComplete=Xt(`/api/v2/tickets.json?uuid=${this.ticket}`).then((e=>{if(1===e.length){const i=e[0];i.assignee&&i.assignee.email===t?this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:this.ticket,assigned:"self"}}):this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:this.ticket,assigned:i.assignee?i.assignee:null}})}}))}getEventHandlers(){return[{event:"scroll",method:oe(this.handleScroll,50)}]}isPurged(t){return!this.ticketEvents[t.uuid]}renderEventContainer(t){const e=this.getStickyId(t),i=!!e,n=O` <div class="${this.ticket?"active-ticket":""} event ${t.type} ${i?"has-sticky":""}" data-sticky-id="${e}"> ${this.renderEvent(t)} </div> ${this.debug?O`<pre>${JSON.stringify(t,null,2)}</pre>`:null} `;return e?O`<div class="sticky">${n}</div>`:n}render(){const t=this.eventGroups.length>0&&this.tickets?this.tickets.map((t=>{if(t&&"open"===t.status){if(1e3*new Date(t.opened_on).getTime()<this.nextBefore||this.isPurged(t)){const e={type:wa.TICKET_OPENED,ticket:{uuid:t.uuid,topic:t.topic,body:t.body,ticketer:t.ticketer},created_on:t.opened_on},i=Da(e,this.handleClose,!this.ticket);return O`<div class="event ticket_opened"> ${i} </div>`}}})):null;return O` ${this.ticket?O`<div class="sticky-bin">${t}</div>`:null} ${this.fetching?O`<temba-loading units="5" size="10"></temba-loading>`:O`<div style="height:0"></div>`} <div class="events" @scroll="${this.handleScroll}"> ${this.eventGroups.map(((t,e)=>{const i=ka(t.events[0],this.ticket),n=this.eventGroups.length-e-1,o=Gt({grouping:!0,[i]:!0,expanded:t.open});return O`<div class="${o}"> ${"verbose"===i?O`<div class="event-count" @click="${this.handleEventGroupShow}" data-group-index="${n}"> ${t.open?O`<temba-icon @click="${this.handleEventGroupHide}" data-group-index="${n}" name="x" clickable></temba-icon>`:O`${t.events.length} ${1===t.events.length?O`event`:O`events`} `} </div>`:null} <div class="items"> ${t.events.map((t=>{if(t.type===wa.TICKET_ASSIGNED&&t.note){const e={...t};return e.type=wa.TICKET_NOTE_ADDED,O`${this.renderEventContainer(e)}${this.renderEventContainer(t)}`}return this.renderEventContainer(t)}))} </div> </div>`}))} </div> <div class="new-messages-container"> <div @click="${()=>{this.scrollToBottom(!0)}}" class="new-messages ${Gt({expanded:this.showMessageAlert})}"> New Messages </div> </div> `}}t([it({type:Object})],Aa.prototype,"contact",void 0),t([it({type:String})],Aa.prototype,"uuid",void 0),t([it({type:String})],Aa.prototype,"agent",void 0),t([it({type:Array})],Aa.prototype,"eventGroups",void 0),t([it({type:Boolean})],Aa.prototype,"refreshing",void 0),t([it({type:Boolean})],Aa.prototype,"fetching",void 0),t([it({type:Boolean})],Aa.prototype,"complete",void 0),t([it({type:String})],Aa.prototype,"endpoint",void 0),t([it({type:Boolean})],Aa.prototype,"debug",void 0),t([it({type:Boolean})],Aa.prototype,"showMessageAlert",void 0),t([it({attribute:!1,type:Object})],Aa.prototype,"mostRecentEvent",void 0),t([it({type:String})],Aa.prototype,"ticket",void 0),t([it({type:String})],Aa.prototype,"endDate",void 0),t([it({type:Array})],Aa.prototype,"tickets",void 0);class La extends tt{constructor(){super(),this.items=[],this.cursorIndex=-1,this.tabIndex=1,this.valueKey="id",this.loading=!1,this.refreshKey="0",this.reverseRefresh=!0,this.nextPage=null,this.pages=0,this.pending=[],this.refreshInterval=null,this.store=document.querySelector("temba-store"),this.handleSelection.bind(this)}static get styles(){return r`
+    </div>`)(t)}return O`<temba-icon name="alert-triangle" style="fill:var(--color-error)"></temba-icon> <div class="description">${t.type}</div>`}handleClose(t){this.httpComplete=te("/api/v2/ticket_actions.json",{tickets:[t],action:"close"}).then((()=>{this.refreshTickets(),this.refresh(),this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:t,status:"closed"}})})).catch((t=>{console.error(t)}))}checkForAgentAssignmentEvent(t){this.httpComplete=Xt(`/api/v2/tickets.json?uuid=${this.ticket}`).then((e=>{if(1===e.length){const i=e[0];i.assignee&&i.assignee.email===t?this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:this.ticket,assigned:"self"}}):this.fireCustomEvent(ue.ContentChanged,{ticket:{uuid:this.ticket,assigned:i.assignee?i.assignee:null}})}}))}getEventHandlers(){return[{event:"scroll",method:oe(this.handleScroll,50)}]}isPurged(t){return!this.ticketEvents[t.uuid]}renderEventContainer(t){const e=this.getStickyId(t),i=!!e,n=O` <div class="${this.ticket?"active-ticket":""} event ${t.type} ${i?"has-sticky":""}" data-sticky-id="${e}"> ${this.renderEvent(t)} </div> ${this.debug?O`<pre>${JSON.stringify(t,null,2)}</pre>`:null} `;return e?O`<div class="sticky">${n}</div>`:n}render(){const t=this.eventGroups.length>0&&this.tickets?this.tickets.map((t=>{if(t&&"open"===t.status){if(1e3*new Date(t.opened_on).getTime()<this.nextBefore||this.isPurged(t)){const e={type:wa.TICKET_OPENED,ticket:{uuid:t.uuid,topic:t.topic,body:t.body,ticketer:t.ticketer},created_on:t.opened_on},i=Da(e,this.handleClose,!this.ticket);return O`<div class="event ticket_opened"> ${i} </div>`}}})):null;return O` ${this.ticket?O`<div class="sticky-bin">${t}</div>`:null} ${this.fetching?O`<temba-loading units="5" size="10"></temba-loading>`:O`<div style="height:0"></div>`} <div class="events" @scroll="${this.handleScroll}"> ${this.eventGroups.map(((t,e)=>{const i=ka(t.events[0],this.ticket),n=this.eventGroups.length-e-1,o=Gt({grouping:!0,[i]:!0,expanded:t.open});return O`<div class="${o}"> ${"verbose"===i?O`<div class="event-count" @click="${this.handleEventGroupShow}" data-group-index="${n}"> ${t.open?O`<temba-icon @click="${this.handleEventGroupHide}" data-group-index="${n}" name="x" clickable></temba-icon>`:O`${t.events.length} ${1===t.events.length?O`event`:O`events`} `} </div>`:null} <div class="items"> ${t.events.map((t=>{if(t.type===wa.TICKET_ASSIGNED&&t.note){const e={...t};return e.type=wa.TICKET_NOTE_ADDED,O`${this.renderEventContainer(e)}${this.renderEventContainer(t)}`}return this.renderEventContainer(t)}))} </div> </div>`}))} </div> <div class="new-messages-container"> <div @click="${()=>{this.scrollToBottom(!0)}}" class="new-messages ${Gt({expanded:this.showMessageAlert})}"> New Messages </div> </div> `}}t([it({type:Object})],Aa.prototype,"contact",void 0),t([it({type:String})],Aa.prototype,"uuid",void 0),t([it({type:String})],Aa.prototype,"agent",void 0),t([it({type:Array})],Aa.prototype,"eventGroups",void 0),t([it({type:Boolean})],Aa.prototype,"refreshing",void 0),t([it({type:Boolean})],Aa.prototype,"fetching",void 0),t([it({type:Boolean})],Aa.prototype,"complete",void 0),t([it({type:String})],Aa.prototype,"endpoint",void 0),t([it({type:Boolean})],Aa.prototype,"debug",void 0),t([it({type:Boolean})],Aa.prototype,"showMessageAlert",void 0),t([it({attribute:!1,type:Object})],Aa.prototype,"mostRecentEvent",void 0),t([it({type:String})],Aa.prototype,"ticket",void 0),t([it({type:String})],Aa.prototype,"endDate",void 0),t([it({type:Array})],Aa.prototype,"tickets",void 0);class La extends tt{constructor(){super(),this.items=[],this.cursorIndex=-1,this.tabIndex=1,this.valueKey="id",this.loading=!1,this.paused=!1,this.refreshKey="0",this.reverseRefresh=!0,this.nextPage=null,this.pages=0,this.pending=[],this.refreshInterval=null,this.store=document.querySelector("temba-store"),this.handleSelection.bind(this)}static get styles(){return r`
       :host {
       }
 
@@ -2797,7 +2797,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         width: 100%;
         flex-grow: 1;
       }
-    `}reset(){this.selected=null,this.nextPage=null,this.cursorIndex=-1,this.mostRecentItem=null,this.items=[]}connectedCallback(){super.connectedCallback(),this.refreshInterval=setInterval((()=>{this.refreshKey="default_"+(new Date).getTime()}),1e4)}disconnectedCallback(){clearInterval(this.refreshInterval)}updated(t){super.updated(t),t.has("endpoint")&&this.endpoint&&(this.preserve||(this.reset(),this.loading=!0),this.httpComplete=this.fetchItems()),t.has("refreshKey")&&!t.has("endpoint")&&this.refreshTop(),t.has("mostRecentItem")&&this.mostRecentItem&&this.fireCustomEvent(ue.Refreshed),t.has("cursorIndex")&&this.cursorIndex>-1&&(this.selected=this.items[this.cursorIndex],this.handleSelected(this.selected))}handleSelected(t){const e=new Event("change",{bubbles:!0});this.dispatchEvent(e)}getValue(t){if(!t)return null;const e=this.valueKey.split(".");let i=t;for(;e.length>0;){i=i[e.shift()]}return i}setSelection(t){const e=this.items.findIndex((e=>this.getValue(e)===t));this.cursorIndex=e,this.selected=this.items[e];const i=new Event("change",{bubbles:!0});this.dispatchEvent(i)}getItemIndex(t){return this.items.findIndex((e=>this.getValue(e)===t))}removeItem(t){const e=this.getItemIndex(t);this.items.splice(e,1),this.items=[...this.items],this.cursorIndex=Math.max(0,Math.min(this.items.length-1,this.cursorIndex-1)),this.requestUpdate("cursorIndex"),this.requestUpdate("items")}getSelection(){return this.selected}refresh(){this.refreshKey="requested_"+(new Date).getTime()}setEndpoint(t,e=null){this.endpoint=t,this.nextSelection=e}getRefreshEndpoint(){return this.endpoint}async refreshTop(){if(!this.getRefreshEndpoint())return;for(;this.pending.length>0;){this.pending.pop().abort()}const t=new AbortController;this.pending.push(t);const e=this.items[this.cursorIndex];try{const i=await Yt(this.getRefreshEndpoint(),t),n=[...this.items];if(i.results){i.results.forEach((t=>{this.sanitizeOption&&this.sanitizeOption(t);const e=this.getValue(t),i=n.findIndex((t=>this.getValue(t)===e));i>-1&&n.splice(i,1)}));let t=i.results;this.reverseRefresh&&(t=i.results.reverse());const o=[...t,...n],r=o[0];if(this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(r)||(this.mostRecentItem=r),e){const t=o[this.cursorIndex],i=this.getValue(e);if(i!==this.getValue(t)){const t=o.findIndex((t=>this.getValue(t)===i));this.cursorIndex=t,window.setTimeout((()=>{const t=this.shadowRoot.querySelector("temba-options");if(t){t.shadowRoot.querySelector(".option.focused").scrollIntoView({block:"end",inline:"nearest"})}}),0)}}this.items=o}}catch(t){console.error(t)}}async fetchItems(){for(;this.pending.length>0;){this.pending.pop().abort()}let t=this.endpoint,e=this.pages||1,i=0,n=null,o=[];for(;e>0&&t;){const r=new AbortController;this.pending.push(r);try{const s=await Yt(t,r);this.sanitizeOption&&s.results.forEach(this.sanitizeOption),s.results&&(o=o.concat(s.results)),n=s.next,t=n,e--,i++}catch(t){return this.reset(),void console.log("error, resetting")}this.nextPage=n}this.pages=i;const r=o[0];this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(r)||(this.mostRecentItem=r);const s=o[this.cursorIndex];if(!this.nextSelection&&this.selected&&s&&this.getValue(s)!==this.getValue(this.selected)){const t=o.findIndex((t=>this.getValue(t)===this.getValue(this.selected)));t>-1?this.cursorIndex=t:0===this.cursorIndex?this.requestUpdate("cursorIndex"):this.cursorIndex=0}return this.items=o,this.loading=!1,this.pending=[],this.nextSelection?(this.setSelection(this.nextSelection),this.nextSelection=!1):-1===this.cursorIndex&&(this.cursorIndex=0),this.value&&(this.setSelection(this.value),this.value=null),Promise.resolve()}handleScrollThreshold(){this.nextPage&&!this.loading&&(this.loading=!0,Yt(this.nextPage).then((t=>{this.sanitizeOption&&t.results.forEach(this.sanitizeOption),this.items=[...this.items,...t.results],this.nextPage=t.next,this.pages++,this.loading=!1})))}renderHeader(){return null}renderFooter(){return null}getListStyle(){return""}handleSelection(t){const{selected:e,index:i}=t.detail;this.selected=e,this.cursorIndex=i,t.stopPropagation(),t.preventDefault()}render(){return O`
+    `}reset(){this.selected=null,this.nextPage=null,this.cursorIndex=-1,this.mostRecentItem=null,this.items=[]}connectedCallback(){super.connectedCallback(),this.refreshInterval=setInterval((()=>{this.paused||(this.refreshKey="default_"+(new Date).getTime())}),1e4)}disconnectedCallback(){clearInterval(this.refreshInterval)}updated(t){super.updated(t),t.has("endpoint")&&this.endpoint&&(this.preserve||(this.reset(),this.loading=!0),this.httpComplete=this.fetchItems()),t.has("refreshKey")&&!t.has("endpoint")&&this.refreshTop(),t.has("mostRecentItem")&&this.mostRecentItem&&this.fireCustomEvent(ue.Refreshed),t.has("cursorIndex")&&this.cursorIndex>-1&&(this.selected=this.items[this.cursorIndex],this.handleSelected(this.selected))}handleSelected(t){const e=new Event("change",{bubbles:!0});this.dispatchEvent(e)}getValue(t){if(!t)return null;const e=this.valueKey.split(".");let i=t;for(;e.length>0;){i=i[e.shift()]}return i}setSelection(t){const e=this.items.findIndex((e=>this.getValue(e)===t));this.cursorIndex=e,this.selected=this.items[e];const i=new Event("change",{bubbles:!0});this.dispatchEvent(i)}getItemIndex(t){return this.items.findIndex((e=>this.getValue(e)===t))}removeItem(t){const e=this.getItemIndex(t);this.items.splice(e,1),this.items=[...this.items],this.cursorIndex=Math.max(0,Math.min(this.items.length-1,this.cursorIndex-1)),this.requestUpdate("cursorIndex"),this.requestUpdate("items")}getSelection(){return this.selected}refresh(){this.refreshKey="requested_"+(new Date).getTime()}setEndpoint(t,e=null){this.endpoint=t,this.nextSelection=e}getRefreshEndpoint(){return this.endpoint}async refreshTop(){if(!this.getRefreshEndpoint())return;for(;this.pending.length>0;){this.pending.pop().abort()}const t=new AbortController;this.pending.push(t);const e=this.items[this.cursorIndex];try{const i=await Yt(this.getRefreshEndpoint(),t),n=[...this.items];if(i.results){i.results.forEach((t=>{this.sanitizeOption&&this.sanitizeOption(t);const e=this.getValue(t),i=n.findIndex((t=>this.getValue(t)===e));i>-1&&n.splice(i,1)}));let t=i.results;this.reverseRefresh&&(t=i.results.reverse());const o=[...t,...n],r=o[0];if(this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(r)||(this.mostRecentItem=r),e){const t=o[this.cursorIndex],i=this.getValue(e);if(i!==this.getValue(t)){const t=o.findIndex((t=>this.getValue(t)===i));this.cursorIndex=t,window.setTimeout((()=>{const t=this.shadowRoot.querySelector("temba-options");if(t){t.shadowRoot.querySelector(".option.focused").scrollIntoView({block:"end",inline:"nearest"})}}),0)}}this.items=o}}catch(t){console.error(t)}}async fetchItems(){for(;this.pending.length>0;){this.pending.pop().abort()}let t=this.endpoint,e=this.pages||1,i=0,n=null,o=[];for(;e>0&&t;){const r=new AbortController;this.pending.push(r);try{const s=await Yt(t,r);this.sanitizeOption&&s.results.forEach(this.sanitizeOption),s.results&&(o=o.concat(s.results)),n=s.next,t=n,e--,i++}catch(t){return this.reset(),void console.log("error, resetting")}this.nextPage=n}this.pages=i;const r=o[0];this.mostRecentItem&&JSON.stringify(this.mostRecentItem)===JSON.stringify(r)||(this.mostRecentItem=r);const s=o[this.cursorIndex];if(!this.nextSelection&&this.selected&&s&&this.getValue(s)!==this.getValue(this.selected)){const t=o.findIndex((t=>this.getValue(t)===this.getValue(this.selected)));t>-1?this.cursorIndex=t:0===this.cursorIndex?this.requestUpdate("cursorIndex"):this.cursorIndex=0}return this.items=o,this.loading=!1,this.pending=[],this.nextSelection?(this.setSelection(this.nextSelection),this.nextSelection=!1):-1===this.cursorIndex&&(this.cursorIndex=0),this.value&&(this.setSelection(this.value),this.value=null),Promise.resolve()}handleScrollThreshold(){this.nextPage&&!this.loading&&(this.loading=!0,Yt(this.nextPage).then((t=>{this.sanitizeOption&&t.results.forEach(this.sanitizeOption),this.items=[...this.items,...t.results],this.nextPage=t.next,this.pages++,this.loading=!1})))}renderHeader(){return null}renderFooter(){return null}getListStyle(){return""}handleSelection(t){const{selected:e,index:i}=t.detail;this.selected=e,this.cursorIndex=i,t.stopPropagation(),t.preventDefault()}render(){return O`
       ${this.renderHeader()}
       <temba-options
         style="${this.getListStyle()}"
@@ -2816,7 +2816,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         <slot></slot>
       </temba-options>
       ${this.renderFooter()}
-    `}}t([it({type:Array,attribute:!1})],La.prototype,"items",void 0),t([it({type:Object,attribute:!1})],La.prototype,"selected",void 0),t([it({type:Number})],La.prototype,"cursorIndex",void 0),t([it({type:String})],La.prototype,"endpoint",void 0),t([it({type:String})],La.prototype,"nextSelection",void 0),t([it({type:Number})],La.prototype,"tabIndex",void 0),t([it({type:String})],La.prototype,"valueKey",void 0),t([it({type:String})],La.prototype,"value",void 0),t([it({type:Boolean})],La.prototype,"loading",void 0),t([it({type:Boolean})],La.prototype,"collapsed",void 0),t([it({type:Boolean})],La.prototype,"hideShadow",void 0),t([it({attribute:!1})],La.prototype,"getNextRefresh",void 0),t([it({attribute:!1})],La.prototype,"sanitizeOption",void 0),t([it({attribute:!1})],La.prototype,"renderOption",void 0),t([it({attribute:!1})],La.prototype,"renderOptionDetail",void 0),t([it({attribute:!1,type:Object})],La.prototype,"mostRecentItem",void 0),t([it({type:String})],La.prototype,"refreshKey",void 0);class Oa extends La{constructor(){super(),this.agent="",this.valueKey="ticket.uuid",this.renderOption=t=>O`
+    `}}t([it({type:Array,attribute:!1})],La.prototype,"items",void 0),t([it({type:Object,attribute:!1})],La.prototype,"selected",void 0),t([it({type:Number})],La.prototype,"cursorIndex",void 0),t([it({type:String})],La.prototype,"endpoint",void 0),t([it({type:String})],La.prototype,"nextSelection",void 0),t([it({type:Number})],La.prototype,"tabIndex",void 0),t([it({type:String})],La.prototype,"valueKey",void 0),t([it({type:String})],La.prototype,"value",void 0),t([it({type:Boolean})],La.prototype,"loading",void 0),t([it({type:Boolean})],La.prototype,"collapsed",void 0),t([it({type:Boolean})],La.prototype,"hideShadow",void 0),t([it({type:Boolean})],La.prototype,"paused",void 0),t([it({attribute:!1})],La.prototype,"getNextRefresh",void 0),t([it({attribute:!1})],La.prototype,"sanitizeOption",void 0),t([it({attribute:!1})],La.prototype,"renderOption",void 0),t([it({attribute:!1})],La.prototype,"renderOptionDetail",void 0),t([it({attribute:!1,type:Object})],La.prototype,"mostRecentItem",void 0),t([it({type:String})],La.prototype,"refreshKey",void 0);class Oa extends La{constructor(){super(),this.agent="",this.valueKey="ticket.uuid",this.renderOption=t=>O`
         <div
           style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em"
         >
@@ -3381,7 +3381,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           class="${Gt({sheet:""===this.src,[this.animateChange]:!!this.animateChange,[this.animateChange+"-"+this.animationStep]:this.animationStep>0,[this.animateClick]:!!this.animateClick,[this.animateClick+"-"+this.animationStep]:this.animationStep>0})}"
         >
           <use
-            href="${this.src?this.src:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=13#icon-${this.lastName||this.name||this.id}`}"
+            href="${this.src?this.src:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=14#icon-${this.lastName||this.name||this.id}`}"
           />
         </svg>
       </div>

package/dist/static/icons/symbol-defs.svg

@@ -3,6 +3,12 @@
 <symbol id="icon-hourglass" viewBox="0 0 24 24">
 <path d="M12 11.484l3.984-3.984v-3.516h-7.969v3.516zM15.984 16.5l-3.984-3.984-3.984 3.984v3.516h7.969v-3.516zM6 2.016h12v6l-3.984 3.984 3.984 3.984v6h-12v-6l3.984-3.984-3.984-3.984v-6z"></path>
 </symbol>
+<symbol id="icon-bar-chart" viewBox="0 0 24 24">
+<path d="M19 20v-10c0-0.552-0.448-1-1-1s-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1zM13 20v-16c0-0.552-0.448-1-1-1s-1 0.448-1 1v16c0 0.552 0.448 1 1 1s1-0.448 1-1zM7 20v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
+</symbol>
+<symbol id="icon-pie-chart" viewBox="0 0 24 24">
+<path d="M20.289 15.501c-0.968 2.289-2.771 3.968-4.906 4.835s-4.599 0.917-6.888-0.051-3.968-2.771-4.835-4.906-0.918-4.6 0.050-6.889c0.936-2.214 2.652-3.856 4.689-4.743 0.506-0.221 0.738-0.81 0.518-1.316s-0.81-0.738-1.316-0.518c-2.489 1.084-4.589 3.094-5.733 5.798-1.183 2.798-1.119 5.812-0.062 8.419s3.112 4.814 5.909 5.997 5.812 1.119 8.419 0.062 4.814-3.112 5.997-5.909c0.215-0.509-0.023-1.095-0.532-1.311s-1.095 0.023-1.311 0.532zM20.945 11h-7.945v-7.945c2.086 0.23 3.956 1.173 5.364 2.581s2.351 3.278 2.581 5.364zM23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1h10c0.552 0 1-0.448 1-1z"></path>
+</symbol>
 <symbol id="icon-bookmark-filled" viewBox="0 0 24 24">
 <path d="M17.016 3q0.797 0 1.383 0.609t0.586 1.406v15.984l-6.984-3-6.984 3v-15.984q0-0.797 0.586-1.406t1.383-0.609h10.031z"></path>
 </symbol>

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:"0f5edc46.js",revision:"097ba917126aaaf8fb39fd1818064d5a"},{url:"templates/components-body.html",revision:"6f32569688a6e41a0519c7c9f0e48512"},{url:"templates/components-head.html",revision:"7627e2204c648033b590b0bbef93051c"}],{}),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:"4b609711.js",revision:"1ac696be6b73c994f0fa7999f81489be"},{url:"templates/components-body.html",revision:"1d7bfd4c4bb5af88f1fbd130369788cb"},{url:"templates/components-head.html",revision:"52326a23550ceb87b3a961ab401bffb5"}],{}),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/5bd1d1fd318ee51c69d1d153de8a180e/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\": \"0f5edc46.js\",\n    \"revision\": \"097ba917126aaaf8fb39fd1818064d5a\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"6f32569688a6e41a0519c7c9f0e48512\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"7627e2204c648033b590b0bbef93051c\"\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/50e3aa209253386114b5732534e78790/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\": \"4b609711.js\",\n    \"revision\": \"1ac696be6b73c994f0fa7999f81489be\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"1d7bfd4c4bb5af88f1fbd130369788cb\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"52326a23550ceb87b3a961ab401bffb5\"\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/0f5edc46.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.31.1"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/4b609711.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.31.2"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/0f5edc46.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/4b609711.js" crossorigin="anonymous">

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

@@ -13,6 +13,7 @@ export class TembaList extends RapidElement {
         this.tabIndex = 1;
         this.valueKey = 'id';
         this.loading = false;
+        this.paused = false;
         // changes to the refresh key force a refresh
         this.refreshKey = '0';
         this.reverseRefresh = true;
@@ -46,7 +47,9 @@ export class TembaList extends RapidElement {
     connectedCallback() {
         super.connectedCallback();
         this.refreshInterval = setInterval(() => {
-            this.refreshKey = 'default_' + new Date().getTime();
+            if (!this.paused) {
+                this.refreshKey = 'default_' + new Date().getTime();
+            }
         }, DEFAULT_REFRESH);
     }
     disconnectedCallback() {
@@ -370,6 +373,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TembaList.prototype, "hideShadow", void 0);
+__decorate([
+    property({ type: Boolean })
+], TembaList.prototype, "paused", void 0);
 __decorate([
     property({ attribute: false })
 ], TembaList.prototype, "getNextRefresh", void 0);

package/out-tsc/src/list/TembaList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TembaList.js","sourceRoot":"","sources":["../../../src/list/TembaList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { fetchResultsPage, ResultsPage } from '../utils';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class TembaList extends RapidElement {\n  @property({ type: Array, attribute: false })\n  items: any[] = [];\n\n  @property({ type: Object, attribute: false })\n  selected: any;\n\n  @property({ type: Number })\n  cursorIndex = -1;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  nextSelection: any;\n\n  @property({ type: Number })\n  tabIndex = 1;\n\n  @property({ type: String })\n  valueKey = 'id';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ type: Boolean })\n  hideShadow: boolean;\n\n  @property({ attribute: false })\n  getNextRefresh: (firstOption: any) => any;\n\n  @property({ attribute: false })\n  sanitizeOption: (option: any) => any;\n\n  @property({ attribute: false })\n  renderOption: (option: any, selected: boolean) => TemplateResult;\n\n  @property({ attribute: false })\n  renderOptionDetail: (option: any, selected: boolean) => TemplateResult;\n\n  @property({ attribute: false, type: Object })\n  mostRecentItem: any;\n\n  // changes to the refresh key force a refresh\n  @property({ type: String })\n  refreshKey = '0';\n\n  reverseRefresh = true;\n\n  // our next page from our endpoint\n  nextPage: string = null;\n\n  pages = 0;\n  clearRefreshTimeout: any;\n  pending: AbortController[] = [];\n\n  store: Store;\n\n  // used for testing only\n  preserve: boolean;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n    this.store = document.querySelector('temba-store') as Store;\n    this.handleSelection.bind(this);\n  }\n\n  private reset(): void {\n    this.selected = null;\n    this.nextPage = null;\n    this.cursorIndex = -1;\n    this.mostRecentItem = null;\n    this.items = [];\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    this.refreshInterval = setInterval(() => {\n      this.refreshKey = 'default_' + new Date().getTime();\n    }, DEFAULT_REFRESH);\n  }\n\n  public disconnectedCallback() {\n    clearInterval(this.refreshInterval);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('endpoint') && this.endpoint) {\n      // if our tests aren't preserving our properties, reset\n      if (!this.preserve) {\n        this.reset();\n        this.loading = true;\n      }\n\n      this.httpComplete = this.fetchItems();\n    }\n\n    if (\n      changedProperties.has('refreshKey') &&\n      !changedProperties.has('endpoint')\n    ) {\n      this.refreshTop();\n    }\n\n    if (changedProperties.has('mostRecentItem')) {\n      if (this.mostRecentItem) {\n        this.fireCustomEvent(CustomEventType.Refreshed);\n      }\n    }\n\n    if (changedProperties.has('cursorIndex')) {\n      if (this.cursorIndex > -1) {\n        this.selected = this.items[this.cursorIndex];\n        this.handleSelected(this.selected);\n      }\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public handleSelected(selected: any) {\n    const evt = new Event('change', { bubbles: true });\n    this.dispatchEvent(evt);\n  }\n\n  private getValue(obj: any): any {\n    if (!obj) {\n      return null;\n    }\n\n    const path = this.valueKey.split('.');\n    let current = obj;\n    while (path.length > 0) {\n      const key = path.shift();\n      current = current[key];\n    }\n    return current;\n  }\n\n  public setSelection(value: string) {\n    const index = this.items.findIndex(item => {\n      return this.getValue(item) === value;\n    });\n    this.cursorIndex = index;\n    this.selected = this.items[index];\n    const evt = new Event('change', { bubbles: true });\n    this.dispatchEvent(evt);\n  }\n\n  public getItemIndex(value: string) {\n    return this.items.findIndex(option => this.getValue(option) === value);\n  }\n\n  public removeItem(value: string) {\n    const index = this.getItemIndex(value);\n    this.items.splice(index, 1);\n    this.items = [...this.items];\n\n    // if we were at the end, move us down\n    this.cursorIndex = Math.max(\n      0,\n      Math.min(this.items.length - 1, this.cursorIndex - 1)\n    );\n\n    // request a change even if it is the same, the item is different\n    this.requestUpdate('cursorIndex');\n    this.requestUpdate('items');\n  }\n\n  public getSelection(): any {\n    return this.selected;\n  }\n\n  public refresh(): void {\n    this.refreshKey = 'requested_' + new Date().getTime();\n  }\n\n  public setEndpoint(endpoint: string, nextSelection: any = null) {\n    this.endpoint = endpoint;\n    this.nextSelection = nextSelection;\n  }\n\n  public getRefreshEndpoint() {\n    return this.endpoint;\n  }\n\n  /**\n   * Refreshes the first page, updating any found items in our list\n   */\n  private async refreshTop(): Promise<void> {\n    const refreshEndpoint = this.getRefreshEndpoint();\n    if (!refreshEndpoint) {\n      return;\n    }\n\n    // cancel any outstanding requests\n    while (this.pending.length > 0) {\n      const pending = this.pending.pop();\n      pending.abort();\n    }\n\n    const controller = new AbortController();\n    this.pending.push(controller);\n\n    const prevItem = this.items[this.cursorIndex];\n\n    try {\n      const page = await fetchResultsPage(\n        this.getRefreshEndpoint(),\n        controller\n      );\n\n      const items = [...this.items];\n      // remove any dupes already in our list\n      if (page.results) {\n        page.results.forEach((newOption: any) => {\n          if (this.sanitizeOption) {\n            this.sanitizeOption(newOption);\n          }\n          const newValue = this.getValue(newOption);\n          const removeIndex = items.findIndex(\n            option => this.getValue(option) === newValue\n          );\n\n          if (removeIndex > -1) {\n            items.splice(removeIndex, 1);\n          }\n        });\n\n        // insert our new items at the front\n        let results = page.results;\n        if (this.reverseRefresh) {\n          results = page.results.reverse();\n        }\n        const newItems = [...results, ...items];\n\n        const topItem = newItems[0];\n        if (\n          !this.mostRecentItem ||\n          JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)\n        ) {\n          this.mostRecentItem = topItem;\n        }\n\n        if (prevItem) {\n          const newItem = newItems[this.cursorIndex];\n          const prevValue = this.getValue(prevItem);\n          if (prevValue !== this.getValue(newItem)) {\n            const newIndex = newItems.findIndex(\n              option => this.getValue(option) === prevValue\n            );\n            this.cursorIndex = newIndex;\n\n            // make sure our focused item is visible\n            window.setTimeout(() => {\n              const options = this.shadowRoot.querySelector('temba-options');\n              if (options) {\n                const option =\n                  options.shadowRoot.querySelector('.option.focused');\n                option.scrollIntoView({ block: 'end', inline: 'nearest' });\n              }\n            }, 0);\n          }\n        }\n\n        this.items = newItems;\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  private async fetchItems(): Promise<void> {\n    // cancel any outstanding requests\n    while (this.pending.length > 0) {\n      const pending = this.pending.pop();\n      pending.abort();\n    }\n\n    let endpoint = this.endpoint;\n    let pagesToFetch = this.pages || 1;\n    let pages = 0;\n    let nextPage = null;\n\n    let fetchedItems: any[] = [];\n\n    while (pagesToFetch > 0 && endpoint) {\n      const controller = new AbortController();\n      this.pending.push(controller);\n\n      try {\n        const page = await fetchResultsPage(endpoint, controller);\n\n        // sanitize our options if necessary\n        if (this.sanitizeOption) {\n          page.results.forEach(this.sanitizeOption);\n        }\n\n        if (page.results) {\n          fetchedItems = fetchedItems.concat(page.results);\n        }\n\n        // save our next pages\n        nextPage = page.next;\n        endpoint = nextPage;\n        pagesToFetch--;\n        pages++;\n      } catch (error) {\n        // aborted\n        this.reset();\n\n        console.log('error, resetting');\n        return;\n      }\n\n      this.nextPage = nextPage;\n    }\n    this.pages = pages;\n\n    const topItem = fetchedItems[0];\n    if (\n      !this.mostRecentItem ||\n      JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)\n    ) {\n      this.mostRecentItem = topItem;\n    }\n\n    // see if our cursor needs to move to stay on the same item\n    const newItem = fetchedItems[this.cursorIndex];\n\n    if (\n      !this.nextSelection &&\n      this.selected &&\n      newItem &&\n      this.getValue(newItem) !== this.getValue(this.selected)\n    ) {\n      const index = fetchedItems.findIndex(item => {\n        return this.getValue(item) === this.getValue(this.selected);\n      });\n\n      // old selection is in the new fetch\n      if (index > -1) {\n        this.cursorIndex = index;\n      }\n      // old selection is missing from the new fetch\n      else {\n        // if our index didn't change, our item still did, fire change\n        if (this.cursorIndex === 0) {\n          this.requestUpdate('cursorIndex');\n        }\n        // otherwise select the first item\n        else {\n          this.cursorIndex = 0;\n        }\n      }\n    }\n\n    // save our results\n    this.items = fetchedItems;\n    this.loading = false;\n    this.pending = [];\n\n    if (this.nextSelection) {\n      this.setSelection(this.nextSelection);\n      this.nextSelection = false;\n    } else {\n      if (this.cursorIndex === -1) {\n        this.cursorIndex = 0;\n      }\n    }\n\n    // TODO: Not sure why this is needed\n    // this.requestUpdate('cursorIndex');\n\n    if (this.value) {\n      this.setSelection(this.value);\n      this.value = null;\n    }\n\n    return Promise.resolve();\n  }\n\n  private handleScrollThreshold() {\n    if (this.nextPage && !this.loading) {\n      this.loading = true;\n      fetchResultsPage(this.nextPage).then((page: ResultsPage) => {\n        if (this.sanitizeOption) {\n          page.results.forEach(this.sanitizeOption);\n        }\n\n        this.items = [...this.items, ...page.results];\n        this.nextPage = page.next;\n        this.pages++;\n        this.loading = false;\n      });\n    }\n  }\n\n  public renderHeader(): TemplateResult {\n    return null;\n  }\n\n  public renderFooter(): TemplateResult {\n    return null;\n  }\n\n  public getListStyle() {\n    return '';\n  }\n\n  private handleSelection(event: CustomEvent) {\n    const { selected, index } = event.detail;\n\n    this.selected = selected;\n    this.cursorIndex = index;\n\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n      <temba-options\n        style=\"${this.getListStyle()}\"\n        ?visible=${true}\n        ?block=${true}\n        ?hideShadow=${this.hideShadow}\n        ?collapsed=${this.collapsed}\n        ?loading=${this.loading}\n        .renderOption=${this.renderOption}\n        .renderOptionDetail=${this.renderOptionDetail}\n        @temba-scroll-threshold=${this.handleScrollThreshold}\n        @temba-selection=${this.handleSelection.bind(this)}\n        .options=${this.items}\n        .cursorIndex=${this.cursorIndex}\n      >\n        <slot></slot>\n      </temba-options>\n      ${this.renderFooter()}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TembaList.js","sourceRoot":"","sources":["../../../src/list/TembaList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { fetchResultsPage, ResultsPage } from '../utils';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class TembaList extends RapidElement {\n  @property({ type: Array, attribute: false })\n  items: any[] = [];\n\n  @property({ type: Object, attribute: false })\n  selected: any;\n\n  @property({ type: Number })\n  cursorIndex = -1;\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: String })\n  nextSelection: any;\n\n  @property({ type: Number })\n  tabIndex = 1;\n\n  @property({ type: String })\n  valueKey = 'id';\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: Boolean })\n  collapsed: boolean;\n\n  @property({ type: Boolean })\n  hideShadow: boolean;\n\n  @property({ type: Boolean })\n  paused = false;\n\n  @property({ attribute: false })\n  getNextRefresh: (firstOption: any) => any;\n\n  @property({ attribute: false })\n  sanitizeOption: (option: any) => any;\n\n  @property({ attribute: false })\n  renderOption: (option: any, selected: boolean) => TemplateResult;\n\n  @property({ attribute: false })\n  renderOptionDetail: (option: any, selected: boolean) => TemplateResult;\n\n  @property({ attribute: false, type: Object })\n  mostRecentItem: any;\n\n  // changes to the refresh key force a refresh\n  @property({ type: String })\n  refreshKey = '0';\n\n  reverseRefresh = true;\n\n  // our next page from our endpoint\n  nextPage: string = null;\n\n  pages = 0;\n  clearRefreshTimeout: any;\n  pending: AbortController[] = [];\n\n  store: Store;\n\n  // used for testing only\n  preserve: boolean;\n\n  // http promise to monitor for completeness\n  public httpComplete: Promise<void>;\n\n  static get styles() {\n    return css`\n      :host {\n      }\n\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n    this.store = document.querySelector('temba-store') as Store;\n    this.handleSelection.bind(this);\n  }\n\n  private reset(): void {\n    this.selected = null;\n    this.nextPage = null;\n    this.cursorIndex = -1;\n    this.mostRecentItem = null;\n    this.items = [];\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    this.refreshInterval = setInterval(() => {\n      if (!this.paused) {\n        this.refreshKey = 'default_' + new Date().getTime();\n      }\n    }, DEFAULT_REFRESH);\n  }\n\n  public disconnectedCallback() {\n    clearInterval(this.refreshInterval);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('endpoint') && this.endpoint) {\n      // if our tests aren't preserving our properties, reset\n      if (!this.preserve) {\n        this.reset();\n        this.loading = true;\n      }\n\n      this.httpComplete = this.fetchItems();\n    }\n\n    if (\n      changedProperties.has('refreshKey') &&\n      !changedProperties.has('endpoint')\n    ) {\n      this.refreshTop();\n    }\n\n    if (changedProperties.has('mostRecentItem')) {\n      if (this.mostRecentItem) {\n        this.fireCustomEvent(CustomEventType.Refreshed);\n      }\n    }\n\n    if (changedProperties.has('cursorIndex')) {\n      if (this.cursorIndex > -1) {\n        this.selected = this.items[this.cursorIndex];\n        this.handleSelected(this.selected);\n      }\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public handleSelected(selected: any) {\n    const evt = new Event('change', { bubbles: true });\n    this.dispatchEvent(evt);\n  }\n\n  private getValue(obj: any): any {\n    if (!obj) {\n      return null;\n    }\n\n    const path = this.valueKey.split('.');\n    let current = obj;\n    while (path.length > 0) {\n      const key = path.shift();\n      current = current[key];\n    }\n    return current;\n  }\n\n  public setSelection(value: string) {\n    const index = this.items.findIndex(item => {\n      return this.getValue(item) === value;\n    });\n    this.cursorIndex = index;\n    this.selected = this.items[index];\n    const evt = new Event('change', { bubbles: true });\n    this.dispatchEvent(evt);\n  }\n\n  public getItemIndex(value: string) {\n    return this.items.findIndex(option => this.getValue(option) === value);\n  }\n\n  public removeItem(value: string) {\n    const index = this.getItemIndex(value);\n    this.items.splice(index, 1);\n    this.items = [...this.items];\n\n    // if we were at the end, move us down\n    this.cursorIndex = Math.max(\n      0,\n      Math.min(this.items.length - 1, this.cursorIndex - 1)\n    );\n\n    // request a change even if it is the same, the item is different\n    this.requestUpdate('cursorIndex');\n    this.requestUpdate('items');\n  }\n\n  public getSelection(): any {\n    return this.selected;\n  }\n\n  public refresh(): void {\n    this.refreshKey = 'requested_' + new Date().getTime();\n  }\n\n  public setEndpoint(endpoint: string, nextSelection: any = null) {\n    this.endpoint = endpoint;\n    this.nextSelection = nextSelection;\n  }\n\n  public getRefreshEndpoint() {\n    return this.endpoint;\n  }\n\n  /**\n   * Refreshes the first page, updating any found items in our list\n   */\n  private async refreshTop(): Promise<void> {\n    const refreshEndpoint = this.getRefreshEndpoint();\n    if (!refreshEndpoint) {\n      return;\n    }\n\n    // cancel any outstanding requests\n    while (this.pending.length > 0) {\n      const pending = this.pending.pop();\n      pending.abort();\n    }\n\n    const controller = new AbortController();\n    this.pending.push(controller);\n\n    const prevItem = this.items[this.cursorIndex];\n\n    try {\n      const page = await fetchResultsPage(\n        this.getRefreshEndpoint(),\n        controller\n      );\n\n      const items = [...this.items];\n      // remove any dupes already in our list\n      if (page.results) {\n        page.results.forEach((newOption: any) => {\n          if (this.sanitizeOption) {\n            this.sanitizeOption(newOption);\n          }\n          const newValue = this.getValue(newOption);\n          const removeIndex = items.findIndex(\n            option => this.getValue(option) === newValue\n          );\n\n          if (removeIndex > -1) {\n            items.splice(removeIndex, 1);\n          }\n        });\n\n        // insert our new items at the front\n        let results = page.results;\n        if (this.reverseRefresh) {\n          results = page.results.reverse();\n        }\n        const newItems = [...results, ...items];\n\n        const topItem = newItems[0];\n        if (\n          !this.mostRecentItem ||\n          JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)\n        ) {\n          this.mostRecentItem = topItem;\n        }\n\n        if (prevItem) {\n          const newItem = newItems[this.cursorIndex];\n          const prevValue = this.getValue(prevItem);\n          if (prevValue !== this.getValue(newItem)) {\n            const newIndex = newItems.findIndex(\n              option => this.getValue(option) === prevValue\n            );\n            this.cursorIndex = newIndex;\n\n            // make sure our focused item is visible\n            window.setTimeout(() => {\n              const options = this.shadowRoot.querySelector('temba-options');\n              if (options) {\n                const option =\n                  options.shadowRoot.querySelector('.option.focused');\n                option.scrollIntoView({ block: 'end', inline: 'nearest' });\n              }\n            }, 0);\n          }\n        }\n\n        this.items = newItems;\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  private async fetchItems(): Promise<void> {\n    // cancel any outstanding requests\n    while (this.pending.length > 0) {\n      const pending = this.pending.pop();\n      pending.abort();\n    }\n\n    let endpoint = this.endpoint;\n    let pagesToFetch = this.pages || 1;\n    let pages = 0;\n    let nextPage = null;\n\n    let fetchedItems: any[] = [];\n\n    while (pagesToFetch > 0 && endpoint) {\n      const controller = new AbortController();\n      this.pending.push(controller);\n\n      try {\n        const page = await fetchResultsPage(endpoint, controller);\n\n        // sanitize our options if necessary\n        if (this.sanitizeOption) {\n          page.results.forEach(this.sanitizeOption);\n        }\n\n        if (page.results) {\n          fetchedItems = fetchedItems.concat(page.results);\n        }\n\n        // save our next pages\n        nextPage = page.next;\n        endpoint = nextPage;\n        pagesToFetch--;\n        pages++;\n      } catch (error) {\n        // aborted\n        this.reset();\n\n        console.log('error, resetting');\n        return;\n      }\n\n      this.nextPage = nextPage;\n    }\n    this.pages = pages;\n\n    const topItem = fetchedItems[0];\n    if (\n      !this.mostRecentItem ||\n      JSON.stringify(this.mostRecentItem) !== JSON.stringify(topItem)\n    ) {\n      this.mostRecentItem = topItem;\n    }\n\n    // see if our cursor needs to move to stay on the same item\n    const newItem = fetchedItems[this.cursorIndex];\n\n    if (\n      !this.nextSelection &&\n      this.selected &&\n      newItem &&\n      this.getValue(newItem) !== this.getValue(this.selected)\n    ) {\n      const index = fetchedItems.findIndex(item => {\n        return this.getValue(item) === this.getValue(this.selected);\n      });\n\n      // old selection is in the new fetch\n      if (index > -1) {\n        this.cursorIndex = index;\n      }\n      // old selection is missing from the new fetch\n      else {\n        // if our index didn't change, our item still did, fire change\n        if (this.cursorIndex === 0) {\n          this.requestUpdate('cursorIndex');\n        }\n        // otherwise select the first item\n        else {\n          this.cursorIndex = 0;\n        }\n      }\n    }\n\n    // save our results\n    this.items = fetchedItems;\n    this.loading = false;\n    this.pending = [];\n\n    if (this.nextSelection) {\n      this.setSelection(this.nextSelection);\n      this.nextSelection = false;\n    } else {\n      if (this.cursorIndex === -1) {\n        this.cursorIndex = 0;\n      }\n    }\n\n    // TODO: Not sure why this is needed\n    // this.requestUpdate('cursorIndex');\n\n    if (this.value) {\n      this.setSelection(this.value);\n      this.value = null;\n    }\n\n    return Promise.resolve();\n  }\n\n  private handleScrollThreshold() {\n    if (this.nextPage && !this.loading) {\n      this.loading = true;\n      fetchResultsPage(this.nextPage).then((page: ResultsPage) => {\n        if (this.sanitizeOption) {\n          page.results.forEach(this.sanitizeOption);\n        }\n\n        this.items = [...this.items, ...page.results];\n        this.nextPage = page.next;\n        this.pages++;\n        this.loading = false;\n      });\n    }\n  }\n\n  public renderHeader(): TemplateResult {\n    return null;\n  }\n\n  public renderFooter(): TemplateResult {\n    return null;\n  }\n\n  public getListStyle() {\n    return '';\n  }\n\n  private handleSelection(event: CustomEvent) {\n    const { selected, index } = event.detail;\n\n    this.selected = selected;\n    this.cursorIndex = index;\n\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.renderHeader()}\n      <temba-options\n        style=\"${this.getListStyle()}\"\n        ?visible=${true}\n        ?block=${true}\n        ?hideShadow=${this.hideShadow}\n        ?collapsed=${this.collapsed}\n        ?loading=${this.loading}\n        .renderOption=${this.renderOption}\n        .renderOptionDetail=${this.renderOptionDetail}\n        @temba-scroll-threshold=${this.handleScrollThreshold}\n        @temba-selection=${this.handleSelection.bind(this)}\n        .options=${this.items}\n        .cursorIndex=${this.cursorIndex}\n      >\n        <slot></slot>\n      </temba-options>\n      ${this.renderFooter()}\n    `;\n  }\n}\n"]}

package/out-tsc/src/vectoricon/VectorIcon.js

@@ -3,7 +3,7 @@ import { LitElement, html, css } from 'lit';
 import { property } from 'lit/decorators';
 import { getClasses } from '../utils';
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 13;
+const ICON_VERSION = 14;
 export class VectorIcon extends LitElement {
     constructor() {
         super();

package/out-tsc/src/vectoricon/VectorIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 13;\n\nexport class VectorIcon extends LitElement {\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  prefix: string;\n\n  // same as name but without implicit coloring\n  @property({ type: String })\n  id: string;\n\n  @property({ type: Number })\n  size = 1;\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  circled: boolean;\n\n  @property({ type: String })\n  animateChange: string;\n\n  @property({ type: String })\n  animateClick: string;\n\n  @property({ type: Number })\n  animationDuration = 200;\n\n  @property({ type: String })\n  src = '';\n\n  @property({ type: Number, attribute: false })\n  steps = 2;\n\n  @property({ type: Number, attribute: false })\n  animationStep: number;\n\n  @property({ type: String })\n  easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n  static get styles() {\n    return css`\n      :host {\n        margin: auto;\n        --color1: var(--icon-color);\n      }\n\n      .sheet {\n        fill: var(--icon-color);\n        transform: scale(1);\n        transition: fill 100ms ease-in-out,\n          background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      .sheet.spin {\n        transform: rotate(0deg);\n      }\n\n      .sheet.spin-1 {\n        transform: rotate(180deg);\n      }\n\n      .sheet.spin-2 {\n        transform: rotate(360deg);\n      }\n\n      .sheet.spin-3 {\n        transform: rotate(0deg);\n        transition-duration: 0ms !important;\n      }\n\n      .sheet.pulse {\n        transform: scale(1);\n      }\n\n      .sheet.pulse-1 {\n        transform: scale(1.2);\n      }\n\n      .clickable:hover {\n        cursor: pointer;\n        fill: var(--color-link-primary);\n        background: rgb(255, 255, 255);\n      }\n\n      .circled {\n        background: rgb(240, 240, 240);\n        padding: 0.15em;\n        margin: -0.15em;\n        box-shadow: var(--shadow);\n      }\n\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        border-radius: 999px;\n        transition: background 200ms linear,\n          transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 150ms linear, margin 150ms linear;\n      }\n\n      .wrapper.clickable {\n        transform: scale(1);\n      }\n\n      .wrapper.clickable:hover {\n        --icon-circle-size: 0.35em;\n        --icon-background: var(--icon-color-circle-hover);\n      }\n\n      .wrapper.clickable {\n        padding: var(--icon-circle-size);\n        margin: calc(-1 * var(--icon-circle-size));\n        background: var(--icon-background);\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  private lastName: string;\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n    if (changes.has('animateChange')) {\n      // set our default duration if we need one\n      if (!changes.has('animationDuration')) {\n        this.animationDuration = this.steps * this.animationDuration;\n      }\n\n      if (this.animateChange === 'spin') {\n        this.steps = 3;\n        this.animationDuration = 400;\n        this.easing = 'linear';\n      }\n    }\n  }\n\n  public handleClicked() {\n    if (this.animateClick) {\n      this.animationStep = 1;\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('animationStep')) {\n      // if we are halfway through, change the icon\n      if (this.lastName && this.animationStep >= this.steps / 2) {\n        this.lastName = null;\n        this.requestUpdate();\n      }\n\n      setTimeout(() => {\n        if (this.animationStep > 0 && this.animationStep < this.steps) {\n          this.animationStep++;\n        } else {\n          this.animationStep = 0;\n        }\n      }, this.animationDuration / this.steps);\n    }\n\n    if (changes.has('name') && this.animateChange) {\n      this.lastName = changes.get('name');\n\n      // our name changed, lets animate it\n      if (this.lastName && this.animateChange) {\n        this.animationStep = 1;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        @click=${this.handleClicked}\n        class=\"wrapper ${getClasses({\n          clickable: this.clickable,\n          circled: this.circled,\n          animate: !!this.animateChange || !!this.animateClick,\n        })}\"\n      >\n        <svg\n          style=\"height:${this.size}em;width:${this\n            .size}em;transition:transform ${this.animationDuration /\n          this.steps}ms\n          ${this.easing}\"\n          class=\"${getClasses({\n            sheet: this.src === '',\n            [this.animateChange]: !!this.animateChange,\n            [this.animateChange + '-' + this.animationStep]:\n              this.animationStep > 0,\n            [this.animateClick]: !!this.animateClick,\n            [this.animateClick + '-' + this.animationStep]:\n              this.animationStep > 0,\n          })}\"\n        >\n          <use\n            href=\"${this.src\n              ? this.src\n              : `${\n                  this.prefix || (window as any).static_url || '/static/'\n                }icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${\n                  this.lastName || this.name || this.id\n                }`}\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,4DAA4D;AAC5D,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,MAAM,OAAO,UAAW,SAAQ,UAAU;IAyHxC;QACE,KAAK,EAAE,CAAC;QA9GV,SAAI,GAAG,CAAC,CAAC;QAeT,sBAAiB,GAAG,GAAG,CAAC;QAGxB,QAAG,GAAG,EAAE,CAAC;QAGT,UAAK,GAAG,CAAC,CAAC;QAMV,WAAM,GAAG,wCAAwC,CAAC;IAoFlD,CAAC;IAlFD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4ET,CAAC;IACJ,CAAC;IAQM,YAAY,CAAC,OAAyB;QAC3C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChC,0CAA0C;YAC1C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE;gBACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC;aAC9D;YAED,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE;gBACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBACf,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC;gBAC7B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;aACxB;SACF;IACH,CAAC;IAEM,aAAa;QAClB,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;SACxB;IACH,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChC,6CAA6C;YAC7C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;gBACzD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;YAED,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE;oBAC7D,IAAI,CAAC,aAAa,EAAE,CAAC;iBACtB;qBAAM;oBACL,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;iBACxB;YACH,CAAC,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;SACzC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAC7C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAEpC,oCAAoC;YACpC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE;gBACvC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;aACxB;SACF;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,aAAa;yBACV,UAAU,CAAC;YAC1B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;SACrD,CAAC;;;0BAGgB,IAAI,CAAC,IAAI,YAAY,IAAI;aACtC,IAAI,2BAA2B,IAAI,CAAC,iBAAiB;YACxD,IAAI,CAAC,KAAK;YACR,IAAI,CAAC,MAAM;mBACJ,UAAU,CAAC;YAClB,KAAK,EAAE,IAAI,CAAC,GAAG,KAAK,EAAE;YACtB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa;YAC1C,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,EAC7C,IAAI,CAAC,aAAa,GAAG,CAAC;YACxB,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY;YACxC,CAAC,IAAI,CAAC,YAAY,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,EAC5C,IAAI,CAAC,aAAa,GAAG,CAAC;SACzB,CAAC;;;oBAGQ,IAAI,CAAC,GAAG;YACd,CAAC,CAAC,IAAI,CAAC,GAAG;YACV,CAAC,CAAC,GACE,IAAI,CAAC,MAAM,IAAK,MAAc,CAAC,UAAU,IAAI,UAC/C,2BAA2B,YAAY,SACrC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EACrC,EAAE;;;;KAIb,CAAC;IACJ,CAAC;CACF;AAtNC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACZ;AAIf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACnC;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACvB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACuB","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 14;\n\nexport class VectorIcon extends LitElement {\n  @property({ type: String })\n  name: string;\n\n  @property({ type: String })\n  prefix: string;\n\n  // same as name but without implicit coloring\n  @property({ type: String })\n  id: string;\n\n  @property({ type: Number })\n  size = 1;\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  circled: boolean;\n\n  @property({ type: String })\n  animateChange: string;\n\n  @property({ type: String })\n  animateClick: string;\n\n  @property({ type: Number })\n  animationDuration = 200;\n\n  @property({ type: String })\n  src = '';\n\n  @property({ type: Number, attribute: false })\n  steps = 2;\n\n  @property({ type: Number, attribute: false })\n  animationStep: number;\n\n  @property({ type: String })\n  easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n  static get styles() {\n    return css`\n      :host {\n        margin: auto;\n        --color1: var(--icon-color);\n      }\n\n      .sheet {\n        fill: var(--icon-color);\n        transform: scale(1);\n        transition: fill 100ms ease-in-out,\n          background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      .sheet.spin {\n        transform: rotate(0deg);\n      }\n\n      .sheet.spin-1 {\n        transform: rotate(180deg);\n      }\n\n      .sheet.spin-2 {\n        transform: rotate(360deg);\n      }\n\n      .sheet.spin-3 {\n        transform: rotate(0deg);\n        transition-duration: 0ms !important;\n      }\n\n      .sheet.pulse {\n        transform: scale(1);\n      }\n\n      .sheet.pulse-1 {\n        transform: scale(1.2);\n      }\n\n      .clickable:hover {\n        cursor: pointer;\n        fill: var(--color-link-primary);\n        background: rgb(255, 255, 255);\n      }\n\n      .circled {\n        background: rgb(240, 240, 240);\n        padding: 0.15em;\n        margin: -0.15em;\n        box-shadow: var(--shadow);\n      }\n\n      .wrapper {\n        display: flex;\n        flex-direction: column;\n        border-radius: 999px;\n        transition: background 200ms linear,\n          transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          padding 150ms linear, margin 150ms linear;\n      }\n\n      .wrapper.clickable {\n        transform: scale(1);\n      }\n\n      .wrapper.clickable:hover {\n        --icon-circle-size: 0.35em;\n        --icon-background: var(--icon-color-circle-hover);\n      }\n\n      .wrapper.clickable {\n        padding: var(--icon-circle-size);\n        margin: calc(-1 * var(--icon-circle-size));\n        background: var(--icon-background);\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  private lastName: string;\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n    if (changes.has('animateChange')) {\n      // set our default duration if we need one\n      if (!changes.has('animationDuration')) {\n        this.animationDuration = this.steps * this.animationDuration;\n      }\n\n      if (this.animateChange === 'spin') {\n        this.steps = 3;\n        this.animationDuration = 400;\n        this.easing = 'linear';\n      }\n    }\n  }\n\n  public handleClicked() {\n    if (this.animateClick) {\n      this.animationStep = 1;\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('animationStep')) {\n      // if we are halfway through, change the icon\n      if (this.lastName && this.animationStep >= this.steps / 2) {\n        this.lastName = null;\n        this.requestUpdate();\n      }\n\n      setTimeout(() => {\n        if (this.animationStep > 0 && this.animationStep < this.steps) {\n          this.animationStep++;\n        } else {\n          this.animationStep = 0;\n        }\n      }, this.animationDuration / this.steps);\n    }\n\n    if (changes.has('name') && this.animateChange) {\n      this.lastName = changes.get('name');\n\n      // our name changed, lets animate it\n      if (this.lastName && this.animateChange) {\n        this.animationStep = 1;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        @click=${this.handleClicked}\n        class=\"wrapper ${getClasses({\n          clickable: this.clickable,\n          circled: this.circled,\n          animate: !!this.animateChange || !!this.animateClick,\n        })}\"\n      >\n        <svg\n          style=\"height:${this.size}em;width:${this\n            .size}em;transition:transform ${this.animationDuration /\n          this.steps}ms\n          ${this.easing}\"\n          class=\"${getClasses({\n            sheet: this.src === '',\n            [this.animateChange]: !!this.animateChange,\n            [this.animateChange + '-' + this.animationStep]:\n              this.animationStep > 0,\n            [this.animateClick]: !!this.animateClick,\n            [this.animateClick + '-' + this.animationStep]:\n              this.animationStep > 0,\n          })}\"\n        >\n          <use\n            href=\"${this.src\n              ? this.src\n              : `${\n                  this.prefix || (window as any).static_url || '/static/'\n                }icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${\n                  this.lastName || this.name || this.id\n                }`}\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/list/TembaList.ts

@@ -41,6 +41,9 @@ export class TembaList extends RapidElement {
   @property({ type: Boolean })
   hideShadow: boolean;
 
+  @property({ type: Boolean })
+  paused = false;
+
   @property({ attribute: false })
   getNextRefresh: (firstOption: any) => any;
 
@@ -109,7 +112,9 @@ export class TembaList extends RapidElement {
   public connectedCallback() {
     super.connectedCallback();
     this.refreshInterval = setInterval(() => {
-      this.refreshKey = 'default_' + new Date().getTime();
+      if (!this.paused) {
+        this.refreshKey = 'default_' + new Date().getTime();
+      }
     }, DEFAULT_REFRESH);
   }
 

package/src/vectoricon/VectorIcon.ts

@@ -4,7 +4,7 @@ import { property } from 'lit/decorators';
 import { getClasses } from '../utils';
 
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 13;
+const ICON_VERSION = 14;
 
 export class VectorIcon extends LitElement {
   @property({ type: String })

package/static/icons/SVG/bar-chart.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>bar-chart</title>
+<path d="M19 20v-10c0-0.552-0.448-1-1-1s-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1zM13 20v-16c0-0.552-0.448-1-1-1s-1 0.448-1 1v16c0 0.552 0.448 1 1 1s1-0.448 1-1zM7 20v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
+</svg>

package/static/icons/SVG/pie-chart.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>pie-chart</title>
+<path d="M20.289 15.501c-0.968 2.289-2.771 3.968-4.906 4.835s-4.599 0.917-6.888-0.051-3.968-2.771-4.835-4.906-0.918-4.6 0.050-6.889c0.936-2.214 2.652-3.856 4.689-4.743 0.506-0.221 0.738-0.81 0.518-1.316s-0.81-0.738-1.316-0.518c-2.489 1.084-4.589 3.094-5.733 5.798-1.183 2.798-1.119 5.812-0.062 8.419s3.112 4.814 5.909 5.997 5.812 1.119 8.419 0.062 4.814-3.112 5.997-5.909c0.215-0.509-0.023-1.095-0.532-1.311s-1.095 0.023-1.311 0.532zM20.945 11h-7.945v-7.945c2.086 0.23 3.956 1.173 5.364 2.581s2.351 3.278 2.581 5.364zM23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1h10c0.552 0 1-0.448 1-1z"></path>
+</svg>

package/static/icons/demo-external-svg.html

@@ -20,6 +20,16 @@
                 <svg class="icon icon-hourglass"><use xlink:href="symbol-defs.svg#icon-hourglass"></use></svg><span class="name"> icon-hourglass</span>
             </div>
         </div>
+        <div class="glyph fs1">
+            <div class="clearfix pbs">
+                <svg class="icon icon-bar-chart"><use xlink:href="symbol-defs.svg#icon-bar-chart"></use></svg><span class="name"> icon-bar-chart</span>
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix pbs">
+                <svg class="icon icon-pie-chart"><use xlink:href="symbol-defs.svg#icon-pie-chart"></use></svg><span class="name"> icon-pie-chart</span>
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix pbs">
                 <svg class="icon icon-bookmark-filled"><use xlink:href="symbol-defs.svg#icon-bookmark-filled"></use></svg><span class="name"> icon-bookmark-filled</span>

package/static/icons/demo.html

@@ -13,6 +13,12 @@
 <symbol id="icon-hourglass" viewBox="0 0 24 24">
 <path d="M12 11.484l3.984-3.984v-3.516h-7.969v3.516zM15.984 16.5l-3.984-3.984-3.984 3.984v3.516h7.969v-3.516zM6 2.016h12v6l-3.984 3.984 3.984 3.984v6h-12v-6l3.984-3.984-3.984-3.984v-6z"></path>
 </symbol>
+<symbol id="icon-bar-chart" viewBox="0 0 24 24">
+<path d="M19 20v-10c0-0.552-0.448-1-1-1s-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1zM13 20v-16c0-0.552-0.448-1-1-1s-1 0.448-1 1v16c0 0.552 0.448 1 1 1s1-0.448 1-1zM7 20v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
+</symbol>
+<symbol id="icon-pie-chart" viewBox="0 0 24 24">
+<path d="M20.289 15.501c-0.968 2.289-2.771 3.968-4.906 4.835s-4.599 0.917-6.888-0.051-3.968-2.771-4.835-4.906-0.918-4.6 0.050-6.889c0.936-2.214 2.652-3.856 4.689-4.743 0.506-0.221 0.738-0.81 0.518-1.316s-0.81-0.738-1.316-0.518c-2.489 1.084-4.589 3.094-5.733 5.798-1.183 2.798-1.119 5.812-0.062 8.419s3.112 4.814 5.909 5.997 5.812 1.119 8.419 0.062 4.814-3.112 5.997-5.909c0.215-0.509-0.023-1.095-0.532-1.311s-1.095 0.023-1.311 0.532zM20.945 11h-7.945v-7.945c2.086 0.23 3.956 1.173 5.364 2.581s2.351 3.278 2.581 5.364zM23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1h10c0.552 0 1-0.448 1-1z"></path>
+</symbol>
 <symbol id="icon-bookmark-filled" viewBox="0 0 24 24">
 <path d="M17.016 3q0.797 0 1.383 0.609t0.586 1.406v15.984l-6.984-3-6.984 3v-15.984q0-0.797 0.586-1.406t1.383-0.609h10.031z"></path>
 </symbol>
@@ -548,6 +554,16 @@
                 <svg class="icon icon-hourglass"><use xlink:href="#icon-hourglass"></use></svg><span class="name"> icon-hourglass</span>
             </div>
         </div>
+        <div class="glyph fs1">
+            <div class="clearfix pbs">
+                <svg class="icon icon-bar-chart"><use xlink:href="#icon-bar-chart"></use></svg><span class="name"> icon-bar-chart</span>
+            </div>
+        </div>
+        <div class="glyph fs1">
+            <div class="clearfix pbs">
+                <svg class="icon icon-pie-chart"><use xlink:href="#icon-pie-chart"></use></svg><span class="name"> icon-pie-chart</span>
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix pbs">
                 <svg class="icon icon-bookmark-filled"><use xlink:href="#icon-bookmark-filled"></use></svg><span class="name"> icon-bookmark-filled</span>

package/static/icons/selection.json

@@ -26,6 +26,54 @@
       "setId": 4,
       "iconIdx": 757
     },
+    {
+      "icon": {
+        "paths": [
+          "M810.667 853.333v-426.667c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667v426.667c0 23.552 19.115 42.667 42.667 42.667s42.667-19.115 42.667-42.667zM554.667 853.333v-682.667c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667v682.667c0 23.552 19.115 42.667 42.667 42.667s42.667-19.115 42.667-42.667zM298.667 853.333v-256c0-23.552-19.115-42.667-42.667-42.667s-42.667 19.115-42.667 42.667v256c0 23.552 19.115 42.667 42.667 42.667s42.667-19.115 42.667-42.667z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "bar-chart-2"
+        ],
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "id": 28,
+        "order": 1339,
+        "prevSize": 24,
+        "name": "bar-chart"
+      },
+      "setIdx": 1,
+      "setId": 3,
+      "iconIdx": 27
+    },
+    {
+      "icon": {
+        "paths": [
+          "M865.664 661.376c-41.301 97.664-118.229 169.301-209.323 206.293s-196.224 39.125-293.888-2.176-169.301-118.229-206.293-209.323-39.168-196.267 2.133-293.931c39.936-94.464 113.152-164.523 200.064-202.368 21.589-9.429 31.488-34.56 22.101-56.149s-34.56-31.488-56.149-22.101c-106.197 46.251-195.797 132.011-244.608 247.381-50.475 119.381-47.744 247.979-2.645 359.211s132.779 205.397 252.117 255.872 247.979 47.744 359.211 2.645 205.397-132.779 255.872-252.117c9.173-21.717-0.981-46.72-22.699-55.936s-46.72 0.981-55.936 22.699zM893.653 469.333h-338.987v-338.987c89.003 9.813 168.789 50.048 228.864 110.123s100.309 139.861 110.123 228.864zM981.333 512c0-129.579-52.565-246.997-137.472-331.861s-202.283-137.472-331.861-137.472c-23.552 0-42.667 19.115-42.667 42.667v426.667c0 23.552 19.115 42.667 42.667 42.667h426.667c23.552 0 42.667-19.115 42.667-42.667z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "pie-chart"
+        ],
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "id": 186,
+        "order": 1340,
+        "prevSize": 24,
+        "name": "pie-chart"
+      },
+      "setIdx": 1,
+      "setId": 3,
+      "iconIdx": 185
+    },
     {
       "icon": {
         "paths": [

package/static/icons/symbol-defs.svg

@@ -3,6 +3,12 @@
 <symbol id="icon-hourglass" viewBox="0 0 24 24">
 <path d="M12 11.484l3.984-3.984v-3.516h-7.969v3.516zM15.984 16.5l-3.984-3.984-3.984 3.984v3.516h7.969v-3.516zM6 2.016h12v6l-3.984 3.984 3.984 3.984v6h-12v-6l3.984-3.984-3.984-3.984v-6z"></path>
 </symbol>
+<symbol id="icon-bar-chart" viewBox="0 0 24 24">
+<path d="M19 20v-10c0-0.552-0.448-1-1-1s-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1zM13 20v-16c0-0.552-0.448-1-1-1s-1 0.448-1 1v16c0 0.552 0.448 1 1 1s1-0.448 1-1zM7 20v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
+</symbol>
+<symbol id="icon-pie-chart" viewBox="0 0 24 24">
+<path d="M20.289 15.501c-0.968 2.289-2.771 3.968-4.906 4.835s-4.599 0.917-6.888-0.051-3.968-2.771-4.835-4.906-0.918-4.6 0.050-6.889c0.936-2.214 2.652-3.856 4.689-4.743 0.506-0.221 0.738-0.81 0.518-1.316s-0.81-0.738-1.316-0.518c-2.489 1.084-4.589 3.094-5.733 5.798-1.183 2.798-1.119 5.812-0.062 8.419s3.112 4.814 5.909 5.997 5.812 1.119 8.419 0.062 4.814-3.112 5.997-5.909c0.215-0.509-0.023-1.095-0.532-1.311s-1.095 0.023-1.311 0.532zM20.945 11h-7.945v-7.945c2.086 0.23 3.956 1.173 5.364 2.581s2.351 3.278 2.581 5.364zM23 12c0-3.037-1.232-5.789-3.222-7.778s-4.741-3.222-7.778-3.222c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1h10c0.552 0 1-0.448 1-1z"></path>
+</symbol>
 <symbol id="icon-bookmark-filled" viewBox="0 0 24 24">
 <path d="M17.016 3q0.797 0 1.383 0.609t0.586 1.406v15.984l-6.984-3-6.984 3v-15.984q0-0.797 0.586-1.406t1.383-0.609h10.031z"></path>
 </symbol>