@nyaruka/temba-components 0.43.6 → 0.43.8

package/CHANGELOG.md

@@ -4,8 +4,21 @@ 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.43.8](https://github.com/nyaruka/temba-components/compare/v0.43.7...v0.43.8)
+
+- Nicer accommodation on RunList for short browsers [`#295`](https://github.com/nyaruka/temba-components/pull/295)
+- Nicer accomodation on RunList for short browsers [`f1eb2c5`](https://github.com/nyaruka/temba-components/commit/f1eb2c56ff3e4e6f298f267d3e84b5e3070672c0)
+
+#### [v0.43.7](https://github.com/nyaruka/temba-components/compare/v0.43.6...v0.43.7)
+
+> 20 March 2023
+
+- Add full date format on mouseover for temba-date [`#294`](https://github.com/nyaruka/temba-components/pull/294)
+
 #### [v0.43.6](https://github.com/nyaruka/temba-components/compare/v0.43.5...v0.43.6)
 
+> 17 March 2023
+
 - Add refresh globals option and icon [`#293`](https://github.com/nyaruka/temba-components/pull/293)
 
 #### [v0.43.5](https://github.com/nyaruka/temba-components/compare/v0.43.4...v0.43.5)

package/dist/{4182f77e.js → 005a8061.js}

@@ -2973,9 +2973,6 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
     <div class="description">
       Language updated to <span class="attn">${t.language}</span>
     </div>`)(t)}return D`<temba-icon name="alert-triangle" style="fill:var(--color-error)"></temba-icon> <div class="description">${t.type}</div>`}handleClose(t){this.httpComplete=le("/api/v2/ticket_actions.json",{tickets:[t],action:"close"}).then((()=>{this.refreshTickets(),this.refresh(),this.fireCustomEvent(_t.ContentChanged,{ticket:{uuid:t,status:"closed"}})})).catch((t=>{console.error(t)}))}checkForAgentAssignmentEvent(t){this.httpComplete=re(`/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(_t.ContentChanged,{ticket:{uuid:this.ticket,assigned:"self"}}):this.fireCustomEvent(_t.ContentChanged,{ticket:{uuid:this.ticket,assigned:i.assignee?i.assignee:null}})}}))}getEventHandlers(){return[{event:"scroll",method:ve(this.handleScroll,50)}]}isPurged(t){return!this.ticketEvents[t.uuid]}handleEventClicked(t){const e=t.target;if("IMG"==e.tagName){const t=document.querySelector("temba-lightbox");t&&t.showElement(e)}}renderEventContainer(t){const e=this.getStickyId(t),i=!!e,n=D` <div @click="${this.handleEventClicked}" class="${this.ticket?"active-ticket":""} event ${t.type} ${i?"has-sticky":""}" data-sticky-id="${e}"> ${this.renderEvent(t)} </div> ${this.debug?D`<pre>${JSON.stringify(t,null,2)}</pre>`:null} `;return e?D`<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:Na.TICKET_OPENED,ticket:{uuid:t.uuid,topic:t.topic,body:t.body,ticketer:t.ticketer},created_on:t.opened_on},i=Ua(e,this.handleClose,!this.ticket);return D`<div class="event ticket_opened"> ${i} </div>`}}})):null;return D` ${this.ticket?D`<div class="sticky-bin">${t}</div>`:null} ${this.fetching?D`<temba-loading units="5" size="10"></temba-loading>`:D`<div style="height:0"></div>`} <div class="events" @scroll="${this.handleScroll}"> ${this.eventGroups.map(((t,e)=>{const i=Ra(t.events[0],this.ticket),n=this.eventGroups.length-e-1,o=ie({grouping:!0,[i]:!0,expanded:t.open});return D`<div class="${o}"> ${"verbose"===i?D`<div class="event-count" @click="${this.handleEventGroupShow}" data-group-index="${n}"> ${t.open?D`<temba-icon @click="${this.handleEventGroupHide}" data-group-index="${n}" name="x" clickable></temba-icon>`:D`${t.events.length} ${1===t.events.length?D`event`:D`events`} `} </div>`:null} <div class="items"> ${t.events.map((t=>{if(t.type===Na.TICKET_ASSIGNED&&t.note){const e={...t};return e.type=Na.TICKET_NOTE_ADDED,D`${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 ${ie({expanded:this.showMessageAlert})}"> New Messages </div> </div> `}}t([st({type:Object})],Ha.prototype,"contact",void 0),t([st({type:String})],Ha.prototype,"uuid",void 0),t([st({type:String})],Ha.prototype,"agent",void 0),t([st({type:Array})],Ha.prototype,"eventGroups",void 0),t([st({type:Boolean})],Ha.prototype,"refreshing",void 0),t([st({type:Boolean})],Ha.prototype,"fetching",void 0),t([st({type:Boolean})],Ha.prototype,"complete",void 0),t([st({type:String})],Ha.prototype,"endpoint",void 0),t([st({type:Boolean})],Ha.prototype,"debug",void 0),t([st({type:Boolean})],Ha.prototype,"showMessageAlert",void 0),t([st({attribute:!1,type:Object})],Ha.prototype,"mostRecentEvent",void 0),t([st({type:String})],Ha.prototype,"ticket",void 0),t([st({type:String})],Ha.prototype,"endDate",void 0),t([st({type:Array})],Ha.prototype,"tickets",void 0);class Wa extends nt{static get styles(){return r`
-      :host {
-      }
-
       temba-options {
         display: block;
         width: 100%;
@@ -5296,7 +5293,23 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         <div class="track" @mousedown=${this.handleTrackDown}></div>
         ${this.range?D`<div class="post">${this.max}</div>`:null}
       </div>
-    </div>`}}t([st({type:Boolean})],xl.prototype,"range",void 0),t([st({type:Number})],xl.prototype,"min",void 0),t([st({type:Number})],xl.prototype,"max",void 0);const wl="rgb(223, 65, 159)";class kl extends Wa{firstUpdated(t){super.firstUpdated(t)}updated(t){if(super.updated(t),(t.has("responses")||t.has("flow"))&&this.flow&&(this.endpoint=`/api/v2/runs.json?flow=${this.flow}${this.responses?"&responded=1":""}`),t.has("resultPreview")&&this.createRenderOption(),t.has("results")&&this.results){this.shadowRoot.querySelector("temba-select").setOptions(this.results),this.resultKeys=this.results.reduce(((t,e)=>({...t,[e.key]:e})),{})}}renderResultPreview(t){if(this.resultPreview){const e=t.values[this.resultPreview.key];if(e){if(!(this.resultPreview.categories.length>1))return e.value;if(e.category)return e.category}}return null}removeRun(t){this.items=this.items.filter((e=>e.id!==t)),this.cursorIndex=Math.min(this.cursorIndex,this.items.length),this.requestUpdate("cursorIndex")}getIcon(t){let e=null;return"completed"==t.exit_type?e=D`<temba-icon
+    </div>`}}t([st({type:Boolean})],xl.prototype,"range",void 0),t([st({type:Number})],xl.prototype,"min",void 0),t([st({type:Number})],xl.prototype,"max",void 0);const wl="rgb(223, 65, 159)";class kl extends Wa{static get styles(){return r`
+      :host {
+        overflow-y: auto !important;
+      }
+
+      @media only screen and (max-height: 768px) {
+        temba-options {
+          max-height: 20vh;
+        }
+      }
+
+      temba-options {
+        display: block;
+        width: 100%;
+        flex-grow: 1;
+      }
+    `}firstUpdated(t){super.firstUpdated(t)}updated(t){if(super.updated(t),(t.has("responses")||t.has("flow"))&&this.flow&&(this.endpoint=`/api/v2/runs.json?flow=${this.flow}${this.responses?"&responded=1":""}`),t.has("resultPreview")&&this.createRenderOption(),t.has("results")&&this.results){this.shadowRoot.querySelector("temba-select").setOptions(this.results),this.resultKeys=this.results.reduce(((t,e)=>({...t,[e.key]:e})),{})}}renderResultPreview(t){if(this.resultPreview){const e=t.values[this.resultPreview.key];if(e){if(!(this.resultPreview.categories.length>1))return e.value;if(e.category)return e.category}}return null}removeRun(t){this.items=this.items.filter((e=>e.id!==t)),this.cursorIndex=Math.min(this.cursorIndex,this.items.length),this.requestUpdate("cursorIndex")}getIcon(t){let e=null;return"completed"==t.exit_type?e=D`<temba-icon
         name="check"
         style="--icon-color:#666;margin-left:0.5em"
       />`:"interrupted"==t.exit_type?e=D`<temba-icon
@@ -5431,9 +5444,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         </div>
 
         ${t.length>0?D`
-              <div
-                style="padding:1em;overflow-y:auto;overflow-x:hidden;max-height:15vh;"
-              >
+              <div style="padding:1em;">
                 <div
                   style="display:flex;font-size:1.2em;position:relative;right:0px"
                 >
@@ -5910,7 +5921,22 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-    `}firstUpdated(t){super.firstUpdated(t),t.has("value")&&(this.datetime=Ss.fromISO(this.value),this.store=document.querySelector("temba-store"))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===Pl.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(Pl.time):e<8760?this.datetime.toFormat(Pl.day):this.datetime.toLocaleString(Pl.date)}else if(this.display===Pl.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div class="date">just now</div>`;t=this.store.getShortDuration(this.datetime)}else if(this.display===Pl.duration){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div class="date">just now</div>`;t=this.store.getShortDuration(this.datetime)}else t=this.display===Pl.day?this.datetime.toLocaleString(Pl.day):this.datetime.toLocaleString(Pl[this.display]);return D`<div class="date">${t}</div>`}}}t([st({type:String})],Il.prototype,"value",void 0),t([st({type:String})],Il.prototype,"display",void 0),t([st({type:Object,attribute:!1})],Il.prototype,"datetime",void 0);let Dl=class extends nt{constructor(){super(...arguments),this.body=D`<temba-loading></temba-loading>`}static get styles(){return r``}updated(t){super.updated(t),t.has("endpoint")&&ee(this.endpoint).then((t=>{console.log(t),this.body=Ls(t.body)}))}render(){return D`${this.body}`}};t([st({type:String})],Dl.prototype,"endpoint",void 0),t([st({attribute:!1})],Dl.prototype,"body",void 0),Dl=t([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:n}=e;return{kind:i,elements:n,finisher(e){customElements.define(t,e)}}})(t,e))("temba-remote")],Dl);var Nl=Dl;class Rl extends nt{constructor(){super(...arguments),this.animationTime=300,this.show=!1,this.zoom=!1,this.zoomPct=.9,this.scale=1,this.xTrans="0px",this.yTrans="0px"}static get styles(){return r`
+    `}firstUpdated(t){super.firstUpdated(t),t.has("value")&&(this.datetime=Ss.fromISO(this.value),this.store=document.querySelector("temba-store"))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===Pl.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(Pl.time):e<8760?this.datetime.toFormat(Pl.day):this.datetime.toLocaleString(Pl.date)}else if(this.display===Pl.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div
+            class="date"
+            title="${this.datetime.toLocaleString(Pl.datetime)}"
+          >
+            just now
+          </div>`;t=this.store.getShortDuration(this.datetime)}else if(this.display===Pl.duration){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div
+            class="date"
+            title="${this.datetime.toLocaleString(Pl.datetime)}"
+          >
+            just now
+          </div>`;t=this.store.getShortDuration(this.datetime)}else t=this.display===Pl.day?this.datetime.toLocaleString(Pl.day):this.datetime.toLocaleString(Pl[this.display]);return D`<div
+        class="date"
+        title="${this.datetime.toLocaleString(Pl.datetime)}"
+      >
+        ${t}
+      </div>`}}}t([st({type:String})],Il.prototype,"value",void 0),t([st({type:String})],Il.prototype,"display",void 0),t([st({type:Object,attribute:!1})],Il.prototype,"datetime",void 0);let Dl=class extends nt{constructor(){super(...arguments),this.body=D`<temba-loading></temba-loading>`}static get styles(){return r``}updated(t){super.updated(t),t.has("endpoint")&&ee(this.endpoint).then((t=>{console.log(t),this.body=Ls(t.body)}))}render(){return D`${this.body}`}};t([st({type:String})],Dl.prototype,"endpoint",void 0),t([st({attribute:!1})],Dl.prototype,"body",void 0),Dl=t([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:n}=e;return{kind:i,elements:n,finisher(e){customElements.define(t,e)}}})(t,e))("temba-remote")],Dl);var Nl=Dl;class Rl extends nt{constructor(){super(...arguments),this.animationTime=300,this.show=!1,this.zoom=!1,this.zoomPct=.9,this.scale=1,this.xTrans="0px",this.yTrans="0px"}static get styles(){return r`
       :host {
         position: absolute;
       }

package/dist/index.js

@@ -2973,9 +2973,6 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
     <div class="description">
       Language updated to <span class="attn">${t.language}</span>
     </div>`)(t)}return D`<temba-icon name="alert-triangle" style="fill:var(--color-error)"></temba-icon> <div class="description">${t.type}</div>`}handleClose(t){this.httpComplete=le("/api/v2/ticket_actions.json",{tickets:[t],action:"close"}).then((()=>{this.refreshTickets(),this.refresh(),this.fireCustomEvent(_t.ContentChanged,{ticket:{uuid:t,status:"closed"}})})).catch((t=>{console.error(t)}))}checkForAgentAssignmentEvent(t){this.httpComplete=re(`/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(_t.ContentChanged,{ticket:{uuid:this.ticket,assigned:"self"}}):this.fireCustomEvent(_t.ContentChanged,{ticket:{uuid:this.ticket,assigned:i.assignee?i.assignee:null}})}}))}getEventHandlers(){return[{event:"scroll",method:ve(this.handleScroll,50)}]}isPurged(t){return!this.ticketEvents[t.uuid]}handleEventClicked(t){const e=t.target;if("IMG"==e.tagName){const t=document.querySelector("temba-lightbox");t&&t.showElement(e)}}renderEventContainer(t){const e=this.getStickyId(t),i=!!e,n=D` <div @click="${this.handleEventClicked}" class="${this.ticket?"active-ticket":""} event ${t.type} ${i?"has-sticky":""}" data-sticky-id="${e}"> ${this.renderEvent(t)} </div> ${this.debug?D`<pre>${JSON.stringify(t,null,2)}</pre>`:null} `;return e?D`<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:Na.TICKET_OPENED,ticket:{uuid:t.uuid,topic:t.topic,body:t.body,ticketer:t.ticketer},created_on:t.opened_on},i=Ua(e,this.handleClose,!this.ticket);return D`<div class="event ticket_opened"> ${i} </div>`}}})):null;return D` ${this.ticket?D`<div class="sticky-bin">${t}</div>`:null} ${this.fetching?D`<temba-loading units="5" size="10"></temba-loading>`:D`<div style="height:0"></div>`} <div class="events" @scroll="${this.handleScroll}"> ${this.eventGroups.map(((t,e)=>{const i=Ra(t.events[0],this.ticket),n=this.eventGroups.length-e-1,o=ie({grouping:!0,[i]:!0,expanded:t.open});return D`<div class="${o}"> ${"verbose"===i?D`<div class="event-count" @click="${this.handleEventGroupShow}" data-group-index="${n}"> ${t.open?D`<temba-icon @click="${this.handleEventGroupHide}" data-group-index="${n}" name="x" clickable></temba-icon>`:D`${t.events.length} ${1===t.events.length?D`event`:D`events`} `} </div>`:null} <div class="items"> ${t.events.map((t=>{if(t.type===Na.TICKET_ASSIGNED&&t.note){const e={...t};return e.type=Na.TICKET_NOTE_ADDED,D`${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 ${ie({expanded:this.showMessageAlert})}"> New Messages </div> </div> `}}t([st({type:Object})],Ha.prototype,"contact",void 0),t([st({type:String})],Ha.prototype,"uuid",void 0),t([st({type:String})],Ha.prototype,"agent",void 0),t([st({type:Array})],Ha.prototype,"eventGroups",void 0),t([st({type:Boolean})],Ha.prototype,"refreshing",void 0),t([st({type:Boolean})],Ha.prototype,"fetching",void 0),t([st({type:Boolean})],Ha.prototype,"complete",void 0),t([st({type:String})],Ha.prototype,"endpoint",void 0),t([st({type:Boolean})],Ha.prototype,"debug",void 0),t([st({type:Boolean})],Ha.prototype,"showMessageAlert",void 0),t([st({attribute:!1,type:Object})],Ha.prototype,"mostRecentEvent",void 0),t([st({type:String})],Ha.prototype,"ticket",void 0),t([st({type:String})],Ha.prototype,"endDate",void 0),t([st({type:Array})],Ha.prototype,"tickets",void 0);class Wa extends nt{static get styles(){return r`
-      :host {
-      }
-
       temba-options {
         display: block;
         width: 100%;
@@ -5296,7 +5293,23 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         <div class="track" @mousedown=${this.handleTrackDown}></div>
         ${this.range?D`<div class="post">${this.max}</div>`:null}
       </div>
-    </div>`}}t([st({type:Boolean})],xl.prototype,"range",void 0),t([st({type:Number})],xl.prototype,"min",void 0),t([st({type:Number})],xl.prototype,"max",void 0);const wl="rgb(223, 65, 159)";class kl extends Wa{firstUpdated(t){super.firstUpdated(t)}updated(t){if(super.updated(t),(t.has("responses")||t.has("flow"))&&this.flow&&(this.endpoint=`/api/v2/runs.json?flow=${this.flow}${this.responses?"&responded=1":""}`),t.has("resultPreview")&&this.createRenderOption(),t.has("results")&&this.results){this.shadowRoot.querySelector("temba-select").setOptions(this.results),this.resultKeys=this.results.reduce(((t,e)=>({...t,[e.key]:e})),{})}}renderResultPreview(t){if(this.resultPreview){const e=t.values[this.resultPreview.key];if(e){if(!(this.resultPreview.categories.length>1))return e.value;if(e.category)return e.category}}return null}removeRun(t){this.items=this.items.filter((e=>e.id!==t)),this.cursorIndex=Math.min(this.cursorIndex,this.items.length),this.requestUpdate("cursorIndex")}getIcon(t){let e=null;return"completed"==t.exit_type?e=D`<temba-icon
+    </div>`}}t([st({type:Boolean})],xl.prototype,"range",void 0),t([st({type:Number})],xl.prototype,"min",void 0),t([st({type:Number})],xl.prototype,"max",void 0);const wl="rgb(223, 65, 159)";class kl extends Wa{static get styles(){return r`
+      :host {
+        overflow-y: auto !important;
+      }
+
+      @media only screen and (max-height: 768px) {
+        temba-options {
+          max-height: 20vh;
+        }
+      }
+
+      temba-options {
+        display: block;
+        width: 100%;
+        flex-grow: 1;
+      }
+    `}firstUpdated(t){super.firstUpdated(t)}updated(t){if(super.updated(t),(t.has("responses")||t.has("flow"))&&this.flow&&(this.endpoint=`/api/v2/runs.json?flow=${this.flow}${this.responses?"&responded=1":""}`),t.has("resultPreview")&&this.createRenderOption(),t.has("results")&&this.results){this.shadowRoot.querySelector("temba-select").setOptions(this.results),this.resultKeys=this.results.reduce(((t,e)=>({...t,[e.key]:e})),{})}}renderResultPreview(t){if(this.resultPreview){const e=t.values[this.resultPreview.key];if(e){if(!(this.resultPreview.categories.length>1))return e.value;if(e.category)return e.category}}return null}removeRun(t){this.items=this.items.filter((e=>e.id!==t)),this.cursorIndex=Math.min(this.cursorIndex,this.items.length),this.requestUpdate("cursorIndex")}getIcon(t){let e=null;return"completed"==t.exit_type?e=D`<temba-icon
         name="check"
         style="--icon-color:#666;margin-left:0.5em"
       />`:"interrupted"==t.exit_type?e=D`<temba-icon
@@ -5431,9 +5444,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         </div>
 
         ${t.length>0?D`
-              <div
-                style="padding:1em;overflow-y:auto;overflow-x:hidden;max-height:15vh;"
-              >
+              <div style="padding:1em;">
                 <div
                   style="display:flex;font-size:1.2em;position:relative;right:0px"
                 >
@@ -5910,7 +5921,22 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-    `}firstUpdated(t){super.firstUpdated(t),t.has("value")&&(this.datetime=Ss.fromISO(this.value),this.store=document.querySelector("temba-store"))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===Pl.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(Pl.time):e<8760?this.datetime.toFormat(Pl.day):this.datetime.toLocaleString(Pl.date)}else if(this.display===Pl.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div class="date">just now</div>`;t=this.store.getShortDuration(this.datetime)}else if(this.display===Pl.duration){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div class="date">just now</div>`;t=this.store.getShortDuration(this.datetime)}else t=this.display===Pl.day?this.datetime.toLocaleString(Pl.day):this.datetime.toLocaleString(Pl[this.display]);return D`<div class="date">${t}</div>`}}}t([st({type:String})],Il.prototype,"value",void 0),t([st({type:String})],Il.prototype,"display",void 0),t([st({type:Object,attribute:!1})],Il.prototype,"datetime",void 0);let Dl=class extends nt{constructor(){super(...arguments),this.body=D`<temba-loading></temba-loading>`}static get styles(){return r``}updated(t){super.updated(t),t.has("endpoint")&&ee(this.endpoint).then((t=>{console.log(t),this.body=Ls(t.body)}))}render(){return D`${this.body}`}};t([st({type:String})],Dl.prototype,"endpoint",void 0),t([st({attribute:!1})],Dl.prototype,"body",void 0),Dl=t([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:n}=e;return{kind:i,elements:n,finisher(e){customElements.define(t,e)}}})(t,e))("temba-remote")],Dl);var Nl=Dl;class Rl extends nt{constructor(){super(...arguments),this.animationTime=300,this.show=!1,this.zoom=!1,this.zoomPct=.9,this.scale=1,this.xTrans="0px",this.yTrans="0px"}static get styles(){return r`
+    `}firstUpdated(t){super.firstUpdated(t),t.has("value")&&(this.datetime=Ss.fromISO(this.value),this.store=document.querySelector("temba-store"))}connectedCallback(){super.connectedCallback()}render(){if(this.datetime&&this.store){this.datetime.setLocale(this.store.getLocale());let t="";if(this.display===Pl.timedate){const e=Math.abs(this.datetime.diffNow().milliseconds/1e3/60/60);t=e<24?this.datetime.toLocaleString(Pl.time):e<8760?this.datetime.toFormat(Pl.day):this.datetime.toLocaleString(Pl.date)}else if(this.display===Pl.relative){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div
+            class="date"
+            title="${this.datetime.toLocaleString(Pl.datetime)}"
+          >
+            just now
+          </div>`;t=this.store.getShortDuration(this.datetime)}else if(this.display===Pl.duration){if(Math.abs(this.datetime.diffNow().milliseconds/1e3/60)<1)return D`<div
+            class="date"
+            title="${this.datetime.toLocaleString(Pl.datetime)}"
+          >
+            just now
+          </div>`;t=this.store.getShortDuration(this.datetime)}else t=this.display===Pl.day?this.datetime.toLocaleString(Pl.day):this.datetime.toLocaleString(Pl[this.display]);return D`<div
+        class="date"
+        title="${this.datetime.toLocaleString(Pl.datetime)}"
+      >
+        ${t}
+      </div>`}}}t([st({type:String})],Il.prototype,"value",void 0),t([st({type:String})],Il.prototype,"display",void 0),t([st({type:Object,attribute:!1})],Il.prototype,"datetime",void 0);let Dl=class extends nt{constructor(){super(...arguments),this.body=D`<temba-loading></temba-loading>`}static get styles(){return r``}updated(t){super.updated(t),t.has("endpoint")&&ee(this.endpoint).then((t=>{console.log(t),this.body=Ls(t.body)}))}render(){return D`${this.body}`}};t([st({type:String})],Dl.prototype,"endpoint",void 0),t([st({attribute:!1})],Dl.prototype,"body",void 0),Dl=t([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:n}=e;return{kind:i,elements:n,finisher(e){customElements.define(t,e)}}})(t,e))("temba-remote")],Dl);var Nl=Dl;class Rl extends nt{constructor(){super(...arguments),this.animationTime=300,this.show=!1,this.zoom=!1,this.zoomPct=.9,this.scale=1,this.xTrans="0px",this.yTrans="0px"}static get styles(){return r`
       :host {
         position: absolute;
       }

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const c=e||("document"in self?document.currentScript.src:"")||location.href;if(t[c])return;let i={};const r=e=>o(e,c),l={module:{uri:c},exports:i,require:r};t[c]=Promise.all(n.map((e=>l[e]||r(e)))).then((e=>(s(...e),i)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"4182f77e.js",revision:"3a9fe1a27cbc62ce68c610fc62cfcc3d"},{url:"templates/components-body.html",revision:"a89d016ba406738f5820611cf6e26d14"},{url:"templates/components-head.html",revision:"01ad1d9c4da1d5175c2095c0856557ae"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const l=e=>o(e,i),c={module:{uri:i},exports:r,require:l};t[i]=Promise.all(n.map((e=>c[e]||l(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"005a8061.js",revision:"99427a863260ebcf6379b7d76bafe95e"},{url:"templates/components-body.html",revision:"d081347adeda0800679f2ea5c2b42537"},{url:"templates/components-head.html",revision:"859c3f72b2a08e9c8545071e5d756e58"}],{}),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/cc06dfb410e87c253a204e87cd597a8e/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 {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\nself.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\": \"4182f77e.js\",\n    \"revision\": \"3a9fe1a27cbc62ce68c610fc62cfcc3d\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"a89d016ba406738f5820611cf6e26d14\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"01ad1d9c4da1d5175c2095c0856557ae\"\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":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/09e497d6ecee5ca1ecd4955b84babbcb/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 {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\nself.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\": \"005a8061.js\",\n    \"revision\": \"99427a863260ebcf6379b7d76bafe95e\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"d081347adeda0800679f2ea5c2b42537\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"859c3f72b2a08e9c8545071e5d756e58\"\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":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/4182f77e.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.43.6"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/005a8061.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.43.8"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/4182f77e.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/005a8061.js" crossorigin="anonymous">

package/out-tsc/src/date/TembaDate.js

@@ -56,14 +56,24 @@ export class TembaDate extends RapidElement {
             else if (this.display === Display.relative) {
                 const minutes = Math.abs(this.datetime.diffNow().milliseconds / 1000 / 60);
                 if (minutes < 1) {
-                    return html `<div class="date">just now</div>`;
+                    return html `<div
+            class="date"
+            title="${this.datetime.toLocaleString(Display.datetime)}"
+          >
+            just now
+          </div>`;
                 }
                 formatted = this.store.getShortDuration(this.datetime);
             }
             else if (this.display === Display.duration) {
                 const minutes = Math.abs(this.datetime.diffNow().milliseconds / 1000 / 60);
                 if (minutes < 1) {
-                    return html `<div class="date">just now</div>`;
+                    return html `<div
+            class="date"
+            title="${this.datetime.toLocaleString(Display.datetime)}"
+          >
+            just now
+          </div>`;
                 }
                 formatted = this.store.getShortDuration(this.datetime);
             }
@@ -73,7 +83,12 @@ export class TembaDate extends RapidElement {
             else {
                 formatted = this.datetime.toLocaleString(Display[this.display]);
             }
-            return html `<div class="date">${formatted}</div>`;
+            return html `<div
+        class="date"
+        title="${this.datetime.toLocaleString(Display.datetime)}"
+      >
+        ${formatted}
+      </div>`;
         }
     }
 }

package/out-tsc/src/date/TembaDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"TembaDate.js","sourceRoot":"","sources":["../../../src/date/TembaDate.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { DateTime } from 'luxon';\n\nexport const Display = {\n  date: DateTime.DATE_SHORT,\n  datetime: DateTime.DATETIME_SHORT,\n  time: DateTime.TIME_SIMPLE,\n  timedate: 'timedate',\n  duration: 'duration',\n  relative: 'relative',\n  day: 'LLL d',\n};\n\nexport class TembaDate extends RapidElement {\n  static get styles() {\n    return css`\n      .date {\n        display: block;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  display = 'date';\n\n  @property({ type: Object, attribute: false })\n  datetime: DateTime;\n\n  store: Store;\n\n  protected firstUpdated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changedProperties);\n    if (changedProperties.has('value')) {\n      this.datetime = DateTime.fromISO(this.value);\n      this.store = document.querySelector('temba-store');\n    }\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  public render(): TemplateResult {\n    if (this.datetime && this.store) {\n      this.datetime.setLocale(this.store.getLocale());\n\n      let formatted = '';\n      if (this.display === Display.timedate) {\n        const hours = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60 / 60\n        );\n        if (hours < 24) {\n          formatted = this.datetime.toLocaleString(Display.time);\n        } else if (hours < 24 * 365) {\n          formatted = this.datetime.toFormat(Display.day);\n        } else {\n          formatted = this.datetime.toLocaleString(Display.date);\n        }\n      } else if (this.display === Display.relative) {\n        const minutes = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60\n        );\n        if (minutes < 1) {\n          return html`<div class=\"date\">just now</div>`;\n        }\n\n        formatted = this.store.getShortDuration(this.datetime);\n      } else if (this.display === Display.duration) {\n        const minutes = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60\n        );\n        if (minutes < 1) {\n          return html`<div class=\"date\">just now</div>`;\n        }\n        formatted = this.store.getShortDuration(this.datetime);\n      } else if (this.display === Display.day) {\n        formatted = this.datetime.toLocaleString(Display.day);\n      } else {\n        formatted = this.datetime.toLocaleString(Display[this.display]);\n      }\n      return html`<div class=\"date\">${formatted}</div>`;\n    }\n  }\n}\n"]}
+{"version":3,"file":"TembaDate.js","sourceRoot":"","sources":["../../../src/date/TembaDate.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { DateTime } from 'luxon';\n\nexport const Display = {\n  date: DateTime.DATE_SHORT,\n  datetime: DateTime.DATETIME_SHORT,\n  time: DateTime.TIME_SIMPLE,\n  timedate: 'timedate',\n  duration: 'duration',\n  relative: 'relative',\n  day: 'LLL d',\n};\n\nexport class TembaDate extends RapidElement {\n  static get styles() {\n    return css`\n      .date {\n        display: block;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  value: string;\n\n  @property({ type: String })\n  display = 'date';\n\n  @property({ type: Object, attribute: false })\n  datetime: DateTime;\n\n  store: Store;\n\n  protected firstUpdated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changedProperties);\n    if (changedProperties.has('value')) {\n      this.datetime = DateTime.fromISO(this.value);\n      this.store = document.querySelector('temba-store');\n    }\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  public render(): TemplateResult {\n    if (this.datetime && this.store) {\n      this.datetime.setLocale(this.store.getLocale());\n\n      let formatted = '';\n      if (this.display === Display.timedate) {\n        const hours = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60 / 60\n        );\n        if (hours < 24) {\n          formatted = this.datetime.toLocaleString(Display.time);\n        } else if (hours < 24 * 365) {\n          formatted = this.datetime.toFormat(Display.day);\n        } else {\n          formatted = this.datetime.toLocaleString(Display.date);\n        }\n      } else if (this.display === Display.relative) {\n        const minutes = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60\n        );\n        if (minutes < 1) {\n          return html`<div\n            class=\"date\"\n            title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n          >\n            just now\n          </div>`;\n        }\n\n        formatted = this.store.getShortDuration(this.datetime);\n      } else if (this.display === Display.duration) {\n        const minutes = Math.abs(\n          this.datetime.diffNow().milliseconds / 1000 / 60\n        );\n        if (minutes < 1) {\n          return html`<div\n            class=\"date\"\n            title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n          >\n            just now\n          </div>`;\n        }\n        formatted = this.store.getShortDuration(this.datetime);\n      } else if (this.display === Display.day) {\n        formatted = this.datetime.toLocaleString(Display.day);\n      } else {\n        formatted = this.datetime.toLocaleString(Display[this.display]);\n      }\n      return html`<div\n        class=\"date\"\n        title=\"${this.datetime.toLocaleString(Display.datetime)}\"\n      >\n        ${formatted}\n      </div>`;\n    }\n  }\n}\n"]}

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

@@ -1,11 +1,30 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
+import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { capitalize } from '../utils';
 import { Icon } from '../vectoricon';
 import { TembaList } from './TembaList';
 const FLOW_COLOR = 'rgb(223, 65, 159)';
 export class RunList extends TembaList {
+    static get styles() {
+        return css `
+      :host {
+        overflow-y: auto !important;
+      }
+
+      @media only screen and (max-height: 768px) {
+        temba-options {
+          max-height: 20vh;
+        }
+      }
+
+      temba-options {
+        display: block;
+        width: 100%;
+        flex-grow: 1;
+      }
+    `;
+    }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
     }
@@ -254,9 +273,7 @@ export class RunList extends TembaList {
 
         ${resultKeys.length > 0
             ? html `
-              <div
-                style="padding:1em;overflow-y:auto;overflow-x:hidden;max-height:15vh;"
-              >
+              <div style="padding:1em;">
                 <div
                   style="display:flex;font-size:1.2em;position:relative;right:0px"
                 >

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

@@ -1 +1 @@
-{"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  results: any[];\n\n  @property({ type: Boolean })\n  responses = true;\n\n  @property({ type: Object })\n  resultPreview: any;\n\n  @property({ type: Object })\n  selectedRun: any;\n\n  private resultKeys = {};\n\n  public firstUpdated(changedProperties: Map<string, any>) {\n    super.firstUpdated(changedProperties);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('responses') || changedProperties.has('flow')) {\n      if (this.flow) {\n        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n          this.responses ? '&responded=1' : ''\n        }`;\n      }\n    }\n\n    if (changedProperties.has('resultPreview')) {\n      this.createRenderOption();\n    }\n\n    if (changedProperties.has('results')) {\n      if (this.results) {\n        const select = this.shadowRoot.querySelector('temba-select') as Select;\n        select.setOptions(this.results);\n        this.resultKeys = this.results.reduce(\n          (current, result) => ({ ...current, [result.key]: result }),\n          {}\n        );\n      }\n    }\n  }\n\n  public renderResultPreview(run: any) {\n    if (this.resultPreview) {\n      const runResult = run.values[this.resultPreview.key];\n      if (runResult) {\n        if (this.resultPreview.categories.length > 1) {\n          if (runResult.category) {\n            return runResult.category;\n          }\n        } else {\n          return runResult.value;\n        }\n      }\n    }\n    return null;\n  }\n\n  public removeRun(id: number) {\n    this.items = this.items.filter(run => run.id !== id);\n    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n    this.requestUpdate('cursorIndex');\n  }\n\n  public getIcon(run: any): TemplateResult {\n    let icon = null;\n    if (run.exit_type == 'completed') {\n      icon = html`<temba-icon\n        name=\"check\"\n        style=\"--icon-color:#666;margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'interrupted') {\n      icon = html`<temba-icon\n        name=\"x-octagon\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'expired') {\n      icon = html`<temba-icon\n        name=\"clock\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (!run.exit_type) {\n      if (run.responded) {\n        icon = html`<temba-icon\n          name=\"activity\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      } else {\n        icon = html`<temba-icon\n          name=\"hourglass\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      }\n    }\n    return icon;\n  }\n\n  public createRenderOption() {\n    this.renderOption = (run: any): TemplateResult => {\n      let statusStyle = '';\n\n      if (!run.exited_on) {\n        statusStyle = 'font-weight:400;';\n      }\n\n      if (!run.responded) {\n        statusStyle += '';\n      }\n\n      return html`\n        <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n          <div\n            style=\"width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n          >\n            <temba-contact-name\n              name=${run.contact.name || run.contact.anon_display}\n              urn=${run.contact.urn}\n              icon-size=\"15\"\n            />\n          </div>\n\n          <div\n            style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n          >\n            ${this.renderResultPreview(run)}\n          </div>\n\n          <div style=\"flex-shrink:1\">\n            <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n          </div>\n          ${this.getIcon(run)}\n        </div>\n      `;\n    };\n  }\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const modifiedOn = this.items[0].modified_on;\n      return this.endpoint + '&after=' + modifiedOn;\n    }\n    return this.endpoint;\n  }\n\n  public toggleResponded() {\n    this.responses = (\n      this.shadowRoot.querySelector('#responded') as Checkbox\n    ).checked;\n  }\n\n  public handleColumnChanged(event: any) {\n    if (event.target.values.length > 0) {\n      this.resultPreview = event.target.values[0];\n    } else {\n      this.resultPreview = null;\n    }\n  }\n\n  public handleSelected(selected: any) {\n    this.selectedRun = selected;\n  }\n\n  public getListStyle(): string {\n    return '';\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`\n      <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n        <div style=\"flex-grow:1\">\n          ${this.results\n            ? html`\n                <temba-select\n                  clearable\n                  placeholder=\"Result Preview\"\n                  @change=${this.handleColumnChanged}\n                />\n              `\n            : null}\n        </div>\n        <div style=\"margin-left:1em;\">\n          <temba-checkbox\n            id=\"responded\"\n            label=\"Responses Only\"\n            checked=\"true\"\n            @click=${this.toggleResponded}\n          />\n        </div>\n      </div>\n      <div\n        style=\"\n        font-size:0.8em;\n        color:rgba(0,0,0,.4);\n        text-align:right;\n        background:#f9f9f9;\n        border: 1px solid var(--color-widget-border);\n        margin-bottom:-0.5em; \n        padding-bottom: 0.6em;\n        padding-top: 0.3em;\n        padding-right: 4.5em;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature)\n    \"\n      >\n        Last Updated\n      </div>\n    `;\n  }\n\n  public renderFooter(): TemplateResult {\n    if (!this.selectedRun || !this.resultKeys) {\n      return null;\n    }\n\n    const resultKeys = Object.keys(this.selectedRun.values);\n\n    return html` <div\n      style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n    >\n      <div style=\"display:flex;flex-direction:column;\">\n        <div\n          style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n        >\n          <div>\n            <temba-contact-name\n              style=\"cursor:pointer\"\n              name=${this.selectedRun.contact.name ||\n              this.selectedRun.contact.anon_display}\n              urn=${this.selectedRun.contact.urn}\n              onclick=\"goto(event, this)\"\n              href=\"/contact/read/${this.selectedRun.contact.uuid}/\"\n            ></temba-contact-name>\n            <div\n              style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n            >\n              ${this.selectedRun.exit_type\n                ? html`\n                    <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n                      ${this.getIcon(this.selectedRun)}\n                      <div style=\"margin-left:0.5em\">\n                        ${capitalize(this.selectedRun.exit_type)}&nbsp;\n                      </div>\n                      <temba-date\n                        value=\"${this.selectedRun.exited_on}\"\n                        compare=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>\n                  `\n                : html`${this.getIcon(this.selectedRun)}\n                    <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n                      <div>Started&nbsp;</div>\n                      <temba-date\n                        value=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      ></temba-date>\n                    </div>`}\n            </div>\n          </div>\n          <div style=\"flex-grow:1\"></div>\n          <div style=\"display:flex;flex-direction: column\">\n            <div style=\"font-size:0.75em\">\n              ${new Date(this.selectedRun.created_on).toLocaleString()}\n            </div>\n            <div\n              style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n            >\n              Started\n            </div>\n          </div>\n          <temba-icon\n            clickable\n            style=\"margin-left:0.75em;\"\n            name=${Icon.delete}\n            onclick=\"deleteRun(${this.selectedRun.id});\"\n          ></temba-icon>\n        </div>\n\n        ${resultKeys.length > 0\n          ? html`\n              <div\n                style=\"padding:1em;overflow-y:auto;overflow-x:hidden;max-height:15vh;\"\n              >\n                <div\n                  style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n                >\n                  <div style=\"flex-grow:1\"></div>\n                </div>\n\n                <table width=\"100%\">\n                  <tr>\n                    <th style=\"text-align:left\" width=\"25%\">Result</th>\n                    <th style=\"text-align:left\" width=\"25%\">Category</th>\n                    <th style=\"text-align:left\">Value</th>\n                  </tr>\n\n                  ${Object.keys(this.selectedRun.values).map((key: string) => {\n                    const result = this.selectedRun.values[key];\n                    const meta = this.resultKeys[key];\n\n                    // if our result is no longer represented in the flow, skip it\n                    if (meta) {\n                      return html`<tr>\n                        <td>${result.name}</td>\n                        <td>\n                          ${meta.categories.length > 1 ? result.category : '--'}\n                        </td>\n                        <td>${result.value}</td>\n                      </tr>`;\n                    }\n                    return null;\n                  })}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    </div>`;\n  }\n\n  constructor() {\n    super();\n    this.reverseRefresh = false;\n    this.valueKey = 'uuid';\n    this.hideShadow = true;\n    this.createRenderOption();\n  }\n}\n"]}
+{"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  results: any[];\n\n  @property({ type: Boolean })\n  responses = true;\n\n  @property({ type: Object })\n  resultPreview: any;\n\n  @property({ type: Object })\n  selectedRun: any;\n\n  private resultKeys = {};\n\n  static get styles() {\n    return css`\n      :host {\n        overflow-y: auto !important;\n      }\n\n      @media only screen and (max-height: 768px) {\n        temba-options {\n          max-height: 20vh;\n        }\n      }\n\n      temba-options {\n        display: block;\n        width: 100%;\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  public firstUpdated(changedProperties: Map<string, any>) {\n    super.firstUpdated(changedProperties);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('responses') || changedProperties.has('flow')) {\n      if (this.flow) {\n        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n          this.responses ? '&responded=1' : ''\n        }`;\n      }\n    }\n\n    if (changedProperties.has('resultPreview')) {\n      this.createRenderOption();\n    }\n\n    if (changedProperties.has('results')) {\n      if (this.results) {\n        const select = this.shadowRoot.querySelector('temba-select') as Select;\n        select.setOptions(this.results);\n        this.resultKeys = this.results.reduce(\n          (current, result) => ({ ...current, [result.key]: result }),\n          {}\n        );\n      }\n    }\n  }\n\n  public renderResultPreview(run: any) {\n    if (this.resultPreview) {\n      const runResult = run.values[this.resultPreview.key];\n      if (runResult) {\n        if (this.resultPreview.categories.length > 1) {\n          if (runResult.category) {\n            return runResult.category;\n          }\n        } else {\n          return runResult.value;\n        }\n      }\n    }\n    return null;\n  }\n\n  public removeRun(id: number) {\n    this.items = this.items.filter(run => run.id !== id);\n    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n    this.requestUpdate('cursorIndex');\n  }\n\n  public getIcon(run: any): TemplateResult {\n    let icon = null;\n    if (run.exit_type == 'completed') {\n      icon = html`<temba-icon\n        name=\"check\"\n        style=\"--icon-color:#666;margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'interrupted') {\n      icon = html`<temba-icon\n        name=\"x-octagon\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'expired') {\n      icon = html`<temba-icon\n        name=\"clock\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (!run.exit_type) {\n      if (run.responded) {\n        icon = html`<temba-icon\n          name=\"activity\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      } else {\n        icon = html`<temba-icon\n          name=\"hourglass\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      }\n    }\n    return icon;\n  }\n\n  public createRenderOption() {\n    this.renderOption = (run: any): TemplateResult => {\n      let statusStyle = '';\n\n      if (!run.exited_on) {\n        statusStyle = 'font-weight:400;';\n      }\n\n      if (!run.responded) {\n        statusStyle += '';\n      }\n\n      return html`\n        <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n          <div\n            style=\"width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n          >\n            <temba-contact-name\n              name=${run.contact.name || run.contact.anon_display}\n              urn=${run.contact.urn}\n              icon-size=\"15\"\n            />\n          </div>\n\n          <div\n            style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n          >\n            ${this.renderResultPreview(run)}\n          </div>\n\n          <div style=\"flex-shrink:1\">\n            <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n          </div>\n          ${this.getIcon(run)}\n        </div>\n      `;\n    };\n  }\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const modifiedOn = this.items[0].modified_on;\n      return this.endpoint + '&after=' + modifiedOn;\n    }\n    return this.endpoint;\n  }\n\n  public toggleResponded() {\n    this.responses = (\n      this.shadowRoot.querySelector('#responded') as Checkbox\n    ).checked;\n  }\n\n  public handleColumnChanged(event: any) {\n    if (event.target.values.length > 0) {\n      this.resultPreview = event.target.values[0];\n    } else {\n      this.resultPreview = null;\n    }\n  }\n\n  public handleSelected(selected: any) {\n    this.selectedRun = selected;\n  }\n\n  public getListStyle(): string {\n    return '';\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`\n      <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n        <div style=\"flex-grow:1\">\n          ${this.results\n            ? html`\n                <temba-select\n                  clearable\n                  placeholder=\"Result Preview\"\n                  @change=${this.handleColumnChanged}\n                />\n              `\n            : null}\n        </div>\n        <div style=\"margin-left:1em;\">\n          <temba-checkbox\n            id=\"responded\"\n            label=\"Responses Only\"\n            checked=\"true\"\n            @click=${this.toggleResponded}\n          />\n        </div>\n      </div>\n      <div\n        style=\"\n        font-size:0.8em;\n        color:rgba(0,0,0,.4);\n        text-align:right;\n        background:#f9f9f9;\n        border: 1px solid var(--color-widget-border);\n        margin-bottom:-0.5em; \n        padding-bottom: 0.6em;\n        padding-top: 0.3em;\n        padding-right: 4.5em;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature)\n    \"\n      >\n        Last Updated\n      </div>\n    `;\n  }\n\n  public renderFooter(): TemplateResult {\n    if (!this.selectedRun || !this.resultKeys) {\n      return null;\n    }\n\n    const resultKeys = Object.keys(this.selectedRun.values);\n\n    return html` <div\n      style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n    >\n      <div style=\"display:flex;flex-direction:column;\">\n        <div\n          style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n        >\n          <div>\n            <temba-contact-name\n              style=\"cursor:pointer\"\n              name=${this.selectedRun.contact.name ||\n              this.selectedRun.contact.anon_display}\n              urn=${this.selectedRun.contact.urn}\n              onclick=\"goto(event, this)\"\n              href=\"/contact/read/${this.selectedRun.contact.uuid}/\"\n            ></temba-contact-name>\n            <div\n              style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n            >\n              ${this.selectedRun.exit_type\n                ? html`\n                    <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n                      ${this.getIcon(this.selectedRun)}\n                      <div style=\"margin-left:0.5em\">\n                        ${capitalize(this.selectedRun.exit_type)}&nbsp;\n                      </div>\n                      <temba-date\n                        value=\"${this.selectedRun.exited_on}\"\n                        compare=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>\n                  `\n                : html`${this.getIcon(this.selectedRun)}\n                    <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n                      <div>Started&nbsp;</div>\n                      <temba-date\n                        value=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      ></temba-date>\n                    </div>`}\n            </div>\n          </div>\n          <div style=\"flex-grow:1\"></div>\n          <div style=\"display:flex;flex-direction: column\">\n            <div style=\"font-size:0.75em\">\n              ${new Date(this.selectedRun.created_on).toLocaleString()}\n            </div>\n            <div\n              style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n            >\n              Started\n            </div>\n          </div>\n          <temba-icon\n            clickable\n            style=\"margin-left:0.75em;\"\n            name=${Icon.delete}\n            onclick=\"deleteRun(${this.selectedRun.id});\"\n          ></temba-icon>\n        </div>\n\n        ${resultKeys.length > 0\n          ? html`\n              <div style=\"padding:1em;\">\n                <div\n                  style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n                >\n                  <div style=\"flex-grow:1\"></div>\n                </div>\n\n                <table width=\"100%\">\n                  <tr>\n                    <th style=\"text-align:left\" width=\"25%\">Result</th>\n                    <th style=\"text-align:left\" width=\"25%\">Category</th>\n                    <th style=\"text-align:left\">Value</th>\n                  </tr>\n\n                  ${Object.keys(this.selectedRun.values).map((key: string) => {\n                    const result = this.selectedRun.values[key];\n                    const meta = this.resultKeys[key];\n\n                    // if our result is no longer represented in the flow, skip it\n                    if (meta) {\n                      return html`<tr>\n                        <td>${result.name}</td>\n                        <td>\n                          ${meta.categories.length > 1 ? result.category : '--'}\n                        </td>\n                        <td>${result.value}</td>\n                      </tr>`;\n                    }\n                    return null;\n                  })}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    </div>`;\n  }\n\n  constructor() {\n    super();\n    this.reverseRefresh = false;\n    this.valueKey = 'uuid';\n    this.hideShadow = true;\n    this.createRenderOption();\n  }\n}\n"]}

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

@@ -8,9 +8,6 @@ const DEFAULT_REFRESH = 10000;
 export class TembaList extends RapidElement {
     static get styles() {
         return css `
-      :host {
-      }
-
       temba-options {
         display: block;
         width: 100%;

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.js';\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  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      this.reset();\n      this.loading = true;\n      this.fetchItems();\n    }\n\n    if (changedProperties.has('loading')) {\n      if (!this.loading) {\n        this.fireCustomEvent(CustomEventType.FetchComplete);\n      }\n    }\n\n    if (\n      changedProperties.has('refreshKey') &&\n      !changedProperties.has('endpoint')\n    ) {\n      this.refreshTop();\n    }\n\n    if (changedProperties.has('mostRecentItem')) {\n      this.fireCustomEvent(CustomEventType.Refreshed);\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        console.log(error);\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.js';\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  static get styles() {\n    return css`\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      this.reset();\n      this.loading = true;\n      this.fetchItems();\n    }\n\n    if (changedProperties.has('loading')) {\n      if (!this.loading) {\n        this.fireCustomEvent(CustomEventType.FetchComplete);\n      }\n    }\n\n    if (\n      changedProperties.has('refreshKey') &&\n      !changedProperties.has('endpoint')\n    ) {\n      this.refreshTop();\n    }\n\n    if (changedProperties.has('mostRecentItem')) {\n      this.fireCustomEvent(CustomEventType.Refreshed);\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        console.log(error);\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/package.json

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

package/src/date/TembaDate.ts

@@ -72,7 +72,12 @@ export class TembaDate extends RapidElement {
           this.datetime.diffNow().milliseconds / 1000 / 60
         );
         if (minutes < 1) {
-          return html`<div class="date">just now</div>`;
+          return html`<div
+            class="date"
+            title="${this.datetime.toLocaleString(Display.datetime)}"
+          >
+            just now
+          </div>`;
         }
 
         formatted = this.store.getShortDuration(this.datetime);
@@ -81,7 +86,12 @@ export class TembaDate extends RapidElement {
           this.datetime.diffNow().milliseconds / 1000 / 60
         );
         if (minutes < 1) {
-          return html`<div class="date">just now</div>`;
+          return html`<div
+            class="date"
+            title="${this.datetime.toLocaleString(Display.datetime)}"
+          >
+            just now
+          </div>`;
         }
         formatted = this.store.getShortDuration(this.datetime);
       } else if (this.display === Display.day) {
@@ -89,7 +99,12 @@ export class TembaDate extends RapidElement {
       } else {
         formatted = this.datetime.toLocaleString(Display[this.display]);
       }
-      return html`<div class="date">${formatted}</div>`;
+      return html`<div
+        class="date"
+        title="${this.datetime.toLocaleString(Display.datetime)}"
+      >
+        ${formatted}
+      </div>`;
     }
   }
 }

package/src/list/RunList.ts

@@ -1,4 +1,4 @@
-import { html, TemplateResult } from 'lit';
+import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Checkbox } from '../checkbox/Checkbox';
 import { Select } from '../select/Select';
@@ -26,6 +26,26 @@ export class RunList extends TembaList {
 
   private resultKeys = {};
 
+  static get styles() {
+    return css`
+      :host {
+        overflow-y: auto !important;
+      }
+
+      @media only screen and (max-height: 768px) {
+        temba-options {
+          max-height: 20vh;
+        }
+      }
+
+      temba-options {
+        display: block;
+        width: 100%;
+        flex-grow: 1;
+      }
+    `;
+  }
+
   public firstUpdated(changedProperties: Map<string, any>) {
     super.firstUpdated(changedProperties);
   }
@@ -294,9 +314,7 @@ export class RunList extends TembaList {
 
         ${resultKeys.length > 0
           ? html`
-              <div
-                style="padding:1em;overflow-y:auto;overflow-x:hidden;max-height:15vh;"
-              >
+              <div style="padding:1em;">
                 <div
                   style="display:flex;font-size:1.2em;position:relative;right:0px"
                 >

package/src/list/TembaList.ts

@@ -79,9 +79,6 @@ export class TembaList extends RapidElement {
 
   static get styles() {
     return css`
-      :host {
-      }
-
       temba-options {
         display: block;
         width: 100%;