@nyaruka/temba-components 0.31.5 → 0.31.8

package/CHANGELOG.md

@@ -4,8 +4,29 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.31.8](https://github.com/nyaruka/temba-components/compare/v0.31.7...v0.31.8)
+
+- Allow scheme for temba-urn [`#200`](https://github.com/nyaruka/temba-components/pull/200)
+
+#### [v0.31.7](https://github.com/nyaruka/temba-components/compare/v0.31.6...v0.31.7)
+
+> 29 August 2022
+
+- Add collapse icon for TembaMenu [`#199`](https://github.com/nyaruka/temba-components/pull/199)
+- Fix menu selecting first item [`#198`](https://github.com/nyaruka/temba-components/pull/198)
+- Add menu collapse [`6b56603`](https://github.com/nyaruka/temba-components/commit/6b566030f3daaa264c1366fe2be489aba6ad3c38)
+- Only add padding to visible collapse icon [`db926e6`](https://github.com/nyaruka/temba-components/commit/db926e6bba65665a5bf1c8b9d616f9e7a62043d8)
+
+#### [v0.31.6](https://github.com/nyaruka/temba-components/compare/v0.31.5...v0.31.6)
+
+> 25 August 2022
+
+- Use anon_display for name if it is there [`#197`](https://github.com/nyaruka/temba-components/pull/197)
+
 #### [v0.31.5](https://github.com/nyaruka/temba-components/compare/v0.31.4...v0.31.5)
 
+> 25 August 2022
+
 - Add option to override temba-dialog width [`#196`](https://github.com/nyaruka/temba-components/pull/196)
 
 #### [v0.31.4](https://github.com/nyaruka/temba-components/compare/v0.31.3...v0.31.4)

package/dist/{0dab0c35.js → 41f084a5.js}

@@ -3296,7 +3296,6 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
     `}}t([it({type:Boolean})],za.prototype,"fetching",void 0),t([it({type:Boolean})],za.prototype,"expanded",void 0),t([it({type:String})],za.prototype,"endpoint",void 0),t([it({type:String})],za.prototype,"placeholder",void 0),t([it({type:String})],za.prototype,"name",void 0),t([it({type:String})],za.prototype,"query",void 0),t([it({type:Number})],za.prototype,"inactiveThreshold",void 0),t([it({type:Number})],za.prototype,"inactiveDays",void 0),t([it({type:Object,attribute:!1})],za.prototype,"summary",void 0),t([it({type:Object,attribute:!1})],za.prototype,"flow",void 0);class Na extends X{constructor(){super(),this.size=1,this.animationDuration=200,this.src="",this.steps=2,this.easing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"}static get styles(){return r`
       :host {
         margin: auto;
-        --color1: var(--icon-color);
       }
 
       .sheet {
@@ -3335,7 +3334,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
 
       .clickable:hover {
         cursor: pointer;
-        fill: var(--color-link-primary);
+        fill: var(--color-link-primary) !important;
         background: rgb(255, 255, 255);
       }
 
@@ -3380,7 +3379,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           class="${Gt({sheet:""===this.src,[this.animateChange]:!!this.animateChange,[this.animateChange+"-"+this.animationStep]:this.animationStep>0,[this.animateClick]:!!this.animateClick,[this.animateClick+"-"+this.animationStep]:this.animationStep>0})}"
         >
           <use
-            href="${this.src?this.src:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=14#icon-${this.lastName||this.name||this.id}`}"
+            href="${this.src?this.src:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=15#icon-${this.lastName||this.name||this.id}`}"
           />
         </svg>
       </div>
@@ -3639,6 +3638,9 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       .level-0 > .top {
         padding-top: var(--menu-padding);
         background: var(--color-primary-dark);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
 
       .level-0 > .empty {
@@ -3905,7 +3907,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       }
 
       .fully-collapsed .level-1 {
-        margin-left: -217px;
+        margin-left: -208px;
         pointer-events: none;
         border: none;
         overflow: hidden;
@@ -3931,13 +3933,69 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         margin-left: 0.75em;
         margin-right: 0.75em;
       }
-    `}setBubble(t,e){const i=Ha(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(ue.Ready))}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem(),i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(ue.NoPath,i),this.pending=[],this.requestUpdate("root")}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=Kt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=Ha(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),"modax-button"!=e.type)if(e.trigger)new Function(e.trigger)();else if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!e.href),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=Ha(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(ue.ButtonClicked,{title:e.name,href:e.href,on_submit:e.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=Ha(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!Ha(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=Ha(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return O`<temba-loading
+
+      .expand-icon {
+        transform: rotate(180deg);
+        --icon-color: rgba(255, 255, 255, 0.5);
+        cursor: pointer;
+        max-height: 0px;
+        overflow: hidden;
+        opacity: 0;
+        transition: all 400ms ease-in-out 400ms;
+      }
+
+      .expand-icon:hover {
+        --icon-color: #fff;
+      }
+
+      .fully-collapsed .expand-icon {
+        padding-top: 0.5em;
+        max-height: 2em;
+        opacity: 1;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+      }
+
+      .section-header .section {
+        flex-grow: 1;
+      }
+
+      .section-header temba-icon {
+        --icon-color: #ddd;
+        cursor: pointer;
+        padding-bottom: 0.5em;
+        padding-right: 0.5em;
+      }
+
+      .section-header temba-icon:hover {
+        --icon-color: var(--color-link-primary);
+      }
+
+      slot[name='header'] {
+        display: none;
+      }
+
+      slot[name='header'].show-header {
+        display: block;
+      }
+    `}setBubble(t,e){const i=Ha(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(ue.Ready))}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(ue.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=Kt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=Ha(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),"modax-button"!=e.type)if(e.trigger)new Function(e.trigger)();else if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!0),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=Ha(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(ue.ButtonClicked,{title:e.name,href:e.href,on_submit:e.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=Ha(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!Ha(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=Ha(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return O`<temba-loading
         units="3"
         size="10"
         direction="column"
         style="margin:1em;margin-right:0em"
       />`;let t=this.root.items||[];const e=[];e.push(O`<div class="level level-0 ${this.submenu?"hidden":""}">
-        <div class="top"></div>
+        <div class="top">
+          <div class="expand-icon" @click=${this.handleExpand}>
+            <temba-icon
+              name="menu-collapse"
+              class="expand"
+              size="1.4"
+            ></temba-icon>
+          </div>
+        </div>
 
         ${t.filter((t=>!t.bottom)).map((t=>this.renderMenuItem(t)))}
 
@@ -3947,7 +4005,21 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       </div>`),this.selection.forEach(((i,n)=>{const o=Ha(t,i).item;let r=!1;if(o){t=o.items;const e=this.getMenuItemState(o.id);e.collapsed?r="collapsed"===e.collapsed:this.selection.length>o.level+2&&(r=!1)}else t=null;t&&t.length>0&&!o.inline&&e.push(O`<div
             class="${Gt({level:!0,["level-"+(n+1)]:!0,collapsed:r})}"
           >
-            ${this.submenu?null:O`<div class="section">${o.name}</div>`}
+            ${this.submenu?null:O`
+                  <slot
+                    class="${Gt({"show-header":o.show_header})}"
+                    name="header"
+                  ></slot>
+                  <div class="section-header">
+                    <div class="section">${o.name}</div>
+
+                    ${0!=n||this.collapsed?null:O`<temba-icon
+                          name="menu-collapse"
+                          size="1.1"
+                          @click=${this.handleCollapse}
+                        ></temba-icon>`}
+                  </div>
+                `}
             ${t.map((t=>t.inline&&t.items?O`${this.renderMenuItem(t)}
                   <div class="inline-children">
                     ${(t.items||[]).map((e=>this.renderMenuItem(e,t)))}
@@ -3958,12 +4030,15 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       ${e}
     </div>`;return O`${i}`}}t([it({type:Boolean})],Ua.prototype,"wraps",void 0),t([it({type:Boolean})],Ua.prototype,"wait",void 0),t([it({type:String})],Ua.prototype,"endpoint",void 0),t([it({type:String})],Ua.prototype,"expanding",void 0),t([it({type:String})],Ua.prototype,"value",void 0),t([it({type:String})],Ua.prototype,"submenu",void 0),t([it({type:Boolean})],Ua.prototype,"collapsed",void 0);class Va extends X{static get styles(){return r`
       :host {
-        cursor: pointer;
         color: var(--color-link-primary);
+        display: inline-block;
       }
-    `}handleClick(t){window.goto(t)}render(){return O`
-      <slot href="${this.href}" @click="${this.handleClick}"></slot>
-    `}}t([it({type:String})],Va.prototype,"href",void 0);class Wa extends tt{constructor(){super(...arguments),this.open=!1,this.arrowSize=6,this.arrowOffset=2*this.arrowSize,this.offsetX=-10,this.offsetY=0}static get styles(){return r`
+
+      slot:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    `}handleClick(t){window.goto(t)}render(){return O`<slot href="${this.href}" @click="${this.handleClick}"></slot>`}}t([it({type:String})],Va.prototype,"href",void 0);class Wa extends tt{constructor(){super(...arguments),this.open=!1,this.arrowSize=6,this.arrowOffset=2*this.arrowSize,this.offsetX=-10,this.offsetY=0}static get styles(){return r`
       .toggle {
         cursor: pointer;
       }
@@ -4022,6 +4097,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
 
       .tabs {
         display: flex;
+        padding-left: 0.18em;
       }
 
       .tab {
@@ -4038,6 +4114,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         color: var(--color-text-dark);
         --icon-color: var(--color-text-dark);
         white-space: nowrap;
+        transition: all 100ms ease-in-out;
       }
 
       .tab.hidden {
@@ -4076,6 +4153,8 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         cursor: default;
         box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
         background: #fff;
+        transform: scale(1.05) translateY(-0.05em);
+        z-index: 0;
       }
 
       .pane {
@@ -4087,10 +4166,12 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
           3px 3px 2px 1px rgba(0, 0, 0, 0.05);
         min-height: 0;
+        z-index: 1;
       }
 
       .pane.first {
         border-top-left-radius: 0px;
+        overflow: hidden;
       }
 
       .badge {
@@ -4254,7 +4335,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         ${this.name?this.name:this.urn?this.urn.split(":")[1]:""}
       </div>
       <slot></slot>
-    `}}t([it({type:String})],Ja.prototype,"name",void 0),t([it({type:String})],Ja.prototype,"urn",void 0),t([it({type:Number,attribute:"icon-size"})],Ja.prototype,"size",void 0);class Xa extends tt{static get styles(){return r`
+    `}}t([it({type:String})],Ja.prototype,"name",void 0),t([it({type:String})],Ja.prototype,"urn",void 0),t([it({type:Number,attribute:"icon-size"})],Ja.prototype,"size",void 0);class Xa extends tt{constructor(){super(...arguments),this.size=20}static get styles(){return r`
       :host {
         display: flex;
         align-items: center;
@@ -4274,14 +4355,14 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         box-shadow: none;
         margin-right: 0.5em;
       }
-    `}render(){const t=this.urn.split(":")[0];return O`
+    `}render(){const t=this.scheme||this.urn.split(":")[0];return O`
       <img
         class="urn ${this.size<20?"small":""}"
         width="${this.size}em"
         height="${this.size}em"
         src="${this.prefix||window.static_url||"/static/"}img/schemes/${t}.svg"
       />
-    `}}t([it({type:String})],Xa.prototype,"urn",void 0),t([it({type:Number})],Xa.prototype,"size",void 0);class Qa extends va{static get styles(){return r`
+    `}}t([it({type:String})],Xa.prototype,"urn",void 0),t([it({type:String})],Xa.prototype,"scheme",void 0),t([it({type:Number})],Xa.prototype,"size",void 0);class Qa extends va{static get styles(){return r`
       :host {
         --curvature-widget: 0px;
         border-radius: 6px;
@@ -4809,7 +4890,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
             style="width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
           >
             <temba-contact-name
-              name=${t.contact.name}
+              name=${t.contact.name||t.contact.anon_display}
               urn=${t.contact.urn}
               icon-size="15"
             />
@@ -4873,7 +4954,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           <div>
             <temba-contact-name
               style="cursor:pointer"
-              name=${this.selectedRun.contact.name}
+              name=${this.selectedRun.contact.name||this.selectedRun.contact.anon_display}
               urn=${this.selectedRun.contact.urn}
               onclick="goto(event, this)"
               href="/contact/read/${this.selectedRun.contact.uuid}/"
@@ -4954,7 +5035,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         margin-top: 2px;
       }
     `}render(){if(this.data)return O` <temba-contact-name
-          name=${this.data.name}
+          name=${this.data.name||this.data.anon_display}
           urn=${this.data.urns.length>0?this.data.urns[0]:null}
         />
         <slot></slot>`}}function cl(t,e){window.customElements.get(t)||window.customElements.define(t,e)}t([it({type:Number,attribute:"icon-size"})],ll.prototype,"size",void 0),cl("temba-anchor",Va),cl("temba-alert",Ia),cl("temba-store",ur),cl("temba-textinput",Ht),cl("temba-completion",ea),cl("temba-checkbox",rt),cl("temba-select",ta),cl("temba-options",pr),cl("temba-loading",sa),cl("temba-button",oa),cl("temba-omnibox",Fa),cl("temba-tip",Za),cl("temba-contact-name",Ja),cl("temba-contact-name-fetch",ll),cl("temba-contact-field",tl),cl("temba-contact-fields",Qa),cl("temba-urn",Xa),cl("temba-field",ra),cl("temba-dialog",na),cl("temba-modax",ia),cl("temba-charcount",fa),cl("temba-contact-history",Aa),cl("temba-contact-chat",ya),cl("temba-contact-details",Pa),cl("temba-ticket-list",Oa),cl("temba-list",La),cl("temba-run-list",sl),cl("temba-flow-details",al),cl("temba-label",Ka),cl("temba-menu",Ua),cl("temba-contact-search",za),cl("temba-icon",Na),cl("temba-dropdown",Wa),cl("temba-tabs",Ga),cl("temba-tab",Ya),cl("temba-contact-badges",class extends va{static get styles(){return r`

package/dist/index.js

@@ -3296,7 +3296,6 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
     `}}t([it({type:Boolean})],za.prototype,"fetching",void 0),t([it({type:Boolean})],za.prototype,"expanded",void 0),t([it({type:String})],za.prototype,"endpoint",void 0),t([it({type:String})],za.prototype,"placeholder",void 0),t([it({type:String})],za.prototype,"name",void 0),t([it({type:String})],za.prototype,"query",void 0),t([it({type:Number})],za.prototype,"inactiveThreshold",void 0),t([it({type:Number})],za.prototype,"inactiveDays",void 0),t([it({type:Object,attribute:!1})],za.prototype,"summary",void 0),t([it({type:Object,attribute:!1})],za.prototype,"flow",void 0);class Na extends X{constructor(){super(),this.size=1,this.animationDuration=200,this.src="",this.steps=2,this.easing="cubic-bezier(0.68, -0.55, 0.265, 1.55)"}static get styles(){return r`
       :host {
         margin: auto;
-        --color1: var(--icon-color);
       }
 
       .sheet {
@@ -3335,7 +3334,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
 
       .clickable:hover {
         cursor: pointer;
-        fill: var(--color-link-primary);
+        fill: var(--color-link-primary) !important;
         background: rgb(255, 255, 255);
       }
 
@@ -3380,7 +3379,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           class="${Gt({sheet:""===this.src,[this.animateChange]:!!this.animateChange,[this.animateChange+"-"+this.animationStep]:this.animationStep>0,[this.animateClick]:!!this.animateClick,[this.animateClick+"-"+this.animationStep]:this.animationStep>0})}"
         >
           <use
-            href="${this.src?this.src:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=14#icon-${this.lastName||this.name||this.id}`}"
+            href="${this.src?this.src:`${this.prefix||window.static_url||"/static/"}icons/symbol-defs.svg?v=15#icon-${this.lastName||this.name||this.id}`}"
           />
         </svg>
       </div>
@@ -3639,6 +3638,9 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       .level-0 > .top {
         padding-top: var(--menu-padding);
         background: var(--color-primary-dark);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
 
       .level-0 > .empty {
@@ -3905,7 +3907,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       }
 
       .fully-collapsed .level-1 {
-        margin-left: -217px;
+        margin-left: -208px;
         pointer-events: none;
         border: none;
         overflow: hidden;
@@ -3931,13 +3933,69 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         margin-left: 0.75em;
         margin-right: 0.75em;
       }
-    `}setBubble(t,e){const i=Ha(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(ue.Ready))}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem(),i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(ue.NoPath,i),this.pending=[],this.requestUpdate("root")}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=Kt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=Ha(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),"modax-button"!=e.type)if(e.trigger)new Function(e.trigger)();else if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!e.href),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=Ha(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(ue.ButtonClicked,{title:e.name,href:e.href,on_submit:e.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=Ha(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!Ha(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=Ha(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return O`<temba-loading
+
+      .expand-icon {
+        transform: rotate(180deg);
+        --icon-color: rgba(255, 255, 255, 0.5);
+        cursor: pointer;
+        max-height: 0px;
+        overflow: hidden;
+        opacity: 0;
+        transition: all 400ms ease-in-out 400ms;
+      }
+
+      .expand-icon:hover {
+        --icon-color: #fff;
+      }
+
+      .fully-collapsed .expand-icon {
+        padding-top: 0.5em;
+        max-height: 2em;
+        opacity: 1;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+      }
+
+      .section-header .section {
+        flex-grow: 1;
+      }
+
+      .section-header temba-icon {
+        --icon-color: #ddd;
+        cursor: pointer;
+        padding-bottom: 0.5em;
+        padding-right: 0.5em;
+      }
+
+      .section-header temba-icon:hover {
+        --icon-color: var(--color-link-primary);
+      }
+
+      slot[name='header'] {
+        display: none;
+      }
+
+      slot[name='header'].show-header {
+        display: block;
+      }
+    `}setBubble(t,e){const i=Ha(this.root.items,t);return!(!i||!i.item)&&(i.item.bubble=e,this.requestUpdate("root"),!0)}getMenuItemState(t){let e={};return t&&(e=this.state[t],e||(e={},this.state[t]=e)),e}updated(t){t.has("value")&&this.setSelection((this.value||"").split("/")),t.has("submenu")&&!t.has("value")&&this.setSelection([this.submenu]),t.has("endpoint")&&(this.root={level:-1,endpoint:this.endpoint},this.wait||this.loadItems(this.root),this.fireCustomEvent(ue.Ready))}refresh(t=null){t||(t=[...this.selection]);const e=this.getMenuItemForSelection(t);e&&(e.endpoint?this.loadItems(e,!1):(t.pop(),this.refresh(t)))}fireNoPath(t){const e=this.getMenuItem();if(e){const i={item:e.id,selection:"/"+this.selection.join("/"),endpoint:e.endpoint,path:t+"/"+this.pending.join("/")+document.location.search},n=this.selection.join("/");n.replace(i.path,""),this.selection=n.split("/"),this.fireCustomEvent(ue.NoPath,i),this.pending=[],this.requestUpdate("root")}}loadItems(t,e=!0){t&&t.endpoint&&(t.loading=!0,this.httpComplete=Kt(t.endpoint).then((i=>{if(i.forEach((e=>{e.level=t.level+1,e.items&&e.items.forEach((e=>{e.level=t.level+2}))})),t.items=i,t.loading=!1,this.requestUpdate("root"),this.scrollSelectedIntoView(),this.pending&&this.pending.length>0){const t=this.pending.shift();if(t&&i.length>0){const e=Ha(i,t);e.item?this.handleItemClicked(null,e.item):this.fireNoPath(t)}}else if(e&&i.length>0&&this.selection.length>=1&&!t.inline)for(const t of i)if(!t.type){this.handleItemClicked(null,t);break}})))}handleItemClicked(t,e,i=null){if(i&&i.inline&&this.handleItemClicked(null,i),this.collapsed&&(this.collapsed=!1),t&&(t.preventDefault(),t.stopPropagation()),"modax-button"!=e.type)if(e.trigger)new Function(e.trigger)();else if(e.level,e.level>=this.selection.length?this.selection.push(e.vanity_id||e.id):this.selection.splice(e.level,this.selection.length-e.level,e.vanity_id||e.id),e.endpoint)this.loadItems(e,!0),this.dispatchEvent(new Event("change"));else{if(this.pending&&this.pending.length>0){const t=this.pending.shift(),e=this.getMenuItem();if(t&&e&&e.items&&e.items.length>0){const i=Ha(e.items,t).item;i?this.handleItemClicked(null,i):this.fireNoPath(t)}else this.fireNoPath(t)}else this.dispatchEvent(new Event("change"));this.requestUpdate("root")}else this.fireCustomEvent(ue.ButtonClicked,{title:e.name,href:e.href,on_submit:e.on_submit})}scrollSelectedIntoView(){window.setTimeout((()=>{this.shadowRoot.querySelectorAll(".selected").forEach((t=>{t.scrollIntoView({block:"end",behavior:"smooth"})}))}),0)}clickItem(t){const e=[...this.selection];e.splice(e.length-1,1,t);const i=this.getMenuItemForSelection(e);return!!i&&(this.handleItemClicked(null,i),this.scrollSelectedIntoView(),!0)}getMenuItem(){return this.getMenuItemForSelection([...this.selection])}getMenuItemForSelection(t){const e=[...t];let i=this.root.items,n=null;for(;e.length>0;){const t=e.splice(0,1)[0];if(!i)break;if(n=Ha(i,t).item,!n)break;i=n.items}return n}getSelection(){return this.selection}setSelection(t){this.pending=[...t],this.selection=[],this.wait&&(this.wait=!1,this.loadItems(this.root))}setSelectionPath(t){const e=t.split("/").filter((t=>!!t));this.clickItem(e[e.length-1])||(this.wait=!0,this.setSelection(e))}handleExpand(){this.collapsed=!1}handleCollapse(){this.collapsed=!0}async setFocusedItem(t){const e=t.split("/").filter((t=>!!t));if(e.length>0){if(!Ha(this.root.items,e[0]).item)return}const i=[];let n=this.root;for(;e.length>0;){const t=e.shift();t&&(n.items||(this.loadItems(n,!1),await this.httpComplete),n=Ha(n.items,t).item,n?i.push(t):e.splice(0,e.length))}this.selection=i,this.requestUpdate("root")}isSelected(t){if(t.level<this.selection.length){return this.selection[t.level]==(t.vanity_id||t.id)}return!1}isExpanded(t){return!!this.selection.find((e=>e===t.vanity_id||t.id))}render(){if(!this.root||!this.root.items)return O`<temba-loading
         units="3"
         size="10"
         direction="column"
         style="margin:1em;margin-right:0em"
       />`;let t=this.root.items||[];const e=[];e.push(O`<div class="level level-0 ${this.submenu?"hidden":""}">
-        <div class="top"></div>
+        <div class="top">
+          <div class="expand-icon" @click=${this.handleExpand}>
+            <temba-icon
+              name="menu-collapse"
+              class="expand"
+              size="1.4"
+            ></temba-icon>
+          </div>
+        </div>
 
         ${t.filter((t=>!t.bottom)).map((t=>this.renderMenuItem(t)))}
 
@@ -3947,7 +4005,21 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       </div>`),this.selection.forEach(((i,n)=>{const o=Ha(t,i).item;let r=!1;if(o){t=o.items;const e=this.getMenuItemState(o.id);e.collapsed?r="collapsed"===e.collapsed:this.selection.length>o.level+2&&(r=!1)}else t=null;t&&t.length>0&&!o.inline&&e.push(O`<div
             class="${Gt({level:!0,["level-"+(n+1)]:!0,collapsed:r})}"
           >
-            ${this.submenu?null:O`<div class="section">${o.name}</div>`}
+            ${this.submenu?null:O`
+                  <slot
+                    class="${Gt({"show-header":o.show_header})}"
+                    name="header"
+                  ></slot>
+                  <div class="section-header">
+                    <div class="section">${o.name}</div>
+
+                    ${0!=n||this.collapsed?null:O`<temba-icon
+                          name="menu-collapse"
+                          size="1.1"
+                          @click=${this.handleCollapse}
+                        ></temba-icon>`}
+                  </div>
+                `}
             ${t.map((t=>t.inline&&t.items?O`${this.renderMenuItem(t)}
                   <div class="inline-children">
                     ${(t.items||[]).map((e=>this.renderMenuItem(e,t)))}
@@ -3958,12 +4030,15 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
       ${e}
     </div>`;return O`${i}`}}t([it({type:Boolean})],Ua.prototype,"wraps",void 0),t([it({type:Boolean})],Ua.prototype,"wait",void 0),t([it({type:String})],Ua.prototype,"endpoint",void 0),t([it({type:String})],Ua.prototype,"expanding",void 0),t([it({type:String})],Ua.prototype,"value",void 0),t([it({type:String})],Ua.prototype,"submenu",void 0),t([it({type:Boolean})],Ua.prototype,"collapsed",void 0);class Va extends X{static get styles(){return r`
       :host {
-        cursor: pointer;
         color: var(--color-link-primary);
+        display: inline-block;
       }
-    `}handleClick(t){window.goto(t)}render(){return O`
-      <slot href="${this.href}" @click="${this.handleClick}"></slot>
-    `}}t([it({type:String})],Va.prototype,"href",void 0);class Wa extends tt{constructor(){super(...arguments),this.open=!1,this.arrowSize=6,this.arrowOffset=2*this.arrowSize,this.offsetX=-10,this.offsetY=0}static get styles(){return r`
+
+      slot:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    `}handleClick(t){window.goto(t)}render(){return O`<slot href="${this.href}" @click="${this.handleClick}"></slot>`}}t([it({type:String})],Va.prototype,"href",void 0);class Wa extends tt{constructor(){super(...arguments),this.open=!1,this.arrowSize=6,this.arrowOffset=2*this.arrowSize,this.offsetX=-10,this.offsetY=0}static get styles(){return r`
       .toggle {
         cursor: pointer;
       }
@@ -4022,6 +4097,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
 
       .tabs {
         display: flex;
+        padding-left: 0.18em;
       }
 
       .tab {
@@ -4038,6 +4114,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         color: var(--color-text-dark);
         --icon-color: var(--color-text-dark);
         white-space: nowrap;
+        transition: all 100ms ease-in-out;
       }
 
       .tab.hidden {
@@ -4076,6 +4153,8 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         cursor: default;
         box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
         background: #fff;
+        transform: scale(1.05) translateY(-0.05em);
+        z-index: 0;
       }
 
       .pane {
@@ -4087,10 +4166,12 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
           3px 3px 2px 1px rgba(0, 0, 0, 0.05);
         min-height: 0;
+        z-index: 1;
       }
 
       .pane.first {
         border-top-left-radius: 0px;
+        overflow: hidden;
       }
 
       .badge {
@@ -4254,7 +4335,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         ${this.name?this.name:this.urn?this.urn.split(":")[1]:""}
       </div>
       <slot></slot>
-    `}}t([it({type:String})],Ja.prototype,"name",void 0),t([it({type:String})],Ja.prototype,"urn",void 0),t([it({type:Number,attribute:"icon-size"})],Ja.prototype,"size",void 0);class Xa extends tt{static get styles(){return r`
+    `}}t([it({type:String})],Ja.prototype,"name",void 0),t([it({type:String})],Ja.prototype,"urn",void 0),t([it({type:Number,attribute:"icon-size"})],Ja.prototype,"size",void 0);class Xa extends tt{constructor(){super(...arguments),this.size=20}static get styles(){return r`
       :host {
         display: flex;
         align-items: center;
@@ -4274,14 +4355,14 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         box-shadow: none;
         margin-right: 0.5em;
       }
-    `}render(){const t=this.urn.split(":")[0];return O`
+    `}render(){const t=this.scheme||this.urn.split(":")[0];return O`
       <img
         class="urn ${this.size<20?"small":""}"
         width="${this.size}em"
         height="${this.size}em"
         src="${this.prefix||window.static_url||"/static/"}img/schemes/${t}.svg"
       />
-    `}}t([it({type:String})],Xa.prototype,"urn",void 0),t([it({type:Number})],Xa.prototype,"size",void 0);class Qa extends va{static get styles(){return r`
+    `}}t([it({type:String})],Xa.prototype,"urn",void 0),t([it({type:String})],Xa.prototype,"scheme",void 0),t([it({type:Number})],Xa.prototype,"size",void 0);class Qa extends va{static get styles(){return r`
       :host {
         --curvature-widget: 0px;
         border-radius: 6px;
@@ -4809,7 +4890,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
             style="width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;"
           >
             <temba-contact-name
-              name=${t.contact.name}
+              name=${t.contact.name||t.contact.anon_display}
               urn=${t.contact.urn}
               icon-size="15"
             />
@@ -4873,7 +4954,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
           <div>
             <temba-contact-name
               style="cursor:pointer"
-              name=${this.selectedRun.contact.name}
+              name=${this.selectedRun.contact.name||this.selectedRun.contact.anon_display}
               urn=${this.selectedRun.contact.urn}
               onclick="goto(event, this)"
               href="/contact/read/${this.selectedRun.contact.uuid}/"
@@ -4954,7 +5035,7 @@ function t(t,e,i,n){var o,r=arguments.length,s=r<3?e:null===n?n=Object.getOwnPro
         margin-top: 2px;
       }
     `}render(){if(this.data)return O` <temba-contact-name
-          name=${this.data.name}
+          name=${this.data.name||this.data.anon_display}
           urn=${this.data.urns.length>0?this.data.urns[0]:null}
         />
         <slot></slot>`}}function cl(t,e){window.customElements.get(t)||window.customElements.define(t,e)}t([it({type:Number,attribute:"icon-size"})],ll.prototype,"size",void 0),cl("temba-anchor",Va),cl("temba-alert",Ia),cl("temba-store",ur),cl("temba-textinput",Ht),cl("temba-completion",ea),cl("temba-checkbox",rt),cl("temba-select",ta),cl("temba-options",pr),cl("temba-loading",sa),cl("temba-button",oa),cl("temba-omnibox",Fa),cl("temba-tip",Za),cl("temba-contact-name",Ja),cl("temba-contact-name-fetch",ll),cl("temba-contact-field",tl),cl("temba-contact-fields",Qa),cl("temba-urn",Xa),cl("temba-field",ra),cl("temba-dialog",na),cl("temba-modax",ia),cl("temba-charcount",fa),cl("temba-contact-history",Aa),cl("temba-contact-chat",ya),cl("temba-contact-details",Pa),cl("temba-ticket-list",Oa),cl("temba-list",La),cl("temba-run-list",sl),cl("temba-flow-details",al),cl("temba-label",Ka),cl("temba-menu",Ua),cl("temba-contact-search",za),cl("temba-icon",Na),cl("temba-dropdown",Wa),cl("temba-tabs",Ga),cl("temba-tab",Ya),cl("temba-contact-badges",class extends va{static get styles(){return r`

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

@@ -1,8 +1,15 @@
 <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
+<symbol id="icon-zapier" viewBox="0 0 32 32">
+<path fill="#474747" style="fill: var(--color1, #474747)" d="M4.8 0h22.4c2.651 0 4.8 2.149 4.8 4.8v22.4c0 2.651-2.149 4.8-4.8 4.8h-22.4c-2.651 0-4.8-2.149-4.8-4.8v-22.4c0-2.651 2.149-4.8 4.8-4.8z"></path>
+<path fill="#fff" style="fill: var(--color2, #fff)" d="M4.8 20.8h22.4v6.4h-22.4v-6.4z"></path>
+</symbol>
 <symbol id="icon-hourglass" viewBox="0 0 24 24">
 <path d="M12 11.484l3.984-3.984v-3.516h-7.969v3.516zM15.984 16.5l-3.984-3.984-3.984 3.984v3.516h7.969v-3.516zM6 2.016h12v6l-3.984 3.984 3.984 3.984v6h-12v-6l3.984-3.984-3.984-3.984v-6z"></path>
 </symbol>
+<symbol id="icon-menu-collapse" viewBox="0 0 24 24">
+<path d="M21 15.609l-1.406 1.406-5.016-5.016 5.016-5.016 1.406 1.406-3.563 3.609zM3 6h12.984v2.016h-12.984v-2.016zM3 12.984v-1.969h9.984v1.969h-9.984zM3 18v-2.016h12.984v2.016h-12.984z"></path>
+</symbol>
 <symbol id="icon-bar-chart" viewBox="0 0 24 24">
 <path d="M19 20v-10c0-0.552-0.448-1-1-1s-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1zM13 20v-16c0-0.552-0.448-1-1-1s-1 0.448-1 1v16c0 0.552 0.448 1 1 1s1-0.448 1-1zM7 20v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6c0 0.552 0.448 1 1 1s1-0.448 1-1z"></path>
 </symbol>
@@ -394,9 +401,6 @@
 <symbol id="icon-language" viewBox="0 0 20 20">
 <path d="M19.753 10.909c-0.624-1.707-2.366-2.726-4.661-2.726-0.090 0-0.176 0.002-0.262 0.006l-0.016-2.063c0 0 3.41-0.588 3.525-0.607s0.133-0.119 0.109-0.231c-0.023-0.111-0.167-0.883-0.188-0.976-0.027-0.131-0.102-0.127-0.207-0.109s-3.25 0.461-3.25 0.461-0.012-1.953-0.013-2.078c-0.001-0.125-0.069-0.158-0.194-0.156s-0.92 0.014-1.025 0.016c-0.105 0.002-0.164 0.049-0.162 0.148s0.033 2.307 0.033 2.307-3.061 0.527-3.144 0.543c-0.084 0.014-0.17 0.053-0.151 0.143s0.19 1.094 0.208 1.172c0.018 0.080 0.072 0.129 0.188 0.107 0.115-0.019 2.924-0.504 2.924-0.504l0.035 2.018c-1.077 0.281-1.801 0.824-2.256 1.303-0.768 0.807-1.207 1.887-1.207 2.963 0 1.586 0.971 2.529 2.328 2.695 3.162 0.387 5.119-3.060 5.769-4.715 1.097 1.506 0.256 4.354-2.094 5.98-0.043 0.029-0.098 0.129-0.033 0.207s0.541 0.662 0.619 0.756c0.080 0.096 0.206 0.059 0.256 0.023 2.51-1.73 3.661-4.515 2.869-6.683zM12.367 14.097c-0.966-0.121-0.944-0.914-0.944-1.453 0-0.773 0.327-1.58 0.876-2.156 0.335-0.354 0.75-0.621 1.229-0.799l0.082 4.277c-0.385 0.131-0.799 0.185-1.243 0.131zM14.794 13.544l0.046-4.109c0.084-0.004 0.166-0.010 0.252-0.010 0.773 0 1.494 0.145 1.885 0.361s-1.023 2.713-2.183 3.758zM5.844 5.876c-0.030-0.094-0.103-0.145-0.196-0.145h-1.95c-0.093 0-0.165 0.051-0.194 0.144-0.412 1.299-3.48 10.99-3.496 11.041s-0.011 0.076 0.062 0.076h1.733c0.075 0 0.099-0.023 0.114-0.072 0.015-0.051 1.008-3.318 1.008-3.318h3.496c0 0 0.992 3.268 1.008 3.318s0.039 0.072 0.113 0.072h1.734c0.072 0 0.078-0.025 0.062-0.076-0.014-0.050-3.083-9.741-3.494-11.040zM3.226 12.194l1.447-5.25 1.447 5.25h-2.894z"></path>
 </symbol>
-<symbol id="icon-zapier" viewBox="0 0 32 32">
-<path fill="#ff4a00" style="fill: var(--color1, #ff4a00)" d="M20 16.005c0 1.191-0.22 2.328-0.615 3.38-1.049 0.396-2.191 0.615-3.38 0.615h-0.012c-1.191 0-2.327-0.22-3.379-0.615-0.396-1.052-0.615-2.191-0.615-3.38v-0.012c0-1.191 0.219-2.327 0.615-3.379 1.052-0.396 2.189-0.615 3.379-0.615h0.012c1.191 0 2.331 0.219 3.38 0.616 0.396 1.051 0.615 2.188 0.615 3.38zM31.78 13.333h-9.34l6.597-6.603c-0.52-0.731-1.093-1.413-1.727-2.044-0.631-0.632-1.313-1.209-2.040-1.728l-6.605 6.599v-9.337c-0.865-0.139-1.751-0.22-2.66-0.22h-0.013c-0.907 0-1.795 0.081-2.66 0.22v9.34l-6.6-6.599c-0.732 0.515-1.413 1.095-2.045 1.725-0.632 0.632-1.211 1.316-1.728 2.044l6.599 6.603h-9.337c0 0-0.22 1.755-0.22 2.66v0.012c0 0.907 0.081 1.797 0.22 2.66h9.34l-6.599 6.603c1.036 1.461 2.311 2.735 3.769 3.773l6.603-6.6v9.339c0.864 0.14 1.751 0.22 2.655 0.22h0.023c0.905 0 1.792-0.080 2.655-0.22v-9.339l6.603 6.6c0.731-0.5 1.413-1.083 2.039-1.72h0.007c0.631-0.62 1.208-1.301 1.728-2.041l-6.6-6.599h9.339c0.14-0.86 0.22-1.739 0.22-2.64v-0.041c0-0.904-0.080-1.791-0.22-2.653z"></path>
-</symbol>
 <symbol id="icon-cord" viewBox="0 0 32 32">
 <path d="M27.59 12.41c-0.464-0.464-1.216-0.464-1.679 0l-4.91 4.91-6.321-6.321 4.91-4.91c0.464-0.464 0.464-1.216 0-1.679s-1.216-0.464-1.679 0l-4.91 4.91-2.91-2.91c-0.464-0.464-1.216-0.464-1.679 0s-0.464 1.216 0 1.679l2.093 2.093-4.16 4.16c-2.636 2.636-3.048 6.653-1.236 9.721l-4.521 4.521c-0.781 0.781-0.781 2.047 0 2.828 0.391 0.391 0.902 0.586 1.414 0.586s1.024-0.195 1.414-0.586l4.521-4.521c3.068 1.812 7.085 1.4 9.721-1.236l4.16-4.16 2.093 2.093c0.232 0.232 0.536 0.348 0.84 0.348s0.608-0.116 0.84-0.348c0.464-0.464 0.464-1.216 0-1.679l-2.91-2.91 4.91-4.91c0.464-0.464 0.464-1.216 0-1.679z"></path>
 </symbol>

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"0dab0c35.js",revision:"0eb3aca26506946e64d7ff4384285133"},{url:"templates/components-body.html",revision:"adcb18d0b58a90464089b11ebf7ad0a1"},{url:"templates/components-head.html",revision:"61eb010764261f3104260eeb19908636"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"41f084a5.js",revision:"25ae98d5e285e8a26431d3c71dd941cc"},{url:"templates/components-body.html",revision:"2e1d5f2b4ef4f4f1a46f6f0b7cb6f0d8"},{url:"templates/components-head.html",revision:"25d617274eca210fb85e6f46896eda97"}],{}),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/db2ab5918324dff02c584a0447b115ef/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"0dab0c35.js\",\n    \"revision\": \"0eb3aca26506946e64d7ff4384285133\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"adcb18d0b58a90464089b11ebf7ad0a1\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"61eb010764261f3104260eeb19908636\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/0fe091348eacc39931bf4ca4ca8a8282/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"41f084a5.js\",\n    \"revision\": \"25ae98d5e285e8a26431d3c71dd941cc\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"2e1d5f2b4ef4f4f1a46f6f0b7cb6f0d8\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"25d617274eca210fb85e6f46896eda97\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["url","revision","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,CACEA,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,oBAE2B,IAAIC,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/0dab0c35.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.31.5"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/41f084a5.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.31.8"</script>

package/dist/templates/components-head.html

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